@charset "UTF-8";

/* !HTML5 elements ---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting ---------------------------------------------------------------- */
html {
	overflow-y: scroll;
	-webkit-font-smoothing:　antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-print-color-adjust: exact;
	font-size: 62.5%;
}
body {
/*	font-family: 'Noto Sans JP', sans-serif;*/
	font-weight: 400;
	font-family: Hiragino Sans, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic Pro, Osaka, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS P Gothic, Verdana, sans-serif;
	font-size: 1.3rem;
	-webkit-text-size-adjust: none;
	line-height: 1.8;
	letter-spacing: .05em;
	color: #1f2c5d;
	word-wrap: break-word;
	text-align: left;
	background: #fff;
	overflow-x: hidden;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}
body.frameInner { background-color: transparent;}
/* ie7 */ *:first-child+html body { font-size: 82%; /* 69%; */}
/* ie6Below */ * html body { font-size:82%; /* font-size: 69%; */}
/* ie8 */ html>/**/body { font-size /*\**/: 82%\9;}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
img
{ vertical-align: middle;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ /* outline: none; */ }
abbr, acronym
{ border: 0;}

/* !Reset Module ------------------------------------------------------------ */
.reset div, .reset dl, .reset dt, .reset dd, .reset ul, .reset ol, .reset li, .reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6,
.reset pre, .reset form, .reset fieldset, .reset p, .reset blockquote, .reset th, .reset td
{ margin: 0; padding: 0;}
.reset input, .reset textarea
{ margin: 0; font-size: 100%;}
.reset table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
.reset fieldset, .reset img, .reset abbr, .reset acronym
{ border: 0;}
.reset address, .reset caption, .reset cite, .reset code, .reset dfn, .reset em, .reset th, .reset var
{ font-style: normal; font-weight: normal;}
.reset ol, .reset ul
{ list-style: none;}
.reset caption, .reset th
{ text-align: left;}
.reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6
{ font-size: 100%; font-weight: normal;}
.reset a, .reset input
{ /* outline: none; */ }
.reset q:after, .reset q:before
{ content:'';}

input,
textarea,
select {
    font-size: 16px;
}

/* !Clearfix ---------------------------------------------------------------- */
.clearfix
{
	display: block;
	min-height: 1%;
}
.clearfix:after
{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix
{
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* !Layout ------------------------------------------------------------------ */

/* !Define mobile styles
---------------------------------------------------------- */
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
img {
	max-width: 100%;
	height: auto;
}
figure { margin: 0;}

/* !Wrapper
---------------------------------------------------------- */
#is-loading {
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	background: #fff;
	z-index: 9999;
}
#loading {
	display: none;
	position: fixed;
	top: -webkit-calc(50% - 50px);
	top: calc(50% - 50px);
	left: -webkit-calc(50% - 100px);
	left: calc(50% - 100px);
	width: 200px;
	height: 100px;
	text-align: center;
	z-index: 10000;
}
	.loading {
		color: #1f2c5d;
		font-weight: 200;
		letter-spacing: .3em;
		text-indent: .3em;
		font-size: .9em;
		margin: 1em 0 0;
	}

.ball-pulse-sync {}
	.ball-pulse-sync > div {
		background-color: #1f2c5d;
		width: 15px;
		height: 15px;
		border-radius: 100%;
		margin: 4px;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		display: inline-block;
	}
	.ball-pulse-sync > div:nth-child(1) {
		-webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
		animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
	}
	.ball-pulse-sync > div:nth-child(2) {
		-webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
		animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
	}
	.ball-pulse-sync > div:nth-child(3) {
		-webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
		animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
	}

#wrapper {
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

/* !Header
---------------------------------------------------------- */
header {
	position: relative;
    height: 90vh;
    max-height: 650px;
}
header,
.sectionCourse {
	background-color: #78e5da;
    background-image: url("../images/bg_sea01.png");
    background-size: 20% auto;
}
    header div,
    .ttl__main,
    .txt__main { position: absolute;}
    .ttl__main {
        width: 100%;
        bottom: 55%;
        left: 0%;
        z-index: 10;
/*
        background-image: url("../img/img_main_base.svg");
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
*/
        padding: 2%;
    }
    .txt__main {
        width: 90%;
        top: 50%;
        left: 5%;
        z-index: 4;
        background-color: #fff;
        border-radius: 1em;
        padding: 1em 1.5em;
        font-size: 3vw;
    }
    .main01 {
        width: 40%;
        top: 2%;
        left: 3%;
        z-index: 1;
    }
    .main02 {
        width: 45%;
        bottom: 82%;
        right: -3%;
        z-index: 1;
    }
    .main03 {
        width: 20%;
        top: 38%;
        left: 5%;
        z-index: 5;
    }
    .main04 {
        width: 25%;
        top: 15%;
        right: 2%;
        z-index: 5;
    }
    .main05 {
        width: 35%;
        bottom: 0%;
        left: 5%;
        z-index: 5;
    }
    .main06 {
        width: 50%;
        bottom: 0%;
        left: 0%;
        z-index: 3;
    }
    .main07 {
        width: 55%;
        bottom: 0%;
        right: -5%;
        z-index: 4;
    }
    .main08 {
        width: 20%;
        bottom: 50%;
        right: 5%;
        z-index: 5;
    }
    .main09 {
        width: 20%;
        top: 5%;
        left: 45%;
        z-index: 3;
    }
    .main__present {
        width: 40%;
        bottom: -13%;
        right: 20%;
        z-index: 6;
    }
        .circle {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .pic__present {
            width: 98%;
            top: 4%;
            left: 1%;
        }

/* !Contents
---------------------------------------------------------- */
#contents {}

.inner {
	margin: 0 auto;
	width: 87.5vw;
	max-width: 1000px;
}

.sectionAbout {
    padding: 4em 0;
    position: relative;
}
    .subTitle01 {
		width: 40%;
		max-width: 250px;
	}
    .eventinfo {
        margin: 2em auto;
        position: relative;
		z-index: 2;
    }
        .eventinfo a {
            display: block;
            background-color: #f4b4d0;
            border-radius: 1em;
            padding: 1em 2em;
        }
            .event__title {
                width: 50%;
                padding: .5em 0;
            }
            .event__date {}
            .chara01_1 {
                position: absolute;
                top: -20%;
                right: 10%;
                width: 20%;
                z-index: 10;
            }
    .listType01 {}
        .listType01 > li {
            margin: 1em auto;
            border: solid 4px;
            border-radius: 1em;
            background-color: #fbf7b5;
            overflow: hidden;
        }
            .pic__step {
                background-color: #f4b4d0;
                padding: 1em;
                text-align: center;
            }
                .pic__step img { width: 40%;}
            .step { padding: 1.5em;}
                .step dt {}
                    .step dt span {
                        background-color: #1f2c5d;
                        border-radius: 100px;
                        color: #fff;
                        padding: .2em 1em;
                        line-height: 1;
                    }
                .step dd { margin: 1em 0 0;}
                    .txtType01 {
                        font-size: 1.2em;
                        font-weight: 600;
                    }
                    .txtType02 { font-size: .9em;}
                .step__wrap {}

	.ttlType01 {
		text-align: center;
		font-weight: 600;
		margin: 0 0 .5em;
        line-height: 1.4;
	}
    .ttlType01.sizeL { font-size: 1.4em;}
    .ttlType01.sizeS { font-size: .9em;}
		.ttlType01 span {
			position: relative;
			padding: 0 1em;
		}
		.ttlType01 span::before,
		.ttlType01 span::after {
			width: .1em;
			height: 1.2em;
			background: #1f2c5d;
			content: "";
			display: block;
			position: absolute;
			bottom: -.2em;
		}
		.ttlType01 span::before {
			-webkit-transform: rotate(-30deg);
			-ms-transform: rotate(-30deg);
			transform: rotate(-30deg);
			left: 0;
		}
		.ttlType01 span::after {
			-webkit-transform: rotate(30deg);
			-ms-transform: rotate(30deg);
			transform: rotate(30deg);
			right: 0;
		}
    .eventpresent {
        background-color: #fff8b0;
        border-radius: 1em;
        padding: 2em 2em 1em;
        text-align: center;
		margin: 0 0 2em;
    }
        .txtType03 {
            display: inline-block;
            background-color: #1f2c5d;
            color: #fff;
            border-radius: 100px;
            padding: .1em 1em .2em;
            margin: .5em auto 0;
        }
    .btn__area02 { margin: 3em auto;}

.eventpoint {
    background-color: #f4b4d0;
    border-radius: 1em;
    padding: 1em 2em;
}
    .eventpoint ul {}
        .eventpoint ul li {
            position: relative;
            padding: 0 0 0 2em;
            margin: .5em 0;
        }
        .eventpoint ul li::before {
            position: absolute;
            top: -webkit-calc(50% - 1em);
            top: calc(50% - 1em);
            left: 0;
            font-size: 2em;
            color: #fff;
            font-weight: 700;
        }
        .eventpoint ul li.no_1::before { content: "1";}
        .eventpoint ul li.no_2::before { content: "2";}
        .eventpoint ul li.no_3::before { content: "3";}
        .eventpoint ul li.no_4::before { content: "4";}
    .eventpoint__pic {
        width: 80%;
        max-width: 300px;
        margin: auto;
    }

.bg__cloud {
    position: absolute;
    z-index: -1;
}
.bg__cloud.type01 {
    width: 10em;
    top: 3em;
    left: -2em;
}
.bg__cloud.type02 {
    width: 8em;
    top: 7em;
    right: -2em;
}
.bg__cloud.type03 {
    width: 7em;
    bottom: 12em;
    left: 1em;
}
.bg__cloud.type04 {
    width: 11em;
    bottom: 0;
    right: 1em;
}
.bg__cloud.type05 {
    width: 5em;
    bottom: 10em;
    right: -2em;
}

.sectionQuiz {
	margin: 5em 0 0;
    padding: 10em 0;
/*
    background: repeating-linear-gradient( -45deg, #e6e6e6, #e6e6e6 12px, #f2f2f2 12px, #f2f2f2 24px);
    background-size: 34px 100%;
*/
    background-color: #d9f8f5;
}
	.ttlBox01 {
		text-align: center;
		margin: 0 0 2em;
	}
		.chara__all01 {
			width: 15em;
			margin: -16em auto 1em;
		}
		.ttlBox01__wrap {}
			.ttlType02 {
				font-weight: 800;
				line-height: 1.2;
				font-size: 1.8em;
				letter-spacing: .1em;
				text-align: center;
			}
	.listType02 {}
		.listType02 > li {
			border: solid #1f2c5d;
			background-color: #fff;
			border-radius: 1em;
			margin: 1em auto;
			padding: 1.5em;
		}
			.howto {}
				
				.howto > dt {}
					.ex { font-weight: 500; text-align: center;}
						.ex > dt {
							background-color: #1f2c5d;
							color: #fff;
							padding: .3em;
							font-size: .9em;
						}
						.ex > dd {
                            background-color: #f4b4d0;
							padding: .3em;
							font-size: .9em;
                        }
					.howto > dd div { margin: 1em 0;}
						.howto > dd div img {}
					.answer01 {
						width: 60%;
						max-width: 300px;
					}
                    .howto > dd div.answer01 { margin: auto;}
					.answer02 {
						margin: 1em auto !important;
					}
					.howto > dd p {
						margin: 1em 0;
                        color: #000;
                        font-weight: normal;
                        font-size: .9em;
                        line-height: 1.8;
					}
					.notice01 {
						color: #e50012;
						font-size: .9em;
					}
                .howto > dd {
					font-weight: 600;
					font-size: 1.2em;
					line-height: 1.4;
					margin: .5em 0 0;
				}
	.txtType04 {
		font-weight: 600;
		font-size: 1.1em;
        margin: 0 0 2em;
	}
.movie {}
    .movie__inner {
        position: relative;
/*        padding-bottom: 56.25%;*/
		padding-bottom: 177.889%;
        width: 100%;
        height: 0;
    }
        .movie__inner iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }

.sectionCourse {
    padding: 10em 0 3em;
}
/*
	.sectionCourse .ttlBox01 { color: #fff;}
		.sectionCourse .ttlBox01 .ttlType01 span::before,
		.sectionCourse .ttlBox01 .ttlType01 span::after { background: #fff;}
*/

	.course__wrap {
		background-color: #fff;
		border-radius: 1em;
		margin: 2em auto;
		padding: 1em 0;
	}
		.spot { padding: 1.5em;}
		.spot.inversion {}
			.course__category {
				width: 60%;
				margin: auto;
			}
			.spot__wrap {}
				.spot__wrap figure {}
				.spot__wrap dl {}
					.spot__wrap dl dt:nth-child(1) {
						font-weight: 600;
						color: #E96BA2;
						font-size: 1.2em;
					}
					.spot__wrap dl dt:nth-child(2) {
						font-weight: 800;
						line-height: 1.2;
						font-size: 1.5em;
						border-bottom: solid 4px;
						padding: 0 0 .3em;
						margin: 0 0 .3em;
					}
						.spot__wrap dl dt span { font-size: 70%;}
					.spot__wrap dl dd {
						margin: 0 0 1em;
						font-size: .9em;
					}
					.spot__wrap dl dd p { font-size: 1.2em;}
				.btn__area03 {
					width: 70%;
					margin: auto;
				}
	.course__wrap .btn__area02 {
		width: 90%;
		margin: 0 auto 3em;
	}
		.move {
			background-color: #FBF7B5;
			background-image: url("../images/pic_arrow.png");
			background-position: center;
			background-size: auto 60%;
			background-repeat: no-repeat;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			font-weight: 600;
			font-size: 1.2em;
			height: 6em;
		}
			.move span {
				padding-left: -webkit-calc(50% + 1.5em);
				padding-left: calc(50% + 1.5em);
			}
				.move span img {
					width: 2em;
					margin: 0 .5em 0 0;
				}

.sectionMap {
	padding: 4em 0;
	position: relative;
}
/*.sectionMap .inner { max-width: 800px;}*/
	.pic__map { margin: 2em auto; display: block;}

.marquee { display: none;}

/* Common ----------------------------*/
.dnSP { display: none;}
.dnPC {}

.color__red { color: #e50012;}

.listType__notice {}
    .listType__notice li {
		display: inline-block;
        position: relative;
        padding: 0 0 0 1em;
        margin: .3em 0;
        font-size: .9em;
        line-height: 1.5;
    }
    .listType__notice li::before {
        position: absolute;
        content: "※";
        left: 0;
        top: 0;
    }

.btnType01 {
    display: block;
    border: solid 3px;
    border-radius: 100px;
    background-color: #f4b4d0;
    text-align: center;
    line-height: 1.2;
    padding: 1em;
    font-size: 1.2em;
    font-weight: 600;
    margin: 1em auto;
}
.btnType01.color01 {
	background-color: #ffa500;
	box-shadow: 0 20px 25px 0 rgb(0 0 0 / 20%);
}
    .btnType01 span {
        position: relative;
        padding: 0 0 0 2em;
    }
    .btnType01 span::before {
        content: "";
        position: absolute;
        width: 1.4em;
        height: 1.4em;
        border-radius: 100px;
        background-color: #1f2c5d;
        top: -webkit-calc(50% - .7em);
		top: calc(50% - .7em);
        left: 0;
    }
    .btnType01 span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: .35em;
        width: .4em;
        height: .4em;
        border-top: #fff 2px solid;
        border-right: #fff 2px solid;
        -webkit-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
    }

/* !footer
---------------------------------------------------------- */
#footer {
	width: 100%;
	margin: 2em 0 0;
}
#footer a { color: #fff;}
	.pageTop01 {
		display: block;
		position: fixed;
		right: 15px;
		z-index: 8000;
		width: 50px;
		height: 50px;
		text-indent: 100%;
	}
		.pageTop01 a {
			display: block;
			color: #1f2c5d !important;
			width: 50px;
			height: 50px;
			border-radius: 100px;
			filter: alpha(opacity=100);
			-moz-opacity: 1;
			-khtml-opacity: 1;
			background-color: rgba(255,255,255,1);
			border: solid 2px;
			position: relative;
		}
		.pageTop01 a::before {
			content: "";
			display: block;
			width: 12px;
			height: 12px;
			background-color: transparent;
			border-top: 1px solid;
			border-left: 1px solid;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			top: 20px;
			left: -webkit-calc(25% + 5px);
			left: calc(25% + 5px);
		}

	.footer__inner01 {
		background-color: #1f2c5d;
		color: #fff;
		padding: 2em 0;
	}
		.socialType01 {
			text-align: center;
			margin: 0 auto 2em;
			border-bottom: solid 1px;
			border-bottom-color: rgba(255, 255, 255, .5);
			padding: 0 0 2em;
		}
			.socialType01 dt {
				font-weight: 200;
				letter-spacing: .3em;
				text-indent: .3em;
				font-size: .8em;
				margin: 0 0 .5em;
			}
			.socialType01 dd {}
				.socialType01 ul { display: inline-block;}
					.socialType01 li {
						height: 20px;
						margin: 0 8px;
						display: inline-block;
					}
					.socialType01 li a { display: block;}
						.socialType01 li img { height: 20px;}
		.txtType05 {
			font-size: 85%;
			margin: .5em 0 0;
		}
	.footer__inner02 {
		text-align: center;
		color: rgba(0, 0, 0, .6);
		font-size: 10px;
		padding: 2em;
	}

/* animation --------------------------*/
.animation10s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animation11s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animation12s {
	visibility: visible;
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.animation13s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animation14s {
	visibility: visible;
	-webkit-animation-delay: 1.4s;
	animation-delay: 1.4s;
}
.animation15s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animation16s {
	visibility: visible;
	-webkit-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
.animation17s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animation18s {
	visibility: visible;
	-webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;
}
.animation19s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animation20s {
	visibility: visible;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.animation21s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animation22s {
	visibility: visible;
	-webkit-animation-delay: 2.2s;
	animation-delay: 2.2s;
}
.animation24s {
	visibility: visible;
	-webkit-animation-delay: 2.2s;
	animation-delay: 2.2s;
}
.animation26s {
	visibility: visible;
	-webkit-animation-delay: 2.2s;
	animation-delay: 2.2s;
}

@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }
  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }
  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

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

@-webkit-keyframes blur {
	0% {
		opacity: 0;
		-webkit-filter: blur(5px);
    	filter: blur(5px);
	}
	100% {
		opacity: 1;
		-webkit-filter: blur(0px);
    	filter: blur(0px);
	}
}
@keyframes blur {
	0% {
		opacity: 0;
		-webkit-filter: blur(5px);
    	filter: blur(5px);
	}
	100% {
		opacity: 1;
		-webkit-filter: blur(0px);
    	filter: blur(0px);
	}
}
.blur {
	-webkit-animation-name: blur;
	animation-name: blur;
	-webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@-webkit-keyframes flash {
	0% { opacity: 0;}
	50% { opacity: 1;}
	100% { opacity: 0;}
}
@keyframes flash {
	0% { opacity: 0;}
	50% { opacity: 1;}
	100% { opacity: 0;}
}
.flash {
	-webkit-animation:flash 1s infinite linear alternate;
	animation:flash 1s infinite linear alternate;
}

@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 pop01 {
  0% {opacity: 0;
    -webkit-transform: scale(1.0, 1.0) translate3d(0, 0, 0);
    transform: scale(1.0, 1.0) translate3d(0, 0, 0);
  }
  15% {opacity: 1;
    -webkit-transform: scale(0.9, 0.9) translate3d(0, 3%, 0);
    transform: scale(0.9, 0.9) translate3d(0, 3%, 0);
  }
  30% {
    -webkit-transform: scale(1.2, 0.8) translate3d(0, 7%, 0);
    transform: scale(1.2, 0.8) translate3d(0, 7%, 0);
  }
  50% {
    -webkit-transform: scale(0.8, 1.2) translate3d(0, -7%, 0);
    transform: scale(0.8, 1.2) translate3d(0, -7%, 0);
  }
  70% {
    -webkit-transform: scale(1.1, 0.9) translate3d(0, 3%, 0);
    transform: scale(1.1, 0.9) translate3d(0, 3%, 0);
  }
  100% {
    -webkit-transform: scale(1.0, 1.0) translate3d(0, 0, 0);
    transform: scale(1.0, 1.0) translate3d(0, 0, 0);
  }
}
@keyframes pop01 {
  0% {opacity: 0;
    -webkit-transform: scale(1.0, 1.0) translate3d(0, 0, 0);
    transform: scale(1.0, 1.0) translate3d(0, 0, 0);
  }
  15% {opacity: 1;
    -webkit-transform: scale(0.9, 0.9) translate3d(0, 3%, 0);
    transform: scale(0.9, 0.9) translate3d(0, 3%, 0);
  }
  30% {
    -webkit-transform: scale(1.2, 0.8) translate3d(0, 7%, 0);
    transform: scale(1.2, 0.8) translate3d(0, 7%, 0);
  }
  50% {
    -webkit-transform: scale(0.8, 1.2) translate3d(0, -7%, 0);
    transform: scale(0.8, 1.2) translate3d(0, -7%, 0);
  }
  70% {
    -webkit-transform: scale(1.1, 0.9) translate3d(0, 3%, 0);
    transform: scale(1.1, 0.9) translate3d(0, 3%, 0);
  }
  100% {
    -webkit-transform: scale(1.0, 1.0) translate3d(0, 0, 0);
    transform: scale(1.0, 1.0) translate3d(0, 0, 0);
  }
}
.pop01 {
  -webkit-animation-name: pop01;
	animation-name: pop01;
	-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;
}

@-webkit-keyframes horizontal01 {
  0% {
    -webkit-transform: translateX(-1.1rem);
    transform: translateX(-1.1rem);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes horizontal01 {
  0% {
    -webkit-transform: translateX(-1.1rem);
    transform: translateX(-1.1rem);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@-webkit-keyframes vertical01 {
  0% {
    -webkit-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes vertical01 {
  0% {
    -webkit-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.float {
  -webkit-animation: horizontal01 2s ease-in-out infinite alternate;
  animation: horizontal01 2s ease-in-out infinite alternate;
}
.float span {
  -webkit-animation: vertical01 2s ease-in-out infinite alternate;
  animation: vertical01 2s ease-in-out infinite alternate;
  display: block;
}

.float span.duration01 {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
}

.float span.duration02 {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}

.float span.duration03 {
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
}

.float span.duration04 {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.float span.duration05 {
  -webkit-animation-duration: 2.0s;
  animation-duration: 2.0s;
}

@keyframes animScale {
	0% { transform: scale(0.8, 0.8);}
	40% { transform: scale(1.2, 1.2);}
	60% { transform: scale(1, 1);}
	80% { transform: scale(1.1, 1.1);}
	100% { transform: scale(1, 1);}
}

@-webkit-keyframes marquee-text {
	0% {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	100% {
		-webkit-transform: translate3d(0,-540px,0);
		transform: translate3d(0,-540px,0);
	}
}
@keyframes marquee-text {
	0% {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	100% {
		-webkit-transform: translate3d(0,-540px,0);
		transform: translate3d(0,-540px,0);
	}
}

/* scroll animation --------------------------*/
.sa {
	opacity: 0;
	transition: all .8s 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);}



@media only print, screen and (max-width: 320px) {
html { font-size: 8px;}
}



@media only print, screen and (min-width: 568px) {

header {
	height: 800px;
    max-height: none;
}
    .ttl__main {
        width: 80%;
        bottom: 50%;
        left: 10%;
    }
    .txt__main {
        top: 50%;
        padding: 2em;
        font-size: 1em;
        text-align: center;
    }
    .main01 {
        width: 33%;
    }
    .main02 {
        width: 35%;
        bottom: 80%;
/*        right: 2%;*/
        z-index: 2;
    }
    .main03 {
        top: 40%;
		left: 3%;
    }
    .main04 {
        width: 18%;
        top: 14%;
		right: 8%;
    }
    .main05 {
        width: 23%;
/*
        bottom: 28%;
        left: 5%;
*/
    }
    .main06 {
/*        width: 23%;*/
        bottom: 2%;
		left: 2%;
    }
    .main07 {
		width: 45%;
/*
		bottom: 28%;
		right: -3%;
*/
    }
	.main08 {
		width: 15%;
		bottom: 45%;
		right: 8%;
	}
    .main__present {
        width: 30%;
/*        right: 3%;*/
    }

}



/* !Medium screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 768px) {

/* !Header
---------------------------------------------------------- */
header {}

/* !contents
---------------------------------------------------------- */
#contents {}

.sectionAbout {}
    .subTitle01 { margin: auto;}
    .eventinfo {}
        .eventinfo a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
            .event__title {
                width: 30%;
                padding: 0 5% 0 0;
            }
            .event__date { width: 50%;}
            .chara01_1 {
                top: -50%;
                right: 2%;
                width: 15%;
            }
    .listType01 {}
        .listType01 > li {
            margin: 2em auto;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
        }
        .step02 {
            background-image: url("../images/pic_chara02_1.png");
            background-position: 95% 1em;
            background-repeat: no-repeat;
            background-size: 15%;
        }
        .step03 {
            background-image: url("../images/pic_chara03_1.png");
            background-position: 95% 1em;
            background-repeat: no-repeat;
            background-size: 15%;
        }
            .pic__step {
                width: 20%;
                padding: 3em 1em;
            }
                .pic__step img { width: 80%;}
            .step {
                width: 80%;
                padding: 1em 1.5em;
            }
                .step dt {}
                .step dd {}
                    .txtType01 {}
                    .txtType02 {}
                .step__wrap {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
                    -webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;
                }
                    .commentary { width: 55%;}
                    .btn__area01 { width: 40%;}
                        .btn__area01 .btnType01 { margin: 0;}

    .ttlType01 {}
    .ttlType01.sizeL { font-size: 1.8em;}
    .ttlType01.sizeS { font-size: 1.2em;}
    .eventpresent {
        padding: 2em;
    }
        .eventpresent img {
            width: 80%;
            max-width: 820px;
            margin: auto;
        }
        .txtType03 {
            font-size: 1.2em;
        }
    .btn__area02 {
        width: 70%;
        margin: 3em auto;
    }
	.sectionCourse .btn__area02 {
		margin: -2em auto 5em;
		width: 70%;
	}
        .btn__area02 .btnType01 { font-size: 1.4em;}
	
.eventpoint {
    padding: 2em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
    .eventpoint ul {
		font-size: 1.1em;
		font-weight: 600;
	}
        .eventpoint ul li {
			margin: 1em 0;
			padding: 0 0 0 2.2em;
		}
        .eventpoint ul li::before {
			top: -webkit-calc(50% - .9em);
            top: calc(50% - .9em);
            font-size: 2.2em;
        }
    .eventpoint__pic { padding: 0 0 0 2em;}

.sectionQuiz { padding: 3em 0 10em;}
	.ttlBox01 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
	}
		.chara__all01 {
			width: 35%;
			margin: -30em auto 0;
		}
		.ttlBox01__wrap {
			width: 65%;
			font-size: 110%;
			margin: 1em 0;
		}
			.ttlType02 { font-size: 2em;}
	.listType02 {}
		.listType02 > li {
			margin: 2em auto;
			padding: 2em 5em;
		}
			.howto {}
				.howto > dt {
					font-size: 1.4em;
					margin: 0 0 1em;
					text-align: center;
				}
				.howto > dd {
					font-size: 1.5em;
					text-align: center;
				}
					.ex {
						text-align: center;
						letter-spacing: -.4em;
					}
						.ex > dt,
						.ex > dd {
							display: inline-block;
							letter-spacing: normal;
							padding: .5em 2em;
						}
						.ex > dt { font-size: 1em;}
						.ex > dd {
							font-size: 1em;
							margin: 0;
						}
					.howto > dd div { margin: 1.5em 0;}
					.answer01 {}
					.answer02 {}
					.howto > dd p {
						font-size: .8em;
						text-align: left;
					}
					.notice01 {
						font-size: 1em !important;
						text-align: center;
					}
					.howto .listType__notice li { font-size: .7em;}
	.txtType04 { font-size: 1.3em;}
.movie {
	width: 50%;
	max-width: 400px;
	margin: auto;
}

.sectionCourse { padding: 3em 0;}
	.sectionCourse .ttlBox01 {
		background-image: url("../images/bg_flag.png");
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: 0;
		padding: 2em 0 0;
		margin: -2em 0 2em;
	}
		.sectionCourse .chara__all01 {
			-webkit-box-ordinal-group: 2;
			-ms-flex-order: 2;
			-webkit-order: 2;
			order: 2;
		}
		.sectionCourse .ttlBox01__wrap {
			-webkit-box-ordinal-group: 1;
			-ms-flex-order: 1;
			-webkit-order: 1;
			order: 1;
		}
	.course__wrap {}
		.spot { padding: 2em 10em;}
		.move {}

.sectionMap {}
	.sectionMap .txtType04 { text-align: center;}

/* Common ----------------------------*/
.dnSP { display: inline;}
.dnPC { display: none;}

/* !footer
---------------------------------------------------------- */
#footer {}
	.pageTop01 {
		right: 30px;
		width: 60px;
		height: 60px;
	}
		.pageTop01 a {
			width: 60px;
			height: 60px;
			border-radius: 60px;
		}
		.pageTop01 a::before {
			width: 16px;
			height: 16px;
			top: 24px;
			left: -webkit-calc(25% + 6px);
			left: calc(25% + 6px);
		}

}



@media only print, screen and (min-width: 980px) {

/*a {
	-webkit-transition: .4s;
	transition: .4s;
}
a:hover,
a:active,
a:focus {
	text-decoration: none;
	filter: alpha(opacity=60);
	-moz-filter: "alpha(opacity=60)";
	-webkit-filter: "alpha(opacity=60)";
	opacity: 0.6;
}*/

.eventinfo a,
.socialType01 li a {
	-webkit-transition: .4s;
	transition: .4s;
}

.socialType01 li a:hover {
	text-decoration: none;
	filter: alpha(opacity=60);
	-moz-filter: "alpha(opacity=60)";
	-webkit-filter: "alpha(opacity=60)";
	opacity: 0.6;
}

.eventinfo a {}
.eventinfo a:hover { background-color: #cdb4e1;}

.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);
}
.btn02 {}
.btn02:hover {
	animation: animScale .4s ease-out;
	transform-origin: 50% 50%;
	-webkit-animation: animScale .4s ease-out;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: animScale .4s ease-out;
	-moz-transform-origin: 50% 50%;
}

}



/* !Large screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 1024px) {

/* !Header
---------------------------------------------------------- */
header {
	height: 80vh;
    max-height: 768px;
}
    .ttl__main {
        width: 70%;
        bottom: 30%;
        left: 15%;
    }
    .txt__main {
        background: none;
        top: 70%;
        padding: 2em;
        font-size: 1em;
        text-align: center;
		z-index: 6;
    }
    .main01 {
        width: 30%;
    }
    .main02 { bottom: 65%;}
    .main03 {
        width: 15%;
        bottom: 40%;
    }
    .main04 {
/*
        width: 15%;
        bottom: 40%;
        right: 5%;
*/
    }
    .main05 {
        width: 18%;
        left: 18%;
    }
    .main06 {
        width: 35%;
		bottom: 0%;
		left: -10%;
    }
    .main07 {
       width: 35%;
        right: -2%;
    }
	.main08 {
		width: 15%;
		bottom: 28%;
		right: 3%;
		z-index: 2;
	}
	.main09 {
		width: 15%;
	}
    .main__present {
        width: 20%;
		right: 18%;
		z-index: 5;
    }

/* !Contents
---------------------------------------------------------- */
#contents {}

.sectionAbout {}
    .subTitle01 { width: 50%; margin: auto;}
    .eventinfo {}
            .step { padding: 1em 3em;}
                    .txtType01 { font-size: 1.5em;}
                    .txtType02 { font-size: 1em;}

    .ttlType01 {}
    .ttlType01.sizeL { font-size: 2em;}
    .ttlType01.sizeS { font-size: 1.3em;}
    .eventpresent { padding: 3em;}
        .btn__area02 .btnType01 {
			padding: 1.5em;
			font-size: 1.6em;
		}

.sectionQuiz { padding: 5em 0 12em;}
	.ttlBox01 {
		width: 90%;
		margin: auto;
	}
/*		.chara__all01 { width: 40%;}*/
		.ttlBox01__wrap { width: 60%;}
	.listType02 {}
		.listType02 > li { padding: 3em 10em;}
			.howto {}
				.howto > dt { font-size: 1.6em;}
				.howto > dd {}
	.txtType04 { text-align: center;}

.sectionCourse { padding: 5em 0;}
	.sectionCourse .ttlBox01 {}
	.course__wrap {}
		.spot { padding: 1em 3em;}
		.spot.inversion {}
			.course__category {
				-webkit-transform: translateY(-50%) rotate(10deg);
				-ms-transform: translateY(-50%) rotate(10deg);
				transform: translateY(-50%) rotate(10deg);
				width: 35%;
				margin: 1em 68% -5em 0;
			}
			.course__category.drive { margin: 5em 0 -7em 68%;}
			.spot__wrap {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}
				.spot__wrap figure {
					width: 60%;
					margin: 0 2% 0 -10%;
				}
				.inversion .spot__wrap figure {
					margin: 0 -12% 0 3%;
					-webkit-box-ordinal-group: 2;
					-ms-flex-order: 2;
					-webkit-order: 2;
					order: 2;
				}
				.spot__wrap dl { width: 50%;}
				.inversion .spot__wrap dl {
					-webkit-box-ordinal-group: 1;
					-ms-flex-order: 1;
					-webkit-order: 1;
					order: 1;
				}
					.spot__wrap dl dt { font-size: 1.8em;}
					.spot__wrap dl dd p {
						font-size: 1.2em;
						margin: 2em 0;
					}
				.btn__area03 {
					width: 50%;
					margin: 0;
				}
		.move {
			font-size: 1.4em;
			margin: 0 0 1em;
		}

.sectionMap { padding: 5em 0;}
	.pic__map { margin: 3em auto;}

/* !Footer
---------------------------------------------------------- */
#footer {}
	.footer__inner01 { padding: 3em 0;}
		.socialType01 {}
			.socialType01 dt { font-size: .9em;}
			.socialType01 dd {}
				.socialType01 ul {}
		.txtType05 { font-size: 90%;}
	.footer__inner02 {
		font-size: 11px;
		padding: 3em;
	}

}



/* !XLarge screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 1280px) {

/* !Header
---------------------------------------------------------- */
header {
	height: 768px;
    max-height: none;
}
header,
.sectionCourse { background-size: 200px auto;}
    .ttl__main {}
    .txt__main {
        top: 72%;
    }
    .main01 {}
    .main02 {}
    .main03 {}
    .main04 {}
    .main05 {}
    .main06 {}
    .main07 { right: 0%;}
    .main__present {}
    
		.socialType01 li { height: 24px;}
			.socialType01 li img { height: 24px;}

/* !Contents
---------------------------------------------------------- */
#contents {}

.sectionAbout {
    max-width: 1440px;
    margin: auto;
}
    .eventinfo {}
        .eventinfo a { padding: 1.5em 3em;}
            .chara01_1 {
                top: -35%;
                right: 5%;
                width: 12%;
            }
    .listType01 {}
        .listType01 > li {}
        .step02 {
            background-position: 95% 1.5em;
            background-size: 12%;
        }
        .step03 {
            background-position: 95% 1.5em;
            background-size: 12%;
        }
            .pic__step {}
            .step {}

    .ttlType01 { font-size: 2.2em;}
    .eventpresent { margin: 0 0 4em;}
        .txtType03 { font-size: 1.4em;}
	.eventpoint { padding: 2em 4em;}
		.eventpoint ul { font-size: 1.3em;}

.bg__cloud {}
.bg__cloud.type01 {
    width: 20em;
    top: 6em;
    left: 5em;
}
.bg__cloud.type02 {
    width: 16em;
    top: 30em;
    right: 4em;
}
.bg__cloud.type03 {
    width: 14em;
    bottom: 30em;
    left: 2em;
}
.bg__cloud.type04 {
    width: 22em;
    bottom: 10em;
    right: 8em;
}
.bg__cloud.type05 {
    width: 10em;
    bottom: 20em;
    right: 0;
}

.sectionQuiz {}
	.ttlType02 { font-size: 2.4em;}

.sectionCourse {}
	.course__wrap { margin: 3em auto;}
		.spot { padding: 1em 5em;}
		.spot.inversion {}
			.course__category {
				width: 40%;
			}
			.course__category.drive { margin: 6em 0 -10em 65%;}
			.spot__wrap {}
				.spot__wrap figure {
					width: 65%;
					margin: 0 7% 0 -15%;
				}
				.inversion .spot__wrap figure { margin: 0 -17% 0 8%;}
				.spot__wrap dl { width: 45%;}
				.inversion .spot__wrap dl {}

.sectionMap {
	max-width: 1440px;
	margin: auto;
}

/* !Footer
---------------------------------------------------------- */
	.footerLogo img { height: 50px;}
	.copyright { font-size: 11px;}

}



/* !XXLarge screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 1366px) {
.marquee { display: block;}
	.side__left,
	.side__right {
		position: fixed;
		background-color: #1f2c5d;
		width: 40px;
		height: 100%;
		overflow: hidden;
		top: 0;
	}
	.side__left {
		left: 0;
	}
	.side__right {
		right: 0;
		transform: scale(-1,-1);
	}
		.text {
			position: absolute;
			width: 20px;
			height: 2160px;
			background-image: url("../images/img_text.png");
			background-position: center;
			background-repeat: repeat-y;
			background-size: contain;
			top: 0;
			left: 10px;
			-webkit-animation: marquee-text 10s linear infinite;
			animation: marquee-text 10s linear infinite;
		}

	.main01 {
		width: 27%;
		left: 5%;
	}
	.main03 {
		width: 14%;
		left: 5%;
	}
	.main04 {
		width: 15%;
		right: 15%;
		z-index: 1;
	}
	.main05 {
		width: 16%;
		left: 23%;
	}
	.main06 { bottom: -8%;}
	.main07 {
		right: 1%;
	}
	.main09 { width: 12%;}
	.main__present { right: 20%;}

}



@media only print, screen and (min-width: 1440px) {

header {
	height: 85vh;
    max-height: 900px;
}
    .ttl__main {
        text-align: center;
    }
        .ttl__main img { max-width: 900px;}
    .txt__main {
		top: 72%;
		font-size: 1.1em;
	}
    .main__present {
		max-width: 300px;
		right: 22%;
	}

}



@media only print, screen and (min-width: 1600px) {
.marquee {}
	.side__left,
	.side__right { width: 50px;}
		.text { left: 15px;}

}

@media only print, screen and (min-width: 1920px) {
.main__present {
    right: 25%;
}
}