@charset "UTF-8";

/* =======================================

	CommonElements

======================================= */
* {
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	-webkit-text-size-adjust:100%;
}
body{
font-size:14px;
line-height:1.4em;
font-family:"Zen Kaku Gothic New", sans-serif;
font-weight:400;
color:#000;
text-align:justify;
background:#FFF;
margin:0;
padding:0;
animation:fadeIn 3s ease 0s 1 normal;
-webkit-animation:fadeIn 3s ease 0s 1 normal;
}
.zen-kaku-gothic-new-light{
font-family:"Zen Kaku Gothic New", sans-serif;
font-weight:300;
font-style:normal;
}
.zen-kaku-gothic-new-regular{
font-family:"Zen Kaku Gothic New", sans-serif;
font-weight:400;
font-style:normal;
}
.zen-kaku-gothic-new-medium{
font-family:"Zen Kaku Gothic New", sans-serif;
font-weight:500;
font-style: normal;
}
.zen-kaku-gothic-new-bold{
font-family:"Zen Kaku Gothic New", sans-serif;
font-weight:700;
font-style:normal;
}
.zen-kaku-gothic-new-black{
font-family:"Zen Kaku Gothic New", sans-serif;
font-weight:900;
font-style:normal;
}
.figtree-<uniquifier>{
font-family:"Figtree", sans-serif;
font-optical-sizing:auto;
font-weight:<weight>;
font-style:normal;
}
.zen-old-mincho-regular{
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
}
.zen-old-mincho-medium{
font-family: "Zen Old Mincho", serif;
font-weight: 500;
font-style: normal;
}
.zen-old-mincho-semibold{
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-style: normal;
}
.zen-old-mincho-bold{
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
}
@keyframes fadeIn{
0% {opacity:0}
100% {opacity:1}
}
@-webkit-keyframes fadeIn{
0% {opacity:0}
100% {opacity:1}
}
img{
width:100%;
height:auto
}
.clearfix{
display:block;
}
.clear{
clear:both;
}
.clear hr{
display:none;
}
ul,li{
list-style:none;
}
ol,li{
list-style:none;
}
#container{
width:100%;
text-align:center;
}
#wrapper{
width:100%;
text-align:left;
background-color:#FFF;
color:#000;
position:relative;
z-index:120;
}
::selection{
color:#000;
background-color:#F8B500;
}







/*==================================================================

NAV

==================================================================*/
@media screen and (min-width:961px) {
.hamburger-morph{
position:fixed;
top:20px;
right:20px;
z-index:1000;
width:100px;
height:100px;
padding:0;
border:none;
background:transparent;
cursor:pointer;
}
.hamburger-morph__icon{
width:100%;
height:100%;
}
.hamburger-morph__line{
fill:none;
stroke:#000;
stroke-width:5;
transition:stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
           stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-morph__line:nth-child(1){
stroke-dasharray:60 207;
}
.hamburger-morph__line:nth-child(2){
stroke-dasharray:60 60;
}
.hamburger-morph__line:nth-child(3){
stroke-dasharray:60 207;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(1){
stroke-dasharray:90 207;
stroke-dashoffset:-134;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(2){
stroke-dasharray:1 60;
stroke-dashoffset:-30;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(3){
stroke-dasharray:90 207;
stroke-dashoffset:-134;
}
.nav-morph{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#F8B500;
clip-path:circle(0% at calc(100% - 44px) 44px);
transition:clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
z-index:900;
}
.nav-morph.active{
clip-path:circle(150% at calc(100% - 44px) 44px);
}
.nav-morph__wrapper{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
}
.nav-morph__list{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
.nav-morph__item{
opacity:0;
transform:translateY(30px);
transition:opacity 0.4s ease, transform 0.4s ease;
}
.nav-morph.active .nav-morph__item{
opacity:1;
transform:translateY(0);
}
.nav-morph.active .nav-morph__item:nth-child(1){
transition-delay:0.3s;
}
.nav-morph.active .nav-morph__item:nth-child(2){
transition-delay:0.4s;
}
.nav-morph.active .nav-morph__item:nth-child(3){
transition-delay:0.5s;
}
.nav-morph.active .nav-morph__item:nth-child(4){
transition-delay:0.6s;
}
.nav-morph.active .nav-morph__item:nth-child(5){
transition-delay:0.7s;
}
.nav-morph.active .nav-morph__item:nth-child(6){
transition-delay:0.9s;
}
.nav-morph__wrapper ul li{
width:60%;
max-width:1000px;
margin:3% auto;
}
.nav-morph__wrapper ol{
margin:50px 25% 0;
}
.nav-morph__wrapper ol li{
width:30%;
height:auto;
padding:15px;
margin:10px;
display:table-cell;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.hamburger-morph{
position:fixed;
top:10px;
right:10px;
z-index:1000;
width:80px;
height:80px;
padding:0;
border:none;
background:transparent;
cursor:pointer;
}
.hamburger-morph__icon{
width:100%;
height:100%;
}
.hamburger-morph__line{
fill:none;
stroke:#000;
stroke-width:5;
transition:stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
           stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-morph__line:nth-child(1){
stroke-dasharray:60 207;
}
.hamburger-morph__line:nth-child(2){
stroke-dasharray:60 60;
}
.hamburger-morph__line:nth-child(3){
stroke-dasharray:60 207;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(1){
stroke-dasharray:90 207;
stroke-dashoffset:-134;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(2){
stroke-dasharray:1 60;
stroke-dashoffset:-30;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(3){
stroke-dasharray:90 207;
stroke-dashoffset:-134;
}
.nav-morph{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#F8B500;
clip-path:circle(0% at calc(100% - 44px) 44px);
transition:clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
z-index:900;
}
.nav-morph.active{
clip-path:circle(150% at calc(100% - 44px) 44px);
}
.nav-morph__wrapper{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
}
.nav-morph__list{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
.nav-morph__item{
opacity:0;
transform:translateY(30px);
transition:opacity 0.4s ease, transform 0.4s ease;
}
.nav-morph.active .nav-morph__item{
opacity:1;
transform:translateY(0);
}
.nav-morph.active .nav-morph__item:nth-child(1){
transition-delay:0.3s;
}
.nav-morph.active .nav-morph__item:nth-child(2){
transition-delay:0.4s;
}
.nav-morph.active .nav-morph__item:nth-child(3){
transition-delay:0.5s;
}
.nav-morph.active .nav-morph__item:nth-child(4){
transition-delay:0.6s;
}
.nav-morph.active .nav-morph__item:nth-child(5){
transition-delay:0.7s;
}
.nav-morph.active .nav-morph__item:nth-child(6){
transition-delay:0.9s;
}
.nav-morph__wrapper ul li{
width:60%;
max-width:1000px;
margin:3% auto;
}
.nav-morph__wrapper ol{
margin:50px 10% 0;
}
.nav-morph__wrapper ol li{
width:30%;
height:auto;
padding:15px;
margin:10px;
display:table-cell;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.hamburger-morph{
position:fixed;
top:5px;
right:10px;
z-index:1000;
width:60px;
height:60px;
padding:0;
border:none;
background:transparent;
cursor:pointer;
}
.hamburger-morph__icon{
width:100%;
height:100%;
}
.hamburger-morph__line{
fill:none;
stroke:#000;
stroke-width:5;
transition:stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
           stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-morph__line:nth-child(1){
stroke-dasharray:60 207;
}
.hamburger-morph__line:nth-child(2){
stroke-dasharray:60 60;
}
.hamburger-morph__line:nth-child(3){
stroke-dasharray:60 207;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(1){
stroke-dasharray:90 207;
stroke-dashoffset:-134;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(2){
stroke-dasharray:1 60;
stroke-dashoffset:-30;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(3){
stroke-dasharray:90 207;
stroke-dashoffset:-134;
}
.nav-morph{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#F8B500;
clip-path:circle(0% at calc(100% - 44px) 44px);
transition:clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
z-index:900;
}
.nav-morph.active{
clip-path:circle(150% at calc(100% - 44px) 44px);
}
.nav-morph__wrapper{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
}
.nav-morph__list{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
.nav-morph__item{
opacity:0;
transform:translateY(30px);
transition:opacity 0.4s ease, transform 0.4s ease;
}
.nav-morph.active .nav-morph__item{
opacity:1;
transform:translateY(0);
}
.nav-morph.active .nav-morph__item:nth-child(1){
transition-delay:0.3s;
}
.nav-morph.active .nav-morph__item:nth-child(2){
transition-delay:0.4s;
}
.nav-morph.active .nav-morph__item:nth-child(3){
transition-delay:0.5s;
}
.nav-morph.active .nav-morph__item:nth-child(4){
transition-delay:0.6s;
}
.nav-morph.active .nav-morph__item:nth-child(5){
transition-delay:0.7s;
}
.nav-morph.active .nav-morph__item:nth-child(6){
transition-delay:0.9s;
}
.nav-morph__wrapper ul li{
width:90%;
max-width:1000px;
margin:5% auto;
}
.nav-morph__wrapper ol{
margin:35px 10% 0;
}
.nav-morph__wrapper ol li{
width:30%;
height:auto;
padding:15px;
margin:10px;
display:table-cell;
}
}









/*==================================================================

PC

==================================================================*/
@media screen and (min-width:961px) {
.smp{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
main div.naviFrame{
}
main div.contentsFrame{
background:#FFF;
width:700px;
margin:0 auto;
}
main div.socialFrame{
}
main div.scroll{
width:50px;
height:auto;
position:fixed;
right:1%;
bottom:10%;
z-index:500;
}
@keyframes fade{
0%{opacity:0}
50%{opacity:0}
100%{opacity:1}
}
.updown{
animation-name:UpDown;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-direction:alternate;
}
@keyframes UpDown{
0%{
transform:translateY(0);
}
100%{
transform:translateY(35px);
}
}
.btn{
background:#F8B500;
border:2px solid #F8B500;
border-radius: 60px;
color:#FFF;
display:block;
font-size:16px;
font-weight:500;
max-width:300px;
padding:1em 2em;
text-align:center;
margin:0 auto 80px;
}
.btn.back{
background:#FFF;
color:#F8B500;
overflow:hidden;
position:relative;
transition-duration:.4s;
z-index:2;
}
.btn.back a{
text-decoration:none;
}
.btn.back::after{
background:#F8B500;
border-radius:50%;
content:"";
display:block;
margin:auto;
opacity:0;
pointer-events:none;
position:absolute;
top:50%;
left:0;
right:0;
width:100%;
padding-top:100%;
height:0;
z-index:-1;
transform:translateY(-50%) scale(0.1);
transition:opacity .5s, transform 0s;
transition-delay:0s, .4s;
}
.btn.back:hover{
color:#FFF;
}
.btn.back:hover::after{
opacity:1;
transform:translateY(-50%) scale(1.1);
transition-delay:0s;
transition:opacity .8s, transform .6s ease-in-out;
}
}










/*==================================================================

TABLET

==================================================================*/
@media only screen and (min-width:768px) and (max-width:960px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
p{
font-size:13px;
line-height:1.5em;
text-align:justify;
}
main div.naviFrame{
width:15%;
margin:0 auto 0 0;
}
main div.contentsFrame{
background:#FFF;
width:80%;
margin:0 auto;
}
main div.socialFrame{
width:15%;
margin:0 0 0 auto;
}
main div.scroll{
width:6%;
height:auto;
position:fixed;
right:1%;
bottom:20%;
z-index:500;
}
@keyframes fade{
0%{opacity:0}
50%{opacity:0}
100%{opacity:1}
}
.updown{
animation-name:UpDown;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-direction:alternate;
}
@keyframes UpDown{
0%{
transform:translateY(0);
}
100%{
transform:translateY(25px);
}
}
.btn{
background:#F8B500;
border:2px solid #F8B500;
border-radius:60px;
color:#FFF;
display:block;
font-size:14px;
font-weight:500;
max-width:300px;
padding:1em 2em;
text-align:center;
margin:0 auto 80px;
}
.btn.back{
background:#FFF;
color:#F8B500;
overflow:hidden;
position:relative;
transition-duration:.4s;
z-index:2;
}
.btn.back a{
text-decoration:none;
}
.btn.back::after{
background:#F8B500;
border-radius:50%;
content:"";
display:block;
margin:auto;
opacity:0;
pointer-events:none;
position:absolute;
top:50%;
left:0;
right:0;
width:100%;
padding-top:100%;
height:0;
z-index:-1;
transform:translateY(-50%) scale(0.1);
transition:opacity .5s, transform 0s;
transition-delay:0s, .4s;
}
.btn.back:hover{
color:#FFF;
}
.btn.back:hover::after{
opacity:1;
transform:translateY(-50%) scale(1.1);
transition-delay:0s;
transition:opacity .8s, transform .6s ease-in-out;
}
}









/*==================================================================

SMP

==================================================================*/
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
main div.naviFrame{
display:none;
}
main div.contentsFrame{
background:#FFF;
width:98%;
margin:0 auto;
}
main div.socialFrame{
display:none;
}
main div.scroll{
width:15%;
height:auto;
position:fixed;
right:1%;
bottom:15%;
z-index:500;
}
@keyframes fade{
0%{opacity:0}
50%{opacity:0}
100%{opacity:1}
}
.updown{
animation-name:UpDown;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-direction:alternate;
}
@keyframes UpDown{
0%{
transform:translateY(0);
}
100%{
transform:translateY(20px);
}
}
.btn{
background:#F8B500;
border:2px solid #F8B500;
border-radius:60px;
color:#FFF;
display:block;
font-size:13px;
font-weight:500;
max-width:70%;
padding:1em 2em;
text-align:center;
margin:0 auto 80px;
}
.btn.back{
background:#FFF;
color:#F8B500;
overflow:hidden;
position:relative;
transition-duration:.4s;
z-index:2;
}
.btn.back a{
text-decoration:none;
}
.btn.back::after{
background:#F8B500;
border-radius:50%;
content:"";
display:block;
margin:auto;
opacity:0;
pointer-events:none;
position:absolute;
top:50%;
left:0;
right:0;
width:100%;
padding-top:100%;
height:0;
z-index:-1;
transform:translateY(-50%) scale(0.1);
transition:opacity .5s, transform 0s;
transition-delay:0s, .4s;
}
.btn.back:hover{
color:#FFF;
}
.btn.back:hover::after{
opacity:1;
transform:translateY(-50%) scale(1.1);
transition-delay:0s;
transition:opacity .8s, transform .6s ease-in-out;
}
}










/*==================================================================

NAV_FRAME

==================================================================*/
@media screen and (min-width:961px) {
.naviFrame{
position:fixed;
right:5%;
bottom:3%;
max-width:18%;
}
.naviFrame ul li{
margin:7% 0 0 auto;
}
.naviFrame ul li img{
position:relative;
left:0;
transition:0.8s;
}
.naviFrame ul li img:hover{
left:30px;
}
.navigation{
margin-bottom:40px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.naviFrame{
display:none;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.naviFrame{
display:none;
}
}









/*==================================================================

SOCIAL_FRAME

==================================================================*/
@media screen and (min-width:961px) {
.funding{
position:fixed;
top:50%;
transform:translateY(-50%);
right:0;
width:50px;
height:auto;
}
.socialFrame ul{
width:70%;
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
.socialFrame ul li{
width:70%;
}
.socialFrame ul li img{
width:60%;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.funding{
position:fixed;
right:0;
bottom:40%;
width:50px;
height:auto;
}
.socialFrame ul{
display:none;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.funding{
display:none;
}
.fundingFloat{
position:fixed;
left:0;
bottom:0;
z-index:9999;
}
}









/*==================================================================

FOOTER

==================================================================*/
.is-hidden{
visibility:hidden;
opacity:0;
}
.disappear{
transition:0.3s;
}
@media screen and (min-width:961px) {
footer{
width:100%;
background:#F8B500;
padding:50px 0 30px;
color:#000;
}
footer section{
width:960px;
margin:0 auto;
}
footer h2{
width:20%;
height:auto;
margin:0 auto 30px 0;
}
footer ul{
font-size:15px;
font-weight:500;
margin:0 0 30px 0;
}
footer ul a:link{
text-decoration:none;
}
footer ul a:hover{
text-decoration:underline;
transition:0.3em;
}
footer ul li{
float:left;
margin-right:2em;
}
footer ul li dl{
font-size:15px;
font-weight:400;
padding:0.5em 0 0 1em;
width:17em;
}
footer ul li dl dt{
width:1em;
margin-right:0.3em;
float:left;
}
footer ul li dl dd span{
font-size:0.8em;
}
footer ol{
width:20%;
margin:50px auto 30px 0;
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
footer ol li{
width:70%;
}
footer ol li img{
width:60%;
}
footer p.copyright{
font-size:13px;
text-align:right;
margin-top:30px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
footer{
width:100%;
background:#F8B500;
padding:50px 0 30px;
color:#000;
}
footer section{
width:80%;
margin:0 auto;
}
footer h2{
width:20%;
height:auto;
margin:0 auto 30px 0;
}
footer ul{
font-size:14px;
font-weight:500;
margin:0 0 30px 0;
}
footer ul a:link{
text-decoration:none;
}
footer ul a:hover{
text-decoration:underline;
transition:0.3em;
}
footer ul li{
float:left;
margin-right:2em;
}
footer ul li dl{
font-size:14px;
font-weight:400;
padding:0.5em 0 0 1em;
width:17em;
}
footer ul li dl dt{
width:1em;
margin-right:0.3em;
float:left;
}
footer ul li dl dd span{
font-size:0.8em;
}
footer ol{
width:30%;
margin:50px auto 30px 0;
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
footer ol li{
width:70%;
}
footer ol li img{
width:60%;
}
footer p.copyright{
font-size:12px;
text-align:right;
margin-top:30px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
footer{
width:100%;
background:#F8B500;
padding:50px 0 60px;
color:#000;
}
footer section{
width:80%;
margin:0 auto;
}
footer h2{
width:40%;
height:auto;
margin:0 auto 20px 0;
}
footer ul{
font-size:14px;
font-weight:500;
margin:0 0 10px 0;
}
footer ul a:link{
text-decoration:none;
}
footer ul a:hover{
text-decoration:underline;
transition:0.3em;
}
footer ul li{
margin:0.3em 0;
}
footer ul li dl{
font-size:14px;
font-weight:400;
padding:0.5em 0 0 1em;
width:17em;
}
footer ul li dl dt{
width:1em;
margin-right:0.3em;
float:left;
}
footer ul li dl dd span{
font-size:0.8em;
}
footer ol{
width:60%;
margin:20px auto 30px 0;
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
footer ol li{
width:70%;
}
footer ol li img{
width:60%;
}
footer p.copyright{
font-size:12px;
text-align:right;
margin-top:10px;
}
}