@charset "utf-8";
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 30%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/*====================================================================================================
  TOP
====================================================================================================*/
#toppage { overflow: hidden;}
#toppage h3 {
    margin: auto;
    width: 90%; max-width: 1200px;
    font-family: "Righteous", sans-serif;
	font-size: 100px;
	font-weight: 600;
    letter-spacing: -3px;
    line-height: 100%;
    color: #000;
}
#toppage h4 { font-size: 66px;}
#toppage h4 span { font-family: "Roboto", sans-serif; font-weight: 900; font-size: 73px;}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:768px){
    #toppage h3 {font-size:120px;}
    #toppage h4 { font-size: 50px;}
}
@media only screen and (max-width:468px){
    #toppage h3 {font-size:80px;}
    #toppage h4 { font-size: 40px;}
}












/* MAINIMG */
#toppage .mainimg { position: relative; width: calc(100% - 125px); }
#toppage .mainimg img { 
    width: 100%; height:800px;
    object-fit: cover;
    border-bottom-right-radius: 130px;
}
@media only screen and (max-width:1200px){
    #toppage .mainimg h2 { width: 60%;}
    #toppage .mainimg img { height: 600px;}
}
@media only screen and (max-width:800px){
    #toppage .mainimg img { height: 500px;}
}
@media only screen and (max-width:768px){
    #toppage .mainimg { width:100%;}
    #toppage .mainimg h2 { bottom:100px; width: 80%;}
    #toppage .mainimg img { height: 300px; border-bottom-right-radius:0;}
}






/* NEWS */
#news { 
    position: relative;
    margin: 0 auto;
    padding-bottom: 100px;
    width: 90%;
}
#news h3 {
    position: absolute; top: -50px;
    font-size: 55px;
    color: #fff;
}
#news dl { display:flex; gap:5px 20px; margin: auto; padding: 20px 0 0;}
#news dd a { color: #222;}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:768px){
    #news h3 { position: static; color: #222; margin:30px 0 0;}
    #news dl { flex-direction: column; margin: 0; width: 70%;}
}
@media only screen and (max-width:468px){
}



/* ABOUT */
#about { position: relative;}
#about .bg1 {
    position: relative;
    margin-bottom: 100px;
    overflow: hidden;
}
#about .bg1::before,
#about .bg1::after {
    display: block; clear: both; content:"";
    position: absolute;
}
#about .bg1::before {
    top: 0; right: 0;
    width:90%; height: 100%;
    background:url("../image/bg1.jpg") no-repeat center center;
    background-size: cover;
    border-bottom-left-radius:120px;
    border-top-left-radius:120px;
}
#about .bg1::after {
    bottom:0; right:0; z-index:7;
    width: 100%; max-width: 611px; aspect-ratio: 611 / 279;
    background: url("../image/bg3.png") no-repeat right bottom;
    background-size: 70% auto;
}
#about .bg2 {
    position: relative;
    display: flex; flex-direction: column; gap:40px;
}
#about .bg2::before,
#about .bg2::after {
    display: block; clear: both; content:"";
    position: absolute; 
    height:100%;
}
#about .bg2::before {
    top:0; left: 0;
    width:60%; 
    background:url("../image/bg2.jpg") no-repeat;
    background-size: cover;
    border-bottom-right-radius:120px;
    border-top-right-radius:120px;
}
#about .bg2::after {
    top:0; right: 0;
    width:35%;
    background: #30D2E0 url("../image/bg_dot2.png") no-repeat center left;
    border-bottom-left-radius:120px;
    border-top-left-radius:120px;
}
#about h3 { position: absolute; top: -20px; right:5%; z-index: 9; width: auto; color:#fff;}
#about h4 img { width: auto; height: 66px;}
#about .story { 
    position: relative; z-index: 9;
    display: flex; flex-direction: column; gap:40px; 
    margin: auto; width: 70%; max-width: 1200px;
}
#about .story1 { padding:150px 0 100px;}
#about .story2 { padding:100px 0 0;}
#about .story3 { padding:0 0 100px; align-items: flex-end; text-align: right;}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:768px){
    #about .bg1 { margin-bottom: 50px;}
    #about .bg1::before {
        width:95%;
        border-bottom-left-radius:80px;
        border-top-left-radius:80px;
    }
    #about .bg2::before {
        top:0; left: 0;
        width:95%; height: 450px;
        background:url("../image/bg2.jpg") no-repeat;
        background-size: cover;
        border-bottom-right-radius:120px;
        border-top-right-radius:120px;
    }
    #about .bg2::after {
        top:inherit; bottom: 0; right: 0;
        width:95%; height: 450px;
        background: #30D2E0;
        border-bottom-left-radius:120px;
        border-top-left-radius:120px;
    }
    #about h4 img { width: auto; height: 55px;}
    #about .story { width: 80%;}
    #about .story1 { padding:100px 0 200px;}
    #about .story2 { padding:100px 0 150px; height: 450px;}
    #about .story3 { padding:80px 0 150px; text-align: left; height: 450px;}
}
@media only screen and (max-width:468px){
}






/* Tool */
#team { position: relative; padding: 100px 0;}
#team h3 { position: absolute; top: -50px; left: 0;}
#team .inner {
    margin-left: 10%;
    padding:200px 50px 100px;
    width: 90%; max-width: inherit;
    background: #4CACDC url("../image/bg_dot2.png") no-repeat 800px 90%;
    border-bottom-left-radius:120px;
    border-top-left-radius:120px;
}
#team .inner::before,
#team .inner::after {
    display: block; clear: both; content:"";
    position: absolute; mix-blend-mod:overlay; opacity: 0.5;
}
#team .inner::before {
    top: -400px; left:-400px;
    width: 940px; height: 940px;
    background: url("../image/bg_dot.png") no-repeat;
    background-size: 100% auto;
}
#team .inner::after {
    top:40%; left:-300px;
    width: 940px; height: 940px;
    background: url("../image/bg_dot3.png") no-repeat;
    background-size: 100% auto;
}
#team .team_list {
    position: relative; z-index: 9;
    display: flex; flex-direction: column; gap:50px;
    margin: auto; width: 90%; max-width: 1200px;
}
#team .box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap:20px;}
#team .box.row_re { flex-direction: row-reverse;}
#team .box .photo { width: 50%; max-width: 450px;}
#team .box .cont  { 
    width: calc(50% - 20px);
    display: flex; flex-direction: column; gap:30px;
}
#team .box .en {
    position: relative; top:30px;
    font-family: "Roboto", sans-serif;
    font-size:40px;
    font-weight: bold;
    color: rgba(255,255,255,0.20);
}
#team .box h4 { 
    position: relative; z-index: 9;
    display: flex; flex-direction: column; gap:10px;
}
#team .box h4 b { font-size: clamp(40px, 5.5vw, 80px) !important; line-height:100%;}
#team .box h4 small { font-size: 16px;}
#team .box h5 { font-size: clamp(18px, 2vw, 24px) !important;}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:768px){
    #team .inner { background: #4CACDC url("../image/bg_dot2.png") no-repeat 200px 98%; background-size: 600px auto;}
    #team .inner::before { left: 150px; width: 600px; height: 600px;}
    #team .inner::after {width: 600px; height: 600px;}
    #team .team_list { width: 100%; gap:230px;}
    #team .box { flex-direction: column; }
    #team .box .photo { width:225px; position:absolute; top:-20%; right:0; }
    #team .box .cont  { width: 100%; }
    #team .box .en { font-size:20px;}
}
@media only screen and (max-width:468px){
    #team .box .photo { top:-200px; right: -20px; }
}






/* Tool */
#tool {
    position: relative; padding:100px 0 100px;
    background: #C6F0FF url("../image/wave.png") repeat-x left top;
}
#tool .inner {
    margin: 0 10% 0 0;
    padding:200px 50px 100px;
    width: 90%; max-width: inherit;
    background: #F8F29D;
    border-bottom-right-radius:120px;
    border-top-right-radius:120px;
}
#tool h3 { position: absolute; top:-20px; right: 0; text-align:right; }
#tool .tool_list {
    display: flex; flex-direction: row; gap:40px;
    margin: auto; max-width:1000px;
}
#tool .tool_list li { width: 280px; padding: 20px;}
#tool .tool_list li span { display: block;}
#tool .tool_list .photo {
    display: block;
    padding: 20px;
    background: #4CACDC;
    border-radius: 275px;
}
#tool .tool_list li:nth-child(even) .photo { background: #4CACDC;}
#tool .tool_list li:nth-child(odd) .photo { background: #26C3D6;}
#tool .tool_list .cont { padding: 20px 0;}
#tool .tool_list .mid { margin-bottom: 20px; text-align: center;}
#tool .tool_list .mid img { width: auto !important; height: 45px;}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:768px){
    #tool .inner { padding:200px 0 100px;}
    #tool .tool_list li { width:100%;}
}
@media only screen and (max-width:468px){
     #tool .inner { padding:100px 0 50px;}
    #tool .tool_list li { width: 200px !important; padding: 20px;}
}






/* PUZZLE */
#puzzle { position: relative; padding:100px 0 100px; background: #C6F0FF;}
#puzzle::before,
#puzzle::after {
    display: block; clear: both; content:"";
}
#puzzle::before {
    position: absolute; top:230px; left: 0;
    width:56.5%; height:calc(100% - 350px);
    background:#4CACDC;
    border-bottom-right-radius:120px;
    border-top-right-radius:120px;
}
#puzzle::after {
    position: absolute; top:100px; right: 0;
    width:36.5%; height:calc(100% - 300px);
    background: #30D2E0;
    border-bottom-left-radius:120px;
    border-top-left-radius:120px;
}
#puzzle h3 { text-align: left; position: relative; top:20px;}
#puzzle .inner {
    position: relative; z-index: 9;
    display: flex; flex-wrap: wrap; gap:100px;
}
#puzzle .cont {
    display: flex; flex-direction: column; justify-content: center; gap:20px;
    padding: 0 50px;
    width: 100%; max-width: 500px;
}
#puzzle h4 {
    display: flex; flex-direction: column; gap:30px;
}
#puzzle h4 span:nth-child(1) img { margin: auto; width: 200px;}
#puzzle h4 span:nth-child(2) img { margin: auto; width: 270px;}
#puzzle .come {
    color: #fff;
}
#puzzle .btn { margin: auto; width: 270px;}
#puzzle .btn a {
    display: block;
    padding: 10px 20px;
    font-weight: bold;
    color: #4CACDC;
    text-align: center;
    background: #fff;
    border-radius: 30px;
}
#puzzle .puzzle_list {
    position: relative; top: -50px;
    width:492px;
    aspect-ratio: 1 / 1;
}
#puzzle .puzzle_list p { position: absolute; }
#puzzle .puzzle_list p:nth-child(1) { top: 0; left: 0;}
#puzzle .puzzle_list p:nth-child(2) { bottom: 0; left: 0;}
#puzzle .puzzle_list p:nth-child(3) { bottom: 0; right: 0;}
#puzzle .puzzle_list p:nth-child(4) { top: 0; right: 0;}
#puzzle .puzzle_list p:nth-child(1) img { height:250px; width: auto;}
#puzzle .puzzle_list p:nth-child(2) img { width:250px; height: auto;}
#puzzle .puzzle_list p:nth-child(3) img { height:250px; width: auto;}
#puzzle .puzzle_list p:nth-child(4) img { width:250px; height: auto;}
@media only screen and (max-width:1135px){
    #puzzle .puzzle_list { top:0; margin: auto; width:292px; height: 292px;}
    #puzzle .puzzle_list p:nth-child(1) img { height:150px;}
    #puzzle .puzzle_list p:nth-child(2) img { width:150px;}
    #puzzle .puzzle_list p:nth-child(3) img { height:150px;}
    #puzzle .puzzle_list p:nth-child(4) img { width:150px;}
}
@media only screen and (min-width:768px){
    #puzzle .btn a:hover { text-decoration: none; opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #puzzle::before {top:230px; left: 0; width:92%;}
    #puzzle::after { top:100px; right: 0; width:5%;}
    #puzzle::before { top:200px;}
    #puzzle .inner {flex-direction: column; gap:20px;}
    #puzzle .cont { margin: auto;}
}
@media only screen and (max-width:468px){
    #puzzle::before { top:200px;}
}






/* MOVIE */
#movie { position: relative; padding-bottom:200px; background: #C6F0FF;}
#movie h3 { text-align: center;}
#movie .inner { margin: auto; width: 80%; max-width:600px;}
#movie .youtube {
    position: relative;
    width: 100%; max-width: 1000px;
    padding-top: 56.25%;
}
#movie .youtube::before,
#movie .youtube::after {
    display: block; clear: both; content:"";
}
#movie .youtube::before {
    position: absolute; top:100px; right: -400px; z-index:7;
    width: 100%; max-width: 946px; aspect-ratio: 1 / 1;
    background:url("../image/bg_dot4.png") no-repeat;
    background-size: 100% auto;
    mix-blend-mod:color-burn;
}
#movie .youtube::after {
    position: absolute; top:40px; right: -40px; z-index: 8;
    width: 100%; height: 100%;
    background: #30D2E0;
    border-radius: 55px;
}
#movie .youtube p {
    position: absolute; top: 0; left: 0; right: 0; z-index: 9;
    display: flex; flex-direction: column; justify-content: center;
    width: 100%;  height: 100%;
    font-family: "Righteous", sans-serif;
	font-size: 50px;
	font-weight: 600;
    letter-spacing: -3px;
    line-height: 100%;
    text-align: center;
    color: #fff;
    background: #777;
    border-radius: 55px;
}
#movie .youtube iframe {
    position: absolute; top: 0; left: 0; right: 0; z-index: 9;
    margin: auto;
    width: 100%; height: 100%;
    border-radius: 55px;
}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:768px){
    #movie .inner { padding-top: 50px;}
    #movie .youtube::before { top:10px; right: -140px;}
    #movie .youtube::after { top:20px; right: -20px;}
}
@media only screen and (max-width:468px){
    #movie .youtube p { font-size: 30px;}
}