@charset "UTF-8";

/*====================  main-page ====================*/
/*========== intro-area ==========*/
.intro-list img {width:80px; margin-bottom:30px;}
.intro-list {padding-top: 2rem;}
.intro-list li {width: 370px;text-align: center;}
/*========== web-area ==========*/
.web-area {display: flex; justify-content: space-between;align-items: center; }
.web-area .text-box {padding-left:130px;}
.img-box {position: relative; width: 740px; height: 470px;}
.img-box .img-pc {position:absolute; top:0; left:0px;}
.img-box .img-mobile {position:absolute; top:93px; right:0px;}
/*========== mobile-area ==========*/
.mobile-area {text-align: center;}
.mobile-area .deco {background: #fff; margin-left:auto; margin-right:auto; margin-top:0;}
.mobile-area .btn-go {color:#fff; margin-left:-36px;}
.mobile-area .btn-go:after {background: #fff;}
.mobile-area .content-box {padding-top:50px; display: flex; justify-content: flex-end; align-items: center;}
.mobile-area .content-box img {padding-left: 20px;}
.mobile-area .content-box img:nth-child(3) {opacity: 0.9;}
.mobile-area .content-box img:nth-child(4) {opacity: 0.4;}

/*========== design-area ==========*/
.design-area li {float:left;margin-right: 7%; background: #fff; box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.1); border-radius: 40px; width:28%; text-align: center; padding: 40px; box-sizing: border-box; cursor: pointer;}
.design-area li:last-child {margin-right: 0%; }
.design-area .logo-box {width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin:0 auto; position:relative; animation: circle linear 0.5s infinite alternate;}
.design-area li:nth-child(2) .logo-box {animation-delay: 1.7s;}
.design-area li:nth-child(3) .logo-box {animation-delay: 2.7s;}
.design-area .logo-box img {width: 100%;}
.design-area span {display: block; padding: 30px 0px; font-weight: 600; line-height: 1.4;}
.design-area .btn-site {font-size:1.2rem; margin-top: 40px; background: #687ef8; color:#fff; border-radius: 30px; width:100%; padding: 15px; }
.design-area .btn-site:hover {background:#4a65ff; }
@keyframes circle {
  0%{top:-5px;}
  100%{top:5px;}
}
/*========== illust-list ==========*/
.illust-list li {width: 23%; height: auto; position: relative; overflow: hidden; cursor: pointer;}
.illust-box img {width: 100%; display: block;}
.mask-box {width:100%; height: 100%; background:rgba(104,126,248,0.9); position: absolute; top:0; left:0; transition:0.5s; color:#fff; font-size:1.3rem; text-align: center; padding-top:150px;}
.illust-list li:hover .mask-box {background:rgba(104,126,248,0); transition:0.5s; color:transparent;}
.illust-list li:hover .illust-box img  {transform: scale(1.1); transition:0.5s;}


/*========== popup ==========*/
.over-pop {padding-top:30px;}
.pop-img img{ display: block; margin:0 auto; width:60%;}
.over-pop .close {position:fixed; top:50px; right:50px;}
.over-pop .close img {width:40px; height:40px; display: block;}

.tablet-area h5 {font-size:20px; font-weight:400; position:absolute; left: 30px; top:30px; z-index: 50;}
.tablet-area {width:1168px; margin:0 auto; position:relative; padding-bottom:50px;}
.tablet-area .tablet-img {display: block; width:800px; height: 534px; margin:0 auto;}
.tablet-area .illust-mask {width:752px; height:485px;  border-radius: 10px; overflow: hidden;
                   position: absolute; left:50%; transform: translateX(-50%); top:19px;}
.tablet-area .illust {width:4512px; position:relative; left:0;}
.tablet-area .illust li{ float:left;  }
.tablet-area .illust li img {width:752px;  height:100%; display: block; }
.over-pop .button .prev,
.over-pop .button .next
{position:absolute; top:50%; transform:translateY(-50%); cursor:pointer;}
.over-pop .button .prev {left:120px;}
.over-pop .button .next {right:120px;}

.popup { opacity:0; width:0px; height:0px; position:fixed; top:40%; bottom:0; left:40%; right:0; z-index: 999; overflow:auto; background:rgba(0,0,0,0.6); transition:0.8s;}
.popup.on {opacity:1; width:100%; height:auto; top:0; left:0;}
.btn-close {display: none; position: fixed; right:20px; top:10px; width:70px; height:70px; z-index: 102; text-indent:-9999px; opacity: 0;}
.btn-close:before {content:""; display:block; position:absolute; right:9px; top:30px; background:#fff; width:50px; height:2px; transform: rotate(45deg);}
.btn-close:after {content:""; display:block; position:absolute; right:9px; top:30px; background:#fff; width:50px; height:2px; transform: rotate(-45deg);}
.btn-close.on {display:block; opacity: 1;}
.popup-img { width: 100%;}
.popup-img img { margin:0 auto; display:block;}

#popup-2 .popup-img  {position:absolute; top:50%; margin-top:-350px;}

/*========== project-page ==========*/
.responsive-area .number {font-weight: 600; font-size: 5rem; color:#eaeaea; margin-left:-15px;}
.responsive-area.mobile .number {color:#c8dfe3;}
.responsive-area {padding-top:50px;}
.responsive-area li {display: flex; justify-content: space-between; align-items: center; padding-bottom:120px;}
.responsive-area li:last-child {padding-bottom:0;}
.responsive-area.mobile li {justify-content: space-evenly;} 
.responsive-area .img-box {width:calc(100% - 600px); height:auto !important; }
.responsive-area.mobile .img-box {width:360px;}
.responsive-area .img-box img {width:100%; display: block;}
.responsive-area li .text-box  {width: 410px;}
.responsive-area h2 {padding-bottom:20px;}
.responsive-area .btn-go {margin-top:30px;}
.bg-green .btn-go {color:#fff;}
.bg-green .btn-go:after {background: #fff;}

/*========== about-page ==========*/
.jina-img-box {width:300px; position:absolute; top:-150px; left:50%; margin-left:-150px; }
.jina-img-box img {width: 100%;}
.contact {text-align: center;}
.contact strong { font-size: 2rem; padding-top:30px; display:inline-block;}
.contact p {font-size: 1.8rem; padding-top:10px;display:inline-block;}
/* .contact strong:before , .contact p:before {content:""; display: block; width:100%; height:15px; background:#fffa7c; position: absolute; bottom:3px; left:0;} */
.tag-list {padding-top:100px; text-align: center;}
.tag-list li {font-size: 1rem; color:#fff; background: #a188e8; display: inline-block; padding:10px 20px; border-radius: 20px; margin-left:10px; margin-bottom:10px;}

.skill-area {padding-top:200px; display: flex; justify-content: space-around; width: 100%; }
.skill-area .left-box {padding-top:50px; width: 40%;}
.skill-area .left-box h3 {text-align: center; line-height: 1.3;}
.skill-area .right-box {width: 40%;}
.skill-area .right-box li {padding-bottom:50px;}
.skill-area .right-box h4 {padding-bottom:10px; position: relative;}
.skill-area .right-box h4::before {content:""; display: block; width:7px; height: 7px; background: #a188e8; position:absolute; left:-20px; top:5px; }


/*==================== 1440px ====================*/
@media screen and (max-width:1440px){
  .container { width: 100%;padding:0 5vw; box-sizing: border-box;}
}

/*==================== 1024px ====================*/
@media screen and (max-width:1024px){
body {font-size: 16px;}
.web-area {justify-content: space-between; flex-direction: column; align-items: center;}
.img-box .img-pc {width: 100%;}
.img-box .img-mobile {top:160px; right:-50px;}
.mobile-area .content-box {justify-content: space-around;}
.content-box img:nth-child(2) {display: none;}
.content-box img:nth-child(3) {display: none;}
.content-box img:nth-child(4) {display: none;}
}


/*==================== 768px ====================*/
@media screen and (max-width:768px){
  .responsive-area li .text-box {width: 200px;}
  .responsive-area .img-box {width: calc(100% - 220px);}
}