#gnav > ul > li.dropdown > a::after{
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}
#header.fixed #gnav > ul > li.dropdown > a::after{
  border-top: solid 2px #949cb6;
  border-right: solid 2px #949cb6;
}

section:not(#mv){ margin-top:120px; margin-bottom:120px; }
section:last-child{ margin-bottom: 0!important; }

.loader-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background:#c8d1ff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  color: #ffffff;
  font-size: 15px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}


/*--------------------------------
 メインビジュアル
---------------------------------*/
#mv{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#mv .slider li{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  margin: 0;
}
#mv .slider li:nth-child(1){ background-image: url(/assets/img/mv1.jpg); }
#mv .slider li:nth-child(2){ background-image: url(/assets/img/mv2.jpg); }
#mv .slider li:nth-child(3){ background-image: url(/assets/img/mv3.jpg); }

#mv .mv-box{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  text-align: center;
}
#mv .mv-box .mv-logo{
  width: 32%;
  margin:auto;
  filter: drop-shadow(1px 1px 10px rgb(0,0,0,70%));
}
#mv .mv-box .mv-ttl{
  font-size: 2.8em;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 10px rgb(0,0,0,70%);
}

#about .sec-ttl{ position: relative; }
#about .pc_center{ letter-spacing: 1px; }

#works-slider li .category-name{
  display: inline-block;
  margin-top: 1.9em;
  padding: 6.5px 15px;
  font-family: 'Noto Sans JP';
  font-size: .75em;
  background-color: #949cb6;
  color: #fff;
  border-radius: 50px;
  line-height: 1;
  letter-spacing: 1px;
}
#works-slider li .works-ttl{
  margin-top: .4em;
  font-size: 1.1em;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  letter-spacing: 1px;
}
#works-slider li .date{
  margin-top: .8em;
  padding-top:.8em;
  font-size: .85em;
  color: #949cb6;
  border-top: solid 1px #949cb6;
  text-align: right;
  line-height: 1;
}
#works-slider .slick-slide { position: relative; margin: 0 20px; }
#works-slider .slick-arrow {
  z-index: 10;
  position: absolute;
  left: auto;
  right: 85px;
  top: -80px;
  bottom: auto;
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  -webkit-transform: none;
  transform: none;
  border: solid 2px #333;
  color: transparent;
  background: #fff;
  border-radius: 50px;
  font-weight: 500;
  box-shadow: 3px 4px 0px #949cb6;
  transition: 0.3s ease-in-out;
  z-index: 1;
}
#works-slider .slick-arrow:hover {
  transform: translate3d(0.2rem, 0.2rem, 0);
  box-shadow: none;
  opacity: 1;
  transition: all 0.2s;
  background: #949cb6;
  border-color: #949cb6;
}

#works-slider .slick-arrow::before {
    display: none
}

#works-slider .slick-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    background: url("/assets/img/works_slider_arrow.svg") no-repeat center / contain;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}
#works-slider .slick-arrow:hover::after { background-image: url("/assets/img/works_slider_arrow_w.svg"); }

#works-slider .slick-next {
    left: auto;
    right: 20px
}

#works-slider .slick-prev::after {
    -webkit-transform: scale(-1, 1) translate(50%, -50%);
    transform: scale(-1, 1) translate(50%, -50%)
}


.skill-list li{ width: 48%; margin-right:4%; }
.skill-list li:nth-child(2n){ margin-right:0; }
.skill-list li:nth-child(n+3){ margin-top:4%; }

.skill-list li .skill-icon{ width: 10%; margin-right: 3.5%; margin-top: 7px; }
.skill-list li .skill-box{ width: 86%; }
.skill-list li .skill-box .skill-ttl{ font-size: 1.13em; font-weight: 700 }
.skill-list li .skill-box .star{ margin-bottom: 0.25em; color: #f2c027; }
.skill-list li .skill-box .skill-txt{ line-height: 1.7; }


#profile .inner .profile-img{ width: 25%; margin-right: 4%; }
#profile .inner .profile-img img{ border-radius:50%; }
#profile .inner .profile-box{ width: 71%; }
#profile .inner .profile-box .profile-ttl{
  margin-bottom: 1em;
  line-height: 1;
  font-size: 1.45em;
}
#profile .inner .profile-box .profile-ttl rt{
  position: relative;
  top: -0.25em;
  transform: translateY(-0.25em);
}
#profile .inner .profile-box .shikaku-box{
  margin-top: 2em;
  padding: 1.5em;
  border: solid 2px #333;
  box-shadow: 3px 4px 0px #949cb6;
  background: #fff;
}
#profile .inner .profile-box .shikaku-box .shikaku-ttl{
  margin-bottom: 1em;
  font-size: 1.13em;
  line-height: 1;
}
#profile .inner .profile-box .shikaku-box .circle li{  font-family:"Noto Sans JP"; line-height: 1.4; }
#profile .inner .profile-box .shikaku-box .circle li+li{ margin-top: 10px; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 821以上(PC) */
@media screen and (min-width: 821px) {
  #gnav ul li:not(:last-child) a{ text-shadow: 1px 1px 10px rgb(0,0,0,70%); }
}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 820px) {
  #gnav > ul > li.dropdown > a::after {
    border-top: solid 2px #949cb6;
    border-right: solid 2px #949cb6;
  }

  #mv{ height: 40vh; }
  #mv .mv-box .mv-logo{ width: 40%; }
  #mv .mv-box .mv-ttl{ font-size: 2.5em; }

  #works-slider .slick-slide { margin: 0 10px; }
  #works-slider li .works-ttl{ font-size: 1em; }
  
}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  section:not(#mv){ margin-top:70px; margin-bottom:70px; }

  #mv{ height: 500px; }
  #mv .slider li{ background-position: 30%; }
  #mv .mv-box .mv-logo{ width: 80%; }
  #mv .mv-box .mv-ttl{ font-size: 2em; }

  #works-slider .slick-arrow{
    right: 65px;
    top: auto;
    bottom: -60px;
    outline: none;
    width: 40px;
    height: 40px;
  }
  #works-slider .slick-next{ right:12px; }
  #works-slider li .works-ttl{ font-size: 1.15em; }
  #works .btn{ margin-top: 85px; }

  .skill-list li { width: 100%; margin-right: 0; }
  .skill-list li + li,
  .skill-list li:nth-child(n+3){ margin-top:2.5em; }
  .skill-list li .skill-icon { width: 15%; margin-right: 5%; }
  .skill-list li .skill-box { width: 80%; }

  #profile .inner .profile-img { width: 55%; margin: 0 auto 2em; }
  #profile .inner .profile-box { width: 100%; }
  #profile .inner .profile-box .profile-ttl{ margin-bottom: 1.5em; text-align: center; }
  #profile .inner .profile-box .shikaku-box{ margin-top: 2.5em; }

}