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


/*----------------------------------------------------

  #mv

----------------------------------------------------*/

#mv{overflow: hidden;position: relative;width: 100%;height: 100vh;}
#mv .bg{width: 58%;height: 100vh;position: absolute;background: #f6efe7;top:0;left:0;z-index: -1;}

.mv_inner{position: absolute;z-index: 700;bottom:70px;right:80px;text-align: right;}
h1{max-width:260px;mix-blend-mode: normal;margin-left: auto;}
.h1_img{opacity: 0;}
.mv_ttl{width: 460px;margin-top: 20px;opacity: 0;}
.sns{width: 170px;margin: 20px 0 0 auto;opacity: 0;display: flex;justify-content: space-between;}
.sns div{width: 35px;}
.no-use-top{opacity: 0.4;}
@media(max-width: 768px){
  #mv{overflow: hidden;position: relative;width: 100%;height: 630px;}
  h1{max-width:200px;mix-blend-mode: normal;margin-left: auto;}
  .mv_inner{position: absolute;top: 70px;right: 10px;}
  .h1_img{opacity: 1;}
  .mv_ttl{width: 260px;margin-top: 20px;opacity: 1;margin: 15px 0 0 auto;}
  .sns{width: 150px;margin: 20px 0 0 auto;opacity: 1;}
  .sns div{width: 32px;}
}

.new{position:relative;width: 250px;margin:130px auto;height: 260px;border:2px solid #7a4700;}
.new .chara{width:65px;position: absolute;opacity:0;}
.chara.c1{top:20px;left:164px;width: 148px;}
.chara.c2{top:95px;left:167px;}
.chara.c3{top:170px;left:167px;}
.chara.c4{top:20px;left:88px;}
.chara.c5{top:95px;left:88px;}
.chara.c6{top:170px;left:88px;}
.chara.c7{top:20px;left:16px;}
.chara.c8{top:95px;left:16px;}
.chara.c9{top:170px;left:16px;}

@media(max-width: 768px){
  .new{width: 195px;height: 205px;margin:60px auto;}
  .new .chara{width:48px;position: absolute;opacity:1;} 
  .chara.c1{top:18px;left:124px;width: 110px;}
  .chara.c2{top:75px;left:127px;}
  .chara.c3{top:130px;left:127px;}
  .chara.c4{top:18px;left:70px;}
  .chara.c5{top:75px;left:70px;}
  .chara.c6{top:130px;left:70px;}
  .chara.c7{top:18px;left:16px;}
  .chara.c8{top:75px;left:16px;}
  .chara.c9{top:130px;left:16px;}
}



/*----------------------------------------------------

  #
  
----------------------------------------------------*/
section#profile{margin-top: 200px;}
section#freelance{margin-top: 200px;padding-bottom: 140px;}
#profile .ttl{position: absolute;top: 0;right: 0;}
#freelance .ttl{position: absolute;top: 0;left: -25px;}
#profile .ttl h2,#freelance .ttl h2{writing-mode: vertical-rl;font-size: 60px;margin-top: -80px;}
#profile .ctn{width: 94%;}
#freelance .ctn{width: 94%;margin-left: 8%;}
h2{color:#6e4801;font-weight: normal;letter-spacing: 0.05em;font-size: 60px;}
h3.name{color:#6e4801;font-weight: normal;font-size: 52px;line-height: normal;}
h3{color:#6e4801;font-weight: bold;font-size: 24px;margin-top: 20px;line-height: 40px;}
p{font-size: 15px;line-height: 2;margin-top: 10px;}
.hl-en{color:#6e4801;font-size: 18px;letter-spacing: 0.1em;margin-top: -15px;}

#profile .txt,#freelance .txt{width: 46%;}
#profile .img,#freelance .img{width: 46%;height: 500px;}

@media(max-width: 768px){
  section#profile{margin-top: 60px;}
  section#freelance{margin-top: 60px;padding-bottom: 40px;}
  #profile .ctn{width: 100%;}
  #profile .ttl h2,#freelance .ttl h2{display: none;}
  #profile .txt,#freelance .txt{width: 100%;}
  #profile .img,#freelance .img{width: 100%;height: auto;}
  #freelance .ctn{width: 100%;margin-left: 0%;}
  h2{font-size: 36px;}
  h3{font-size: 16px;line-height: normal;margin-top: 5px;}
  h3.name{font-size: 28px;}
  #freelance .ttl{display: none;}

  p{font-size: 14px;line-height: normal;margin-top: 5px;}
  .hl-en{color:#6e4801;font-size: 16px;letter-spacing: 0.1em;margin-top: -5px;}
}


/*----------------------------------------------------

  #writing
  
----------------------------------------------------*/
section#writing{margin-top: 120px;}
#writing .ctn{position: relative;width: 100%;height:500px; }
#writing .ctn .txt{width: 90%;max-width: 1300px;margin: 0;position: absolute;top:-120px;left:50%;margin-left: -45%;text-align: right;}
a.mynavi{margin:20px 0 0 auto;display: block;}
a.mynavi img{width: 680px;}

#writing .bg{width: 60%;height:500px;background: url(../img/write.jpg)center center no-repeat;background-size: cover; }
@media(max-width: 768px){
  section#writing{margin-top: 0px;}
  #writing .ctn{height:auto; }
  #writing .ctn .txt{width: 90%;max-width: 1300px;margin: 0;position: static;margin-left:0;margin: 0 auto;text-align: right;}
  #writing .bg{width: 100%;height:200px;background: url(../img/write.jpg)center center no-repeat;background-size: cover;margin-top: -90px; }
}

/*----------------------------------------------------

  #planning
  
----------------------------------------------------*/
section#planning{margin-top: 280px;}
#planning .ctn{position: relative;width: 100%;height:500px;}
#planning .ctn .txt{width:95%;max-width: 1300px;margin: 0;position: absolute;top:-120px;left:50%;margin-left: -45%;text-align: left;}

#planning .bg{margin:0 0 0 auto;width: 60%;height:500px;background: url(../img/plan.jpg)center center no-repeat;background-size: cover; }
@media(max-width: 768px){
  section#planning{margin-top: 60px;}
  #planning .ctn{position: relative;width: 100%;height:auto;}
  #planning .bg{margin:0 0 0 auto;width: 100%;height:200px;background: url(../img/plan.jpg)center center no-repeat;background-size: cover; margin-top: -90px;}
  #planning .ctn .txt{width:90%;max-width: 1300px;margin-left: 0;margin: 0 auto;position: static;top:0px;left:50%;text-align: left;}
}


/*----------------------------------------------------

  #sponsor
  
----------------------------------------------------*/
#sponsor{padding: 60px 0;}
#sponsor h2{text-align: center;margin-bottom: 20px;}
.sponsor_ctn{max-width:800px;margin:0 auto; width: 90%; }
.sponsor_ctn .box{width: 45%;text-align-last: center;}
.sponsor_ctn .box img{width: 100%;margin-bottom: 10px;}
.sponsor_ctn .box a.btn{margin: 15px auto 0;}
@media(max-width: 768px){
  .sponsor_ctn .box{width: 90%;margin:0 auto; }
}

/*----------------------------------------------------

  #contents
  
----------------------------------------------------*/
section#contents{padding: 120px 0;}

#contents .ctn{}
#contents .ctn .box{width:28%;}
#contents .ctn .box h2{text-align:center;font-size: 28px;}
#contents .ctn .box div{width: 100%;}
#contents .ctn .box p{text-align: center;margin-top: -5px;line-height: 1.6;margin-top: 5px;}

@media(max-width: 768px){
  section#contents{padding: 40px 0;}
  #contents .ctn .box{width:100%;margin-bottom: 20px;}
  #contents .ctn .box h2{text-align:center;font-size: 20px;margin-top:10px; }
}




/*----------------------------------------------------

  #fix-bg
  
----------------------------------------------------*/
.fix-bg{width: 100%;height:280px;background:url(../img/fix_bg_bk.jpg)center center no-repeat;background-attachment: fixed;background-size:cover;  }
@media (max-width: 768px) {
  .fix-bg{width: 100%;height:200px;background-attachment: scroll;background-size:cover;  }
}


/*----------------------------------------------------

  #insta
  
----------------------------------------------------*/
section#insta{padding: 160px 0 0;background: #f6efe7;}
#insta .logo{width: 280px; margin:0 auto 30px;}
@media (max-width: 768px) {
  section#insta{padding: 60px 0 0;background: #f6efe7;}
  #insta .logo{width: 200px; margin:0 auto 30px;}
}

/*----------------------------------------------------

  #footer
  
----------------------------------------------------*/
footer{background: #F4F3F2;width: 100%;padding: 100px 0 30px;}
.link{width: 200px;margin:0 auto;}

p.copyright{width: 100%;text-align: center;font-size: 12px;}
.no-use{opacity: 0.6;}
.footer_list{margin-right: 40px;}
.footer_list li{margin-bottom:5px;}
.footer_list a{font-size:15px;}
.footer_list a:hover{color:#e3dba3;}

.footer_sns div{width:20%;}

.copyright{width: 100%;border-top:1px solid #1E1E1E;text-align: center;margin-top:30px;padding: 30px 0 0;}
.copyright p{font-size: 13px;;letter-spacing: 0.05rem;color:#000;}

@media (max-width: 768px) {
  footer{display:block;padding:20px 0 40px;}
  .footer_logo{width: 100%;}
  .footer_logo img{width: 120px;}
  .footer_link{margin-top:30px;width: 100%;width: 100%;display: block;}
  .footer_list a{font-size:13px;}
  .footer_list li{width:100%;}
  .footer_sns{width: 100%;padding:0 0 0 0;}
  .footer_sns div{width:40px;margin-top: 20px;}
  .copyright{width: 100%;border-top:1px solid #1E1E1E;text-align: center;margin-top:20px;padding: 30px 0 0;}
  .copyright p{font-size: 10px;;letter-spacing: 0.05rem;padding:0 5%;}
}




.mouse{
  width: 44px;
  height: 68px;
  position: relative;
  margin:50px 22px 0 auto ;
  background: #4e5559 linear-gradient(transparent 0%,
                                      transparent 50%,
                                      #ffffff 50%,
                                      #ffffff 100%);
  background-size: 100% 200%;
  border-radius: 100px;
  animation: colorSlide 5s linear infinite,
             nudgeMouse 5s ease-out infinite;
}
.mouse:before,
.mouse:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.mouse:before{
  width: 38px;
  height: 62px;
  background-color: #fff;
  border-radius: 100px;
  border:1px solid #30333a;
}
.mouse:after{
  background-color: #30333a;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  animation: trackBallSlide 5s linear infinite;
}
.text{
  margin-top: 15px;
  font-family: Cabin;
  letter-spacing: 8px;
  color: #fff;
  animation: colorText 5s ease-out infinite,
             nudgeText 5s ease-out infinite;
}
@media(max-width: 768px){
  .mouse,.text{display: none;}
}



/* Animations */
@keyframes colorSlide{
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #4e5559;
  }
  29.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  30% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #4e5559;
  }
  59% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  60% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #4e5559;
  }
  90%, 100% {
    background-color: #ffffff;
  }
}

@keyframes colorText{
  21% {
    color: #4e5559;
  }
  30% {
    color: #ffffff;
  }
  51% {
    color: #4e5559;
  }
  60% {
    color: #ffffff;
  }
  81% {
    color: #4e5559;
  }
  90% {
    color: #ffffff;
  }
} 

@keyframes trackBallSlide{
  0%{
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }
  6%{
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }
  14%{
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }
  15%, 19%{
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }
  28%, 29.99%{
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }
  30%{
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }
  36%{
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }
  44%{
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }
  45%, 49%{
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }
  58%, 59.99%{
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }
  60%{
    opacity: 1;
    transform: scale(0.9) translateY(-20px);
  }
  66%{
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }
  74%{
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }
  75%, 79%{
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }
  88%, 100%{
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }
}
@keyframes nudgeMouse{
  0%{
    transform: translateY(0);
  }
  20%{
    transform: translateY(8px);
  }
  30%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(8px);
  }
  60%{
    transform: translateY(0);
  }
  80%{
    transform: translateY(8px);
  }
  90%{
    transform: translateY(0);
  }
}