@charset "UTF-8";
/* CSS Document */

body, html {
	font-size: 6.25%;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
	scroll-behavior: smooth;
}
body {background: #fff url('../img/bg00.png') repeat bottom right/80px 80px;}

div.box-inner {width: 96%; max-width: 1260px; margin: 0 auto;}
a {text-decoration: none; transition: 0.3s}
a:hover {opacity: 0.5}
p {line-height: 1.6; font-size: 15rem;}
img {max-width: 100%}
hr {display: block; border-bottom: 1px solid #ccc; margin: 60px auto}
sup {font-size: 80%; vertical-align: super}

.pc_show{display: inline}
.sp_show{display: none}
@media screen and (max-width: 1023px) {
	div.box-inner {width: 90%;}
	p {font-size: 14rem;}
	.pc_show{display: none}
	.sp_show{display: inline}
}

/* Header NAVI */
.header {position: fixed; background: rgba(255,255,255,0); width: 100%; display: flex; top:0; left: 0; justify-content: space-between; 
	padding: 0 10rem; box-sizing: border-box; height: 70px; z-index: 999999; transition: 0.5s}
/*.header:hover {background: rgba(255,255,255,1);}*/

.header .logo a {font-size: 13rem; color: #333; display: flex; align-items: center; height: 40px; margin-top: 15px; padding: 0 10px; }
.header .logo a img {display: block; height: 80%; width: auto;}

.nav ul { list-style: none; display: flex; gap: 10rem; height: 100%}
.nav ul li { display: block; height: 100%}
.nav ul li a {background: rgba(255,255,255,0.5); color: #333; display: flex; align-items: center; height: 45px; padding: 5px 0 0 0; border-width: 0 1px 1px 1px; border-style: solid; border-color: #111; position: relative}
.nav ul li a:hover { background-color: #b0d986;}
.nav ul li a.current { background-color: #b0d986;}
.nav ul li a img {display: block; height: 100%; width: auto;}
.nav ul li.link-contact a { color: #fff; background-color: #017625; border-radius: 8px}
.nav ul li.link-contact a:hover { color: #017625; background-color: #ddd}

.nav ul li:nth-child(3) a::after {content: ''; width: 100%; height: 12px; position: absolute; top: 3px; background: url('../img/head_new.png') no-repeat center center/auto 100%;  }
/*
.nav ul li:nth-child(3) a { pointer-events: none; background-color: #999; opacity: 0.5}
*/

@media screen and (max-width: 1023px) {
    .header {height: 40px; padding: 0; }
	.header .logo a {height: 40px; padding: 0 5px; margin: 0}
	.header .logo a img {height: auto;}
	
	.nav ul { gap: 0;}
	.nav ul li a {height: auto; width: 16vw; padding: 7px 0 0 0; border-width: 0 0 1px 1px; }
	.nav ul li:nth-child(1) a::after,.nav ul li:nth-child(4) a::after  {height: 10px;}
}

/* Main */
.hero { position: relative; text-align: center; padding-top: 80vh}

.main01 { position: absolute; top:0; left: 0; width: 100%; height: 80vh; background: url('../img/main_img.png') no-repeat center center/auto 100%; overflow: hidden;}
.main01 img { position: absolute; top: 0; right: 60vw; max-width: 40vw; width: auto; height: auto; min-height: 100%}
.main02 { position: absolute; top:0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.main02 img { position: absolute; bottom: 0; left: 25vw; width: auto; max-width: 75vw; height: auto; min-height: 100%}
.main03 { position: absolute; top:0; left: 0; width: 100%; height: 80vh;}
.main03 img { position: absolute; bottom: 3vh; left: calc(50% - 23vw); width: 46vw; height: auto;}

.main_about { position: relative; background-color: #019baacc; padding: 80px 0; color: #fff; overflow-x: hidden;}
.main_about .box-inner{ }
.main_about .box-inner h2{ display: block; margin: 0 auto 20px auto; }
.main_about .box-inner h2 img{ display: block; margin: 0 auto 35px auto; width: 42%; min-width: 420px}
.main_about .box-inner p{ display: block; margin: 0 auto 30px auto; font-size: 16rem; letter-spacing: 2px; line-height: 2}

.main_about .box-inner .about_box {border: 2px solid #fff; padding: 40px 50px 10px 50px; max-width: 720px; box-sizing: border-box; margin: 20px auto 60px auto;}
.main_about .box-inner .about_box h2 img { margin: 0 auto 5px auto; width: 28%; min-width: 280px}
.main_about .box-inner .kaisaigaiyou { box-sizing: border-box; margin: 20px auto;}
.main_about .box-inner .kaisaigaiyou h3 { display: block; margin: 0 auto 40px auto; }
.main_about .box-inner .kaisaigaiyou h3 img { display: block; margin: 0 auto 15px auto; width: 50%;}
.main_about .box-inner .kaisaigaiyou h4 { display: block; margin: 0 auto 40px auto; }
.main_about .box-inner .kaisaigaiyou h4 img { display: block; margin: 0 auto 15px auto; width: auto; max-width: 80%; height: 25px}

a.btn_pdflink { display: inline-block; text-align: center; border-bottom:1px solid #fff; color: #fff; font-size: 16rem; font-weight: bold; letter-spacing: 1px; padding: 3px 5px; margin: 0 auto; box-sizing: border-box; vertical-align: middle;}
a.btn_pdflink::before { content: 'PDF'; display: inline-block; text-align: center; border:1px solid rgba(255,255,255,0.80); color: #fff; font-size: 11rem; font-weight: nomal; letter-spacing: 0; padding: 4px 5px; margin: 0 10px 0 0; box-sizing: border-box; line-height: 1;}

a.btn_omoushikomi {display: block; background-color: #019baa; border:2px solid #fff; color: #fff; font-size: 18rem; font-weight: bold; letter-spacing: 1px; width: 360px; max-width: 90%; padding: 10px 5px; margin: 0 auto; box-sizing: border-box; box-shadow: 6px 6px 0 #fff; border-radius: 0 0 10px 0}
a.btn_omoushikomi:hover { background-color: #fff; color:#019baa; box-shadow: 0 0 10px #fff;  opacity: 1}

@media screen and (max-width: 1023px) {
	.hero { padding-top: 100vw}
	.main01 { height: 100vw}
	.main01 img { min-height: 0}
	.main02 img { bottom: auto; top: 0; left: 60vw; right: auto; width: auto; max-width: auto; height: 100vw; min-height: auto;}
	.main03 { height: 100vw}
	.main03 img { bottom: 3vh; left: 5%; width: 90%; height: auto;}
	
	.main_about .box-inner h2 img{ width: 84%; min-width: auto}
	.main_about .box-inner p{ font-size: 14rem; letter-spacing:0; text-align: left}
	.main_about .box-inner .about_box h2 img { width: 90%; min-width: 220px}
	.main_about .box-inner .about_box {padding: 40px 20px 0 20px; }
	.main_about .box-inner .kaisaigaiyou { margin: 60px auto;}
	.main_about .box-inner .kaisaigaiyou h3 { margin: 0 auto 40px auto; }
	.main_about .box-inner .kaisaigaiyou h3 img { width: 100%;}
	.main_about .box-inner .kaisaigaiyou h4 img { height: auto}
}

/* Features */
.features { position: relative;background: url("../img/bg03.png") no-repeat left top / 25vw 30vw;}
.features_wrap { background: url("../img/bg04.png") no-repeat right bottom / 70vw 100%; padding-bottom: 8vw}
.features h3 { display: block; text-align: center; padding: 80px 0; margin: 0 auto}
.features h3 img { max-width: 460px;}

@media screen and (max-width: 1023px) {
	.features { background: url("../img/bg03.png") no-repeat left top / 50vw 60vw;}
	.features h3 { padding: 100px 0 40px 0;}
	.features h3 img { max-width: 100%;}
	.features_wrap { background: url("../img/bg04.png") no-repeat right -25vw bottom / 100vw 100vw;}
}

.schedule ul {display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0; padding: 0;}
.schedule ul li { position: relative; width: 31%; border-width: 2px 2px 0 2px; border-style: solid; border-color: #000; box-sizing: border-box; }
.schedule ul li a { display: block; width: 100%; height: 52px; padding: 14px 0; box-sizing: border-box; background-color: #ccc;}
.schedule ul li a::before { content: ''; display: block; width: 90%; height: 90%; box-sizing: border-box; margin: 0 auto;}
.schedule ul li:nth-child(1) a::before { background: url("../img/text01_1.png") no-repeat center center / contain;}
.schedule ul li:nth-child(2) a::before { background: url("../img/text01_2.png") no-repeat center center / contain;}
.schedule ul li:nth-child(3) a::before { background: url("../img/text01_3.png") no-repeat center center / contain;}
.schedule ul li a:hover { background-color: #00b2d0}

.schedule ul li.sche_on a {background-color: #00b2d0; pointer-events: none}
.schedule ul li.sche_on:nth-child(1) a::before { background:url("../img/text01_1w.png") no-repeat center center / contain;}
.schedule ul li.sche_on:nth-child(2) a::before { background:url("../img/text01_2w.png") no-repeat center center / contain;}
.schedule ul li.sche_on:nth-child(3) a::before { background:url("../img/text01_3w.png") no-repeat center center / contain;}

.box_sche_inner { border: 2px solid #000; box-sizing: border-box; background-color: rgba(200,200,200,0.6); padding: 20px}
.box_sche { box-sizing: border-box; padding: 60px 50px; background-color: #fff; transition: 0.5s;}
.box_sche h4 { display: block;}
.box_sche h4 img { display: inline-block; max-height: 36px; height: auto; width: auto; margin-bottom: 20px}
.box_sche p { color: #555; margin-bottom: 10px}

.box_sche article {display: flex; justify-content: space-between; flex-wrap: wrap}
.box_sche article div{ width: 47%}
.box_sche article h5 { color: #333; font-size: 22rem; line-height: 1; font-family: "Montserrat", sans-serif; font-weight: normal; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 5px 0; margin-top: 20px}
.box_sche article h5 strong { display: inline-block; border-left: 1px solid #555; font-size: 36rem; vertical-align: baseline; font-weight: normal; padding-left: 15px; margin-left: 15px; letter-spacing: 1px;}
.box_sche article h5 strong:nth-child(2) { border-left:none; padding-left: 0; margin-left: 5px;}
.box_sche article h6 { color: #333; font-size: 16rem; line-height: 1.2; border-bottom: 2px solid #000; padding: 10px 0; margin-bottom: 20px; font-weight: normal;}
.box_sche article span { color: #333; font-size: 12rem; color: #555}
.box_sche article span img { display: block; margin-bottom: 4px}
/* タブ切り変え */
.box_sche { display: none; opacity: 0; transition: 0.5s; transform-origin: top; transform: scaleX(0)}
.box_sche.sche_show { display: block; opacity: 1; transform: scaleX(1) }
/* リンク */
aside.link-repo {text-align: center}
aside.link-repo a {display: block; border: 2px solid #00b2d0; margin: 40px auto 0 auto; max-width: 300px; color: #008fa8; font-size: 15rem; padding: 8px; box-sizing: border-box;}

@media screen and (max-width: 1023px) {
	.schedule ul {display: none;}
	.box_sche_inner { padding: 10px; }
	.box_sche { padding: 30px 20px 10px 20px; display: block; opacity: 1; transform: scaleX(1)}
	.box_sche h4 {background-color: #00b3cf; border: 2px solid #000; margin-bottom: 20px}
	.box_sche h4 img { display: none}
	.box_sche p { }
	.box_sche article {display: block;}
	.box_sche article div{ width: 100%}
	.box_sche article h5 { font-size: 20rem;}
	.box_sche article h5 strong { font-size: 28rem;}
	.box_sche article h6 { font-size: 15rem;}
	.box_sche article span { display: block; margin-bottom:40px}
	
	.box_sche:nth-child(1) {}
	.box_sche:nth-child(1) h4::after {content: ''; display: block; width:100%; height: 14vw; background: url('../img/text01_1w.png') no-repeat center center/ 90% auto; }
	.box_sche:nth-child(2) h4::after {content: ''; display: block; width:100%; height: 14vw; background: url('../img/text01_2w.png') no-repeat center center/ 90% auto; }
	.box_sche:nth-child(3) h4::after {content: ''; display: block; width:100%; height: 14vw; background: url('../img/text01_3w.png') no-repeat center center/ 90% auto; }
}

.kick_photo {border: 2px solid #000; box-sizing: border-box; background-color: rgba(200,200,200,0.6); padding: 20px; margin-bottom: 40px}
.kick_photo_inner {box-sizing: border-box; padding: 60px 50px; background-color: #fff; position: relative; overflow: hidden; }
.kick_photo h5 { position: absolute; top: 0; left: 0; background-color: #555; color: #fff; font-size: 15rem; padding: 10px 20px; box-sizing: border-box;}
.kick_photo h4 { display: block; margin: 20px auto 20px auto; text-align: center;}
.kick_photo h4 img { width: auto; max-width: 80%; height: auto;}
.kick_photo p { font-size: 15rem; color: #555; margin-bottom: 10px}
.photo_main { margin-bottom: 5px}
/* 写真のループスライド */
ul.photo_list {display: flex; flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; animation: scroll-left 20s linear infinite; padding: 0; margin: 0; list-style: none;}
ul.photo_list li {flex: 0 0 auto; width: 33%; margin-right: 1%}
ul.photo_list li img { display: block; width: 100%; height: auto; }

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-205%); }
}

.kick ul {display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0; padding: 0;}
.kick ul li { position: relative; width: 31%; border-width: 2px 2px 0 2px; border-style: solid; border-color: #000; box-sizing: border-box; }
.kick ul li a { display: block; width: 100%; height: 52px; padding: 14px 0; box-sizing: border-box; background-color: #ccc;}
.kick ul li a::before { content: ''; display: block; width: 90%; height: 90%; box-sizing: border-box; margin: 0 auto;}
.kick ul li:nth-child(1) a::before { background: url("../img/text01_1.png") no-repeat center center / contain;}
.kick ul li:nth-child(2) a::before { background: url("../img/text01_2.png") no-repeat center center / contain;}
.kick ul li:nth-child(3) a::before { background: url("../img/text01_3.png") no-repeat center center / contain;}
.kick ul li a:hover { background-color: #00b2d0}

.kick ul li.kick_on a {background-color: #00b2d0; pointer-events: none}
.kick ul li.kick_on:nth-child(1) a::before { background:url("../img/text01_1w.png") no-repeat center center / contain;}
.kick ul li.kick_on:nth-child(2) a::before { background:url("../img/text01_2w.png") no-repeat center center / contain;}
.kick ul li.kick_on:nth-child(3) a::before { background:url("../img/text01_3w.png") no-repeat center center / contain;}

.box_kick_inner { border: 2px solid #000; box-sizing: border-box; background-color: rgba(200,200,200,0.6); padding: 20px}
.box_kick { box-sizing: border-box; padding: 60px 50px; background-color: #fff; transition: 0.5s;}

.box_kick h4 { display: block; font-size: 22rem; margin-bottom: 20px;}
.box_kick article {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap}
.box_kick article:nth-child(2) {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #333}
.box_kick article img{ display: block; width: auto; max-width: 20%; height: auto;}
.box_kick article div{ width: 75%}
.box_kick article h5 { color: #333; font-size: 18rem; margin-top: 10px}
.box_kick article h6 { color: #333; font-size: 22rem; line-height: 1.5; margin-bottom: 20px}
.box_kick article h6 span { font-size: 14rem; line-height: 1.2; display: inline-block}
.box_kick article p { color: #555; margin-bottom: 10px}
/* タブ切り変え */
.box_kick { display: none; opacity: 0; transition: 0.5s; transform-origin: top; transform: scaleX(0)}
.box_kick.kick_show { display: block; opacity: 1; transform: scaleX(1) }



@media screen and (max-width: 1023px) {
	.kick_photo_inner {padding: 20px 20px;}
	.kick_photo h5 { position: static; padding: 10px 10px;}
	.kick_photo h4 img { max-width: 100%;}
	/* 写真のループスライドOFF */
	ul.photo_list {display: flex; flex-wrap: wrap; justify-content: space-between; animation: none;}
	ul.photo_list li {flex: none; width: 49%; margin: 0 auto 2px auto}
	ul.photo_list li:nth-child(n + 7) {display: none}
	.kick ul {display: none;}
	.box_kick_inner { padding: 10px; }
	.box_kick { padding: 30px 20px 10px 20px; display: block; opacity: 1; transform: scaleX(1)}
	.box_kick h4 {font-size: 18rem}
	.box_kick p { }
	.box_kick article {display: block; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #333}
	.box_kick article:nth-child(2) {margin-bottom:0; }
	.box_kick article img{ max-width: 50%; margin: 20px auto}
	.box_kick article div{ width: 100%}
	.box_kick article h5 { font-size: 14rem; line-height: 1.2;}
	.box_kick article h6 { font-size: 18rem; line-height: 1.8}
	
	#box_kick02 h4, #box_kick03 h4 {display: none}
}

.read {display: block; margin: 80px auto 40px auto; position: relative;}
.read img {display: block; margin: 0 auto; max-width: 560px; width: 90%; height: auto;}
.sub_read { font-size: 14rem; color: #333; display: block; text-align: center; line-height: 1.8; margin: 40px auto; max-width: 90%}


@media screen and (max-width: 1023px) {
}

/* PAGE */
.page_content { background: url("../img/bg03.png") no-repeat left top / 25vw 30vw;}
.page_wrap { padding-bottom: 8vw}
.page_content h3 { display: block; text-align: center; padding: 120px 0 40px 0; margin: 0 auto}
.page_content h3 img { height: auto; max-height: 42px; max-width: 620px}
.page_content p.page-read { margin: 0 auto 80px auto; text-align: center; font-size: 18rem; line-height: 2}

.message_content {display: flex; justify-content: space-between; flex-wrap: wrap;}
.message_content div:nth-child(1) {width: 25%}
.message_content div:nth-child(1) img { display: block; max-width: 100%; height: auto; margin: 0 auto 20px auto}
.message_content div:nth-child(1) a { display: block; }
.message_content div:nth-child(1) a img { display: block; max-width: 50%; height: auto; margin: 0 auto}
.message_content div:nth-child(2) {width: 70%;}
.message_content div:nth-child(2) p { line-height: 2; margin-bottom: 20px}

@media screen and (max-width: 1023px) {
	.page_content h3 img { max-width: 90%}
	.page_content p.page-read { font-size: 15rem;}
	
	.message_content {display: block;}
	.message_content div:nth-child(1) {width: 100%; margin-bottom: 40px}
	.message_content div:nth-child(1) img { max-width: 70%;}
	.message_content div:nth-child(2) {width: 100%;}
}

.page_2clum { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 60px}
.page_2clum_left { width: 20%}
.page_2clum_left h5 { font-size: 42rem; font-family: "Montserrat", sans-serif; display: block; border-bottom: 3px solid #333; line-height: 1.2; margin-bottom: 20px}
.page_2clum_left h5 strong { font-size: 15rem; color: #fff; background-color: #333; display: block; padding: 5px; }
.page_2clum_left h6 { font-size: 15rem; line-height: 1.4; margin-bottom: 40px}
.page_2clum_left h6 a { text-decoration: underline}
.page_2clum_right { width: 76%; background-color: #fff; padding: 40px; box-sizing: border-box; overflow-x: hidden;}
.page_2clum_right p { margin-bottom: 20px}

.page_prof {display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 40px 0 20px 0; padding: 40px 0 0 0; border-top: 2px solid #ccc;}
.page_prof img {display: block; width: 20%; height: 100%; margin: 0 5%}
.page_prof h4 {display: block; width: 70%; font-size: 15rem; font-weight: normal; line-height: 1.4; padding: 40px 0;}
.page_prof h4 strong {display: block; font-size: 22rem; font-weight: bold; margin-bottom: 10px}
.page_photo_main { margin-bottom: 5px}
/* 写真のループスライド */
ul.page_photo_list {display: flex; flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; animation: scroll-left-page 40s linear infinite; padding: 0; margin: 0; list-style: none;}
ul.page_photo_list li {flex: 0 0 auto; width: 33%; margin-right: 1%}
ul.page_photo_list li img { display: block; width: 100%; height: auto; }

@keyframes scroll-left-page {
  0% { transform: translateX(0); }
  100% { transform: translateX(-272%); }
}

p.yokoku { display: block; color: #6b9661; text-align: center; margin: 40px auto; border: 2px solid #6b9661; background-color: #fff; box-sizing: border-box; padding: 10px 20px; font-weight: bold; max-width: 520px;}

@media screen and (max-width: 1023px) {
	.page_2clum { display: block; }
	.page_2clum_left { width: 100%}
	.page_2clum_right { width: 100%; padding: 20px; }
	
	.page_prof {display: block; margin: 40px 0 20px 0; padding: 40px 0 0 0; }
	.page_prof img {width: 40%; margin: 0 auto}
	.page_prof h4 {width: 100%; font-size: 13rem; padding: 10px 0;}
	.page_prof h4 strong {font-size: 18rem; }
}

.footer {background: #6b9561; padding: 40px 0; color: #FFFFFF; position: relative;}
.footer .box-inner {display: flex; justify-content: space-between; flex-wrap: wrap}
.footer .box-inner div {}
.footer .box-inner div h6 { margin-bottom: 20px}
.footer .box-inner div h6 img { width: auto; max-width: 90%; height: auto; max-height: 36px;}
.footer .box-inner div p { margin-bottom: 10px; font-size: 14rem}
.footer .box-inner div p img { display: block; width: auto; max-width: 90%; height: auto; max-height: 28px;}
.footer .box-inner div:nth-child(2) { text-align: right;}
.footer .box-inner div:nth-child(2) a { display: inline-block; color: #fff; font-size: 12rem; margin-bottom: 10px}
.footer div a.footbana img { display: block; width: auto; max-width: 90%; height: auto; max-height: 65px; margin: 0 0 4px auto}
.footer div a.snsicon img { display: block; width: auto; max-width: 90%; height: auto; max-height: 40px; margin: 0 0 4px auto}
.footer .box-inner div p.copy {font-size: 11rem; }

@media screen and (max-width: 1023px) {
	.footer .box-inner {display: block;}
	.footer .box-inner div h6 img { display: block; max-width: 80%; margin: 0 auto;}
	.footer .box-inner div p { text-align: left; font-size: 12rem}
	.footer .box-inner div p img { display: block; max-width: 80%; margin: 0 auto 10px auto;}
	.footer .box-inner div:nth-child(2) { text-align: center;}
	.footer div a.footbana img { max-width: 100%;}
	.footer .box-inner div p.copy {text-align: center}
}


/*動物イラスト*/

.main01::after {content: ''; position: absolute; display: block; top:10vh; right: 25vw; width: 90px; height: 104px; background: url('../img/animal01.png') no-repeat center center/contain; }
.main02::after {content: ''; position: absolute; display: block; top:70vh; left: 16vw; width: 67px; height: 54px; background: url('../img/animal02.png') no-repeat center center/contain; }
.main_about::after {content: ''; position: absolute; display: block; top:15vh; left: 13vw; width: 162px; height: 126px; background: url('../img/animal03.png') no-repeat center center/contain; }
.features_ani::before {content: ''; position: absolute; display: block; top:-10vh; right: 2vw; width: 320px; height: 160px; background: url('../img/animal04.png') no-repeat center center/contain; }
.features_ani::after {content: ''; position: absolute; display: block; top:5vh; left: 15vw; width: 96px; height: 105px; background: url('../img/animal05.png') no-repeat center center/contain; }
.read::after {content: ''; position: absolute; display: block; top:1vh; left: 10vw; width: 97px; height: 80px; background: url('../img/animal06.png') no-repeat center center/contain; }
.footer::after {content: ''; position: absolute; display: block; top:-100px; right: 10vw; width: 136px; height: 123px; background: url('../img/animal07.png') no-repeat center center/contain; }
/*first view*/
.main01::after {opacity: 0; transform: translateX(20px); animation: fadeanime 1s ease-out 1s forwards;  }
.main02::after {opacity: 0; transform: translateX(-20px); animation: fadeanime 1s ease-out 2s forwards;  }
@keyframes fadeanime {
  100% {opacity: 1; transform: translateX(0);
  }
}

/*scroll view*/
.fade-in{}
.features_ani::before, .footer::after {opacity: 0; transform: translateX(20px); transition: 1s ease-out}
.main_about::after, .features_ani::after, .read::after {opacity: 0; transform: translateX(-20px); transition: 1s ease-out}
.features.visible::before, .features_ani.visible::after, .read.visible::after, .main_about.visible::after, .footer.visible::after {opacity: 1;transform: translateX(0);}

@media screen and (max-width: 1023px) {
	.main01::after {top:10vw; right: -5vw;}
	.main02::after {top:65vw; left: -2vw;}
	.main_about::after {top:1vh; left: -2vw; width: 81px; height: 63px; }
	.features_ani::before {top:-10vh; right: 20px; width: 160px; height: 80px;}
	.features_ani::after {top:1vh; left: 20px; width: 72px; height: 80px;}
	.read::after {top:-10vh; left: 20px; width: 48px; height: 40px;}
	.footer::after {top:-70px; right: 20px; width: 102px; height: 93px;}
}