@charset "utf-8";
/* CSS Document */
/* ---------------------- */
/* resert.css */
/* ---------------------- */
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*, ::before, ::after {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}
/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	-webkit-tap-highlight-color: transparent; /* 3*/
}
/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}
/* Vertical rhythm */
/* ============================================ */
p, table, blockquote, address, pre, iframe, form, figure, dl {
	margin: 0;
}
/* Headings */
/* ============================================ */
h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}
/* Lists (enumeration) */
/* ============================================ */
ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Lists (definition) */
/* ============================================ */
dt {
	font-weight: bold;
}
dd {
	margin-left: 0;
}
/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
	border-top-width: 1px;
	margin: 0;
	clear: both;
	color: inherit;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace; /* 1 */
	font-size: inherit; /* 2 */
}
address {
	font-style: inherit;
}
/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
	text-decoration: none;
	color: inherit;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	text-decoration: underline dotted; /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b, strong {
	font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code, kbd, samp {
	font-family: monospace, monospace; /* 1 */
	font-size: inherit; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg, img, embed, object, iframe {
	vertical-align: bottom;
}
/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button, input, optgroup, select, textarea {
	-webkit-appearance: none; /* 1 */
	appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	text-align: inherit;
	text-transform: inherit; /* 2 */
}
/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type="checkbox"] {
	-webkit-appearance: checkbox;
	appearance: checkbox;
}
[type="radio"] {
	-webkit-appearance: radio;
	appearance: radio;
}
/**
 * Correct cursors for clickable elements.
 */
button, [type="button"], [type="reset"], [type="submit"] {
	cursor: pointer;
}
button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled {
	cursor: default;
}
/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */ :-moz-focusring {
	outline: auto;
}
select:disabled {
	opacity: inherit;
}
/**
 * Remove padding
 */
option {
	padding: 0;
}
/**
 * Reset to invisible
 */
fieldset {
	margin: 0;
	padding: 0;
	min-width: 0;
}
legend {
	padding: 0;
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
	height: auto;
}
/**
 * 1. Correct the outline style in Safari.
 */
[type="search"] {
	outline-offset: -2px; /* 1 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */ ::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}
/**
 * Clickable labels
 */
label[for] {
	cursor: pointer;
}
/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}
/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
	outline: auto;
}
/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
	border-color: inherit; /* 1 */
	border-collapse: collapse;
}
caption {
	text-align: left;
}
td, th {
	vertical-align: top;
	padding: 0;
}
th {
	text-align: left;
	font-weight: bold;
}
/* © 2022 GitHub, Inc. Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About Loading complete */
/* ---------------------- */
/* common.css */
/* ---------------------- */
p {
	margin-bottom: 1em;
}
.mt40 {
	margin-top: 40px;
}
.mt50 {
	margin-top: 50px;
}
.mb40 {
	margin-bottom: 40px;
}
.mb50 {
	margin-bottom: 50px;
}
.pt40 {
	padding-top: 40px;
}
.pt50 {
	padding-top: 50px;
}
.pb40 {
	padding-bottom: 40px;
}
.pb50 {
	padding-bottom: 50px;
}
.pb80 {
	padding-bottom: 80px;
}
.f46 {
	font-size: 46px;
	font-weight: 800;
}
.f32 {
	font-size: 32px;
	font-weight: 800;
}
@media screen and (max-width: 500px) {
	body {
		font-size: 18px;
	}
	.inner {
		padding: 0
	}
	.bt01 {
		font-size: 24px;
	}
	h2 {
		font-size: 28px;
		/* letter-spacing: -3px; */
	}
	p {
		padding: 0 1.5em;
	}
	.ang2 {
		padding-left: 0;
	}
	.mt40 {
		margin-top: 40px;
	}
	.mt50 {
		margin-top: 50px;
	}
	.mb40 {
		margin-bottom: 40px;
	}
	.mb50 {
		margin-bottom: 50px;
	}
	.pt40 {
		padding-top: 40px;
	}
	.pt50 {
		padding-top: 50px;
	}
	.pb40 {
		padding-bottom: 40px;
	}
	.pb50 {
		padding-bottom: 50px;
	}
	.pb80 {
		padding-bottom: 80px;
	}
	.f46 {
		font-size: 20px;
		font-weight: 800;
	}
	.f32 {
		font-size: 18px;
		font-weight: 800;
	}
}
/* ---------------------- */
/* style.css */
/* ---------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@900&display=swap');
.noto-serif jp-black {
	font-family: "Noto Serif JP", serif;
	font-weight: 900;
	font-style: normal;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 24px;
	color: #333;
	line-height: 1.7;
	background: rgba(242, 239, 231, 0.6);
}
a:hover, a:active {
	text-decoration-line: underline;
	text-decoration-style: solid;
}
a.link {
	background: #173538;
	border-radius: 40px;
	color: #fff;
	font-weight: bold;
	width: 70%;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 5px 0;
}
a.link i {
	margin-right: 1em;
}
main {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	box-shadow: 0px 3px 16px -6px rgba(0, 0, 0, 0.6);
	position: relative;
}
header {
	position: fixed;
	height: 70px;
	width: 100%;
	background: #fff;
	z-index: 100;
	max-width: 1000px;
}
img {
	max-width: 100%;
}
.fv {
	padding-top: 70px;
}
.logo {
	margin-right: 0.1em;
	width: auto;
	height: 50px;
}
h2 {
	font-weight: 900;
	font-size: 50px;
	color: #500ca7;
	padding: 1em 0;
	text-align: center
}
.box {
	/* border: 20pt solid #779ea4; */
	background-color: #fff;
	padding: 0.2em;
	margin: 3em 0.5em;
	border-radius: 20px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.5);
}
.box h2.font_fit {
	font-size: min(calc(100vw / 13), 50px);
	margin-top: 0em;
	margin-bottom: 0em;
	line-height: 1.3em;
	padding: 0.8em 0.6em 0.3em;
}
.box h2 span.aline {
	/**
	background-image: linear-gradient(135deg, rgba(216,38,81,1.00) 10%, rgba(216,38,81,0.20) 100%);
	background-repeat: no-repeat;
	background-size: auto 4px;
	background-position: bottom;
	**/
	display:inline-block;
		
	background: -webkit-linear-gradient(left, rgb(250 183 194) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(250 183 194)) 50%, transparent 50%);
	background: linear-gradient(left, rgb(250 183 194) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em;
	background-position: 100% .5em;
	transition: 2s;
	font-weight: bold;
		
		
		
}
.box h2 span.aline.is-active {
	background-position: 0% .5em;
}


.box h2 span.min70 {
	font-size: 70%;
	color: #333;
}
.box p {
	padding: 0 1.0em;
	font-size: calc(100vw / 20);
}
.box a.link {
	margin-bottom: 1em;
}
.arrow {
	text-align: center;
}
.content {
	margin: 0 auto;
}
.ang2 {
	padding-left: 100px;
}
footer {
	margin-bottom: 70px;
}
.fix {
	position: fixed;
	bottom: 0;
	height: 70px;
	display: flex;
	width: 100%;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
}
.line {
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: rgba(1, 124, 155, 0.65);
	width: 50%;
	border: 1px solid #fff;
	border-radius: 3px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.line i:after, .tel i:after {
	content: " ";
}
.tel {
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: rgba(159, 22, 164, 0.65);
	border: 1px solid #fff;
	border-radius: 3px;
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.unfer_btn {
	position: relative;
	width: calc(100% - 15px);
	height: calc(100% - 15px);
	text-align: center;
	border-radius: 8px;
}
.unfer_btn_incenter {
	position: absolute;
	top: calc(1em / 4);
	right: 0;
	left: 0;
	margin: auto;
}
.line .unfer_btn {
	background: #017c9b;
}
.tel .unfer_btn {
	background: #9f16a4;
}
.sec01 {
	background: #eee;
}
.box01 {
	position: relative;
	height: 1150px;
}
.s101 {
	position: absolute;
	top: 0;
	left: 0;
}
.s102 {
	position: absolute;
	top: 200px;
	right: 0;
}
.s103 {
	position: absolute;
	top: 400px;
	left: 0;
}
.s104 {
	position: absolute;
	top: 600px;
	right: 0;
}
.s105 {
	position: absolute;
	top: 800px;
	left: 0;
}
.s106 {
	position: absolute;
	top: 1000px;
	right: 0;
}
.copy {
	text-align: center;
}
/* ---------------------- */
/* Navbar & Navmenu color */
/* ---------------------- */
:root {
	--background-navbar: rgba(55, 55, 55, 0.98);
}
.header {
	background: var(--background-navbar);
	position: fixed;
	width: 100%;
	height: 52px;
}
/* Nav items */
.menu {
	list-style: none;
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	margin-top: 52px;
	padding: 0 0 10px 0;
	clear: both;
	background: rgb(13 45 105);
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	transform: scale(1, 0);
	transform-origin: top;
}
/* Hamburger menu button */
.menu-btn:checked ~ .menu {
	transform: scale(1, 1);
	transform-origin: top;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
/* Hamburger menbu text */
.menu a {
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 2px;
	font-size: 16px;
	text-transform: capitalize;
	color: #ddd;
	opacity: 0;
	transition: 0.5s;
}
.menu li {
	border-top: 1px solid rgb(75, 75, 75);
	padding: 15px 0;
	margin: 0 54px;
	opacity: 0;
	transition: 0.5s;
}
.menu-btn:checked ~ .menu a, .menu-btn:checked ~ .menu li {
	opacity: 1;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}
.menu-btn {
	display: none;
}
.menu-icon {
	display: inline-block;
	position: relative;
	padding: 0 14px 8px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.hbt {
	position: absolute;
	font-size: 10px;
	text-align: center;
	right: 1em;
	width: 54px;
	height: 60px;
	padding: 20px 0;
	background: #002c6b;
	margin-top: 5px;
	border-radius: 3px;
}
.hbt div.menu_txt {
	text-align: center;
	/* position: absolute; */
	color: #fff;
}
.navicon {
	background: #fff;
	display: block;
	height: 3px;
	width: 26px;
	position: relative;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.navicon:before, .navicon:after {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	background: #fff;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.navicon:before {
	top: 9px;
}
.navicon:after {
	bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
}
.menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
	top: 0;
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	bottom: 0;
}
.menu-btn:checked ~ .menu-icon .navicon {
	background: rgba(0, 0, 0, 0);
	transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
/* Hamburger Menu Animation End */
/* Navbar Container */
.navtext-container {
	width: 100%;
	height: 70px;
	position: absolute;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(249, 247, 244, 1.00);
}
/* Navbar Text */
.navtext {
	position: absolute;
	text-transform: uppercase;
	color: rgba(13, 45, 105, 1.00);
	letter-spacing: 4px;
	font-size: 20px;
	left: 10px;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.03em;
	background: rgba(249, 247, 244, 1.00);
}
.navtext a:hover, .navtext a:active {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: rgba(13, 45, 105, 0.7);
}
/* Under Navbar Text */
ul.under-menu {
	counter-reset: list;
	list-style-type: none;
	position: relative;
	font: 18pt/1.6 'Mv Boli', 'arial narrow', sans-serif;
	padding: 1.2em;
	background: rgba(249, 247, 244, 1.00);
	-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset, 0 0 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset, 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset, 0 0 4px rgba(0, 0, 0, 0.2);
	width: 100%;
}
ul.under-menu:after {
	content: ""; /* 右下の文字 */
	position: absolute;
	bottom: 8px;
	right: 1.2em;
	font-size: 12px;
	color: #bbb;
}
ul.under-menu li {
	position: relative;
	padding: 7px 5px 7px 50px;
	margin: 7px 0 10px 0px;
	font-weight: normal;
	font-size: min(calc(100vw / 20), 18pt);
	border-bottom: dashed 1px #ccc;
	color: #333;
}
ul.under-menu li:first-child {
	margin-top: 0;
}
ul.under-menu li:last-child {
	margin-bottom: 20px;
}
ul.under-menu li:before {
	counter-increment: list;
	content: counter(list) ".";
	position: absolute;
	left: 15px;
	font-size: 1.2em;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}




/* ---------------------- */
/* anume.css */
/* ---------------------- */
/*==================================================
ふわっ
===================================*/
/* その場で */
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeInAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* 下から */
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* 上から */
.fadeDown {
	animation-name: fadeDownAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeDownAnime {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* 左から */
.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
/* 右から */
.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
	opacity: 0;
}
/*==================================================
パタッ
===================================*/
/* 下へ */
.flipDown {
	animation-name: flipDownAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes flipDownAnime {
	from {
		transform: perspective(2500px) rotateX(100deg);
		opacity: 0;
	}
	to {
		transform: perspective(2500px) rotateX(0);
		opacity: 1;
	}
}
/* 左へ */
.flipLeft {
	animation-name: flipLeftAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	perspective-origin: left center;
	opacity: 0;
}
@keyframes flipLeftAnime {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
	}
	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}
/* 左上へ */
.flipLeftTop {
	animation-name: flipLeftTopAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes flipLeftTopAnime {
	from {
		transform: translate(-20px, 80px) rotate(-15deg);
		opacity: 0;
	}
	to {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
}
/* 右へ */
.flipRight {
	animation-name: flipRightAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	perspective-origin: right center;
	opacity: 0;
}
@keyframes flipRightAnime {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
		opacity: 0;
	}
	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}
/* 右上へ */
.flipRightTop {
	animation-name: flipRightTopAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes flipRightTopAnime {
	from {
		transform: translate(-20px, 80px) rotate(25deg);
		opacity: 0;
	}
	to {
		transform: translate(0, 1) rotate(0deg);
		opacity: 1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipDownTrigger, .flipLeftTrigger, .flipLeftTopTrigger, .flipRightTrigger, .flipRightTopTrigger {
	opacity: 0;
}
/*==================================================
くるっ
===================================*/
/* X 軸（縦へ） */
.rotateX {
	animation-name: rotateXAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes rotateXAnime {
	from {
		transform: rotateX(0);
		opacity: 0;
	}
	to {
		transform: rotateX(-360deg);
		opacity: 1;
	}
}
/*　Y軸（横へ） */
.rotateY {
	animation-name: rotateYAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
	from {
		transform: rotateY(0);
		opacity: 0;
	}
	to {
		transform: rotateY(-360deg);
		opacity: 1;
	}
}
/* Z 軸（左へ） */
.rotateLeftZ {
	animation-name: rotateLeftZAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes rotateLeftZAnime {
	from {
		transform: rotateZ(0);
		opacity: 0;
	}
	to {
		transform: rotateZ(-360deg);
		opacity: 1;
	}
}
/*　Z 軸（右へ） */
.rotateRightZ {
	animation-name: rotateRightZAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes rotateRightZAnime {
	from {
		transform: rotateZ(0);
		opacity: 0;
	}
	to {
		transform: rotateZ(360deg);
		opacity: 1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.rotateXTrigger, .rotateYTrigger, .rotateLeftZTrigger, .rotateRightZTrigger {
	opacity: 0;
}
/*==================================================
ボンッ、ヒュッ
===================================*/
/* 拡大 */
.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes zoomInAnime {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
/* 縮小 */
.zoomOut {
	animation-name: zoomOutAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes zoomOutAnime {
	from {
		transform: scale(1.2);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger, .zoomOutTrigger {
	opacity: 0;
}
/*==================================================
じわっ
===================================*/
/* ぼかしから出現 */
.blur {
	animation-name: blurAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
	opacity: 0;
}
/*==================================================
にゅーん
===================================*/
/* 滑らかに変形して出現 */
.smooth {
	animation-name: smoothAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	transform-origin: left;
	opacity: 0;
}
@keyframes smoothAnime {
	from {
		transform: translate3d(0, 100%, 0) skewY(12deg);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0) skewY(0);
		opacity: 1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger {
	opacity: 0;
}
/*==================================================
スーッ（枠線が伸びて出現）
===================================*/
/*枠線が伸びて出現*/
.lineTrigger {
	position: relative; /* 枠線が書かれる基点*/
	opacity: 0;
}
.lineTrigger.lineanime {
	animation-name: lineAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes lineAnimeBase {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*上下線*/
.lineTrigger::before, .lineTrigger::after {
	position: absolute;
	content: "";
	width: 0;
	height: 1px;
	background: #333; /* 枠線の色*/
}
/*左右線*/
.line2::before, .line2::after {
	position: absolute;
	content: "";
	width: 1px;
	height: 0;
	background: #333; /* 枠線の色*/
}
/*上線*/
.lineTrigger::before {
	top: 0;
	left: 0;
}
.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}
/*右線*/
.line2::before {
	top: 0;
	right: 0;
}
.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}
/*下線*/
.lineTrigger::after {
	bottom: 0;
	right: 0;
}
.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}
/*左線*/
.line2::after {
	bottom: 0;
	left: 0;
}
.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}
@keyframes lineAnime {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
@keyframes lineAnime2 {
	0% {
		height: 0%;
	}
	100% {
		height: 100%;
	}
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
	animation: lineInnerAnime .5s linear 1.5s forwards; /*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0; /*初期値を透過0にする*/
}
@keyframes lineInnerAnime {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*==================================================
シャッ（背景色が伸びて出現）
===================================*/
/*背景色が伸びて出現（共通）*/
.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden; /*　はみ出た色要素を隠す　*/
	opacity: 0;
}
@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*中の要素*/
.bgappear {
	animation-name: bgextendAnimeSecond;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*左から*/
.bgLRextend::before {
	animation-name: bgLRextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}
	50% {
		transform-origin: left;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: right;
	}
	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}
/*右から*/
.bgRLextend::before {
	animation-name: bgRLextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime {
	0% {
		transform-origin: right;
		transform: scaleX(0);
	}
	50% {
		transform-origin: right;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: left;
	}
	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}
/*下から*/
.bgDUextend::before {
	animation-name: bgDUextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime {
	0% {
		transform-origin: bottom;
		transform: scaleY(0);
	}
	50% {
		transform-origin: bottom;
		transform: scaleY(1);
	}
	50.001% {
		transform-origin: top;
	}
	100% {
		transform-origin: top;
		transform: scaleY(0);
	}
}
/*上から*/
.bgUDextend::before {
	animation-name: bgUDextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666; /*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime {
	0% {
		transform-origin: top;
		transform: scaleY(0);
	}
	50% {
		transform-origin: top;
		transform: scaleY(1);
	}
	50.001% {
		transform-origin: bottom;
	}
	100% {
		transform-origin: bottom;
		transform: scaleY(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger, .bgUDextendTrigger, .bgDUextendTrigger, .bgRLextendTrigger, .bgLRextendTrigger {
	opacity: 0;
}
/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
	animation-iteration-count: 2; /*この数字を必要回数分に変更*/
}
.countinfinite {
	animation-iteration-count: infinite; /*無限ループ*/
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
	animation-delay: 0.5s;
}
.delay-time1 {
	animation-delay: 1s;
}
.delay-time15 {
	animation-delay: 1.5s;
}
.delay-time2 {
	animation-delay: 2s;
}
.delay-time25 {
	animation-delay: 2.5s;
}
/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
	animation-duration: 0.5s;
}
.change-time1 {
	animation-duration: 1s;
}
.change-time15 {
	animation-duration: 1.5s;
}
.change-time2 {
	animation-duration: 2s;
}
.change-time25 {
	animation-duration: 2.5s;
}
.vertical {
	-webkit-animation: vertical 1s linear infinite;
	animation: vertical 1s linear infinite;
}
@keyframes vertical {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes rumble {
	0% {
		transform: rotate(0deg) translate(0, 0);
	}
	25% {
		transform: rotate(0.4deg) translate(1px, 1px);
	}
	50% {
		transform: rotate(0deg) translate(0, 0);
	}
	75% {
		transform: rotate(-0.4deg) translate(1px, 1px);
	}
	100% {
		transform: rotate(0deg) translate(0, 0);
	}
}