@import url('https://fonts.googleapis.com/css2?family=Quando&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
.overlay, #yt_player {
   position: fixed;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
}
video {
   position: absolute;
   right: 50%;
   bottom: 50%;
   transform: translate(50%, 50%);
   min-width: 100%;
   min-height: 100%;
   /* width: auto;
   height: auto;  */

}
.none {
   opacity: 0;
}
.overlay {
   background-color: black;
   min-width: 100%;
   min-height: 100vh;
}
iframe {
   height: 100vh;
   min-width: 100%;
}
.ytp-chrome-top {
   display: none !important;
   opacity: 0;
 }
.overlay{
   z-index: -1;
}

#yt_player{
   z-index: -2;
}
body {
   font-family : sans-serif,"noto sans cjk jp";
   font-family: serif,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,sans-serif;
   -webkit-text-size-adjust: 100%;
   line-height: 1.5;
}
* {
   color: #B5144A;
   font-size: 16px;
}
.fixed {
   position: fixed;
   left: 0;
}
html , body , h1 , h2 , h3 , h4 ,
ol , ul , li ,
dl , dt , dd ,
p , time {
   margin : 0 ;
   padding : 0 ;
}
h1 , h2 , h3 , h4 , p , br {
   font-weight : normal ;
}
ol , ul {
   list-style : none ;
}
img {
   vertical-align : bottom ;
}
/* ローディング画面 */
.orbit-spinner-wrapper {
   width: 100vw;
   height: 100vh;
   background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
}
.orbit-spinner {
   height: 55px;
   width: 55px;
   border-radius: 50%;
   perspective: 800px;
}
.orbit-spinner .orbit {
   position: absolute;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   border-radius: 50%;
}
.orbit-spinner .orbit:nth-child(1) {
   left: 0%;
   top: 0%;
   animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
   border-bottom: 3px solid #ff1d5e;
}
.orbit-spinner .orbit:nth-child(2) {
   right: 0%;
   top: 0%;
   animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
   border-right: 3px solid #ff1d5e;
}

.orbit-spinner .orbit:nth-child(3) {
   right: 0%;
   bottom: 0%;
   animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
   border-top: 3px solid #ff1d5e;
}
@keyframes orbit-spinner-orbit-one-animation {
   0% {
       transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
   }
   100% {
       transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
   }
}

@keyframes orbit-spinner-orbit-two-animation {
   0% {
       transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
   }
   100% {
       transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
   }
}
@keyframes orbit-spinner-orbit-three-animation {
   0% {
       transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
   }
   100% {
       transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
   }
}
.loaded {
   animation: loaded-animation 1200ms linear;
   animation-fill-mode: both;
   display: none;
}
@keyframes loaded-animation {
   0% {
       height: 100vh;
   }
   50% {
       height: 50vh;
   }
   100% {
       height: 0;
       opacity: 0;
   }
}

/* ファーストビュー */
.top {
   /* height: 110vh; */
   height: 100vh;
   max-width: 100%;
   /* color: white; */
   position: relative;
   opacity: 0;
   overflow: hidden;
}
.ytp-title-text {
   visibility: hidden;
}
/* .top::after {
   content: '';
   display: block;
   background-image: url(../img/tiger.png);
   background-size: cover;
   background-position-x: right;
   height: 100%;
   max-width: 100%;
   color: white;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
} */
.top.is-show {
   opacity: 1;
}
.top.is-show::after {
   /* animation: top-animation 1000ms; */
}
@keyframes top-animation {
   0% {
       width: 0px;
       /* height: 100vh; */
   }
   100% {
       width: 100%;
       /* height: 100vh; */
   }
}
.js-top-anime {
   animation: top-title-anime 2000ms;
   animation-delay: 500ms;
   animation-fill-mode: both;
}
@keyframes top-title-anime {
   0% {
       opacity: 0;
       margin-top: 100px;
   }
   100% {
       opacity: 1;
       margin-top: 0px;
   }
}
.top__wrapper {
   width: 80%;
   height: 100%;
   margin: 0 auto;
   position: relative;
   z-index: 30;
   opacity: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}
.header-pc {
   position: fixed;
   top: 50%;
   right: 80px;
   transform: translateY(-50%);
   color: white;
   z-index: 800;
}
.header-list {
   padding-top: 20px;
   transition: all 1s;
}
.header-list a {
   color: transparent;
}
.list {
   /* color: white; */
   line-height: 2;
   transition: all 1s;
}
.list:hover {
   opacity: 0.4;
}
/* トップ画像 */
.top-main-img {
   width: 200px;
   margin-top: 50px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.top-main-img img {
   width: 100%;
   height: 100%;
}
/* .top-main-img::after {
   display: block;
   content: '';
   width: 250px;
   background-color: black;
   height: 40px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
} */
/* ハンバーガーメニュー */
.header-sp {
   display: none;
   position: fixed;
   top: 20px;
   right: 20px;
}
.btn-trigger {
   position: relative;
   width: 30px;
   height: 30px;
   cursor: pointer;
   z-index: 10;
}
.btn-trigger span {
   position: absolute;
   width: 100%;
   height: 2px;
   background-color: #14B62E;
}
.color-b {
   background-color: #B5144A !important;
}
.list-color {
   color: #B5144A !important;
}
.btn-trigger, .btn-trigger span {
   display: inline-block;
   transition: all .5s;
   box-sizing: border-box;
   z-index: 10;
}
.btn-trigger span:nth-of-type(1) {
   top: 0;
   left: 0;
}
.btn-trigger span:nth-of-type(2) {
   top: 13px;
   width: 80%;
   right: 0;
}
.btn-trigger span:nth-of-type(3) {
   bottom: 0;
   left: 0;
}
nav {
   display: block;
   position: fixed;
   top: 0;
   left: -600px;
   bottom: 0;
   width: 60%;
   background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   transition: .5s;
   transition: all 1s;
 }
 .open nav {
   left: 0;
 }
 nav .inner {
   padding: 25px;
 }
 nav .inner ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 nav .inner ul li {
   position: relative;
   margin: 0;
 }
 nav .inner ul li a {
   padding: 1em;
   text-decoration: none;
   transition-duration: 0.2s;
 }
 nav .inner ul li a:hover {
   background: #e4e4e4;
 }
#btn span:nth-of-type(1) {
   animation: btn-bar01 .5s forwards;
}
@keyframes btn-bar01 {
0% {
   transform: translateY(20px) rotate(-45deg);
}
100% {
   transform: translateY(0) rotate(0);
}
}
#btn span:nth-of-type(2) {
   animation: btn-bar02 .5s forwards;
}
@keyframes btn-bar02 {
0% {
   opacity: 0;
}
100% {
   opacity: 1;
}
}
#btn span:nth-of-type(3) {
animation: btn-bar03 .5s forwards;
}
@keyframes btn-bar03 {
0% {
   transform: translateY(-20px) rotate(45deg);
}
100% {
   transform: translateY(0) rotate(0);
}
}
 #btn::after {
   position: absolute;
   top: 50%;
   left: 50%;
   display: block;
   content: '';
   width: 30px;
   height: 30px;
   margin: -16px 0 0 -16px;
   border-radius: 50%;
   border: 1px solid rgba(255,255,255,.3);
   transition: all .1s;
   opacity: 0;
 }
 .btn-trigger.active::after {
   animation: circle .5s;
 }
 @keyframes circle {
   0% {
     transform: scale(.1);
     opacity: 0;
   }
   50% {
     opacity: 1;
   }
   100% {
     transform: scale(3.5);
     opacity: 0;
   }
 }
 #btn.active span:nth-of-type(1) {
   animation: active-btn-bar01 .5s .5s forwards;
 }
 @keyframes active-btn-bar01 {
   0% {
     transform: translateY(0) rotate(0);
   }
   100% {
     transform: translateY(10px) rotate(-45deg);
   }
 }
 #btn.active span:nth-of-type(2) {
   animation: active-btn-bar02 .5s .5s forwards;
 }
 @keyframes active-btn-bar02 {
   0% {
     opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }
 #btn.active span:nth-of-type(3) {
 animation: active-btn-bar03 .5s .5s forwards;
 }
 @keyframes active-btn-bar03 {
   0% {
     transform: translateY(0) rotate(0);
   }
   100% {
     transform: translateY(-20px) rotate(45deg);
   }
 }
.content__wrapper {
   background-color: white;;
}
/*-------------- タイトル ------------*/
.heading {
   width: 100%;
   padding: 1% 0%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
   background-color: black;
   text-align: center;
}
.heading__ttl {
   font-size: 40px;
   border-bottom: 2px solid #c00b0b;
   margin-bottom: 20px;
   /* color: white; */
}
/* 名前・職業文 */
.heading__lead {
   font-size: 24px;
   color: white;
}
.heading__lead::after {
   content: '';
   border-right: 2px solid;
   margin-left: 5px;
   animation: flashing 0.6s linear infinite;
}
@keyframes flashing {
0% {
   opacity: 0;
}
}
/* 背景文字HELLO */
.background-top {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   font-family: 'Dela Gothic One', cursive;
   font-size: 20vw;
   background-image: url(../img/ULOCO.jpg);
   background-size: cover;
   background-position: center center;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}
/*--------------- about-section -------------*/
.about {
   width: 80%;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}
.about__img {
   width: 300px;
   max-width: 300px;
   position: relative;
   z-index: 20;
   margin-top: -50px;
}
.about__img-box1 {
   display: block;
   height: 15px;
   width: 100%;
   background-color: #B5144A;
   z-index: 100;
   position: absolute;
   top: 0;
   left: 0;
}
.about__img-box2 {
   display: block;
   height: 50%;
   width: 50%;
   background-color: #B5144A;
   z-index: -10;
   position: absolute;
   bottom: -15px;
   right: -15px;
}
.about__img img {
   max-width: 100%;
}
.about__item {
   margin-left: 160px;
}
.about__item-ttl {
   margin-bottom: 20px;
   font-size: 24px;
   color: #14B62E;
}
.about__item p {
   line-height: 1.5;
   color: #B5144A;
}
/*--------- セクション共通CSS --------*/
.sec {
   width: 80%;
   margin: 160px auto 0;
   text-align: center;
   max-width: 1280px;
}
.sec__ttl {
   text-align: center;
   font-size: 32px;
   color: #14B62E;
}
.sec__ttl-sub {
   color: #14B62E;
}
/*-------- サービスセクション --------*/
.service {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 80px;
}
.service__item {
   width: 30%;
   padding: 5%;
   text-align: center;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
   transition: all;
}
.service__item h3 {
   margin-bottom: 20px;
   font-size: 24px;
}
.service__item p {
   line-height: 1.5;
}
/*--------- スキルセクション --------*/
.skill {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
   -ms-flex-pack: distribute;
   justify-content: space-around;
   width: 50%;
   margin: 80px auto 0;
}
.skill__item {
   text-align: center;
   width: 25%;
   margin-top: 20px;
}
.skill__item-icon {
   font-size: 50px;
   color: black;
}
.skill__item-icon-photoshop {
   width: 50px;
}
/*---------- ワークセクション --------*/
.work {
   display:-webkit-box;
   display:-ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 80px;
}
.work__item {
   /* display: flex; */
   width: 30%;
   padding: 3%;
   text-align: center;
   /* box-shadow: 5px 5px 10px rgba(0,0,0,0.1); */
   position: relative;
   height: auto;
}
.work__item-img {
   width: 100%;
   max-width: 100%;
}
.work__item__bannar {
   display: flex;
   align-items: center;
}
.mask {
  width: 100%;
   height:	0%;
   max-width: 600px ;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;	/* マスクを表示しない */
   background: linear-gradient(90deg, #FF0000 0%, #FDCF58 100%);
  -webkit-transition:	all 0.6s ease;
   transition:	all 1s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}
/*-------------- お問い合わせセクション -----------*/
.contact {
   margin-top: 80px;
}
.contact__address {
   display: block;
   padding: 40px 0;
}
#contact {
   padding-bottom: 10%;
}
/* レスポンシブ */
@media(max-width: 768px) {
      /* トップ画像 */
   .top-main-img {
       margin-top: 0px;
   }
   /* 背景文字 */
   .background-top {
       top: 5%;
       font-size: 30vw;
   }
   .header-list a {
       color: white;
   }
}
@media(max-width: 480px) {
   * {
       font-size: 14px;
   }
   .header-sp {
       display: block;
       z-index: 200;
   }
   .header-pc {
       display: none;
   }
   /* ヘッダー */
   .header {
       display: none;
   }
   /* トップ画像・タイトル */
   .top__wrapper {
       width: 100%;
   }
   /* タイトル文 */
   .heading {
       padding: 2% 0%;
   }
   /* トップ画像 */
   .top-main-img {
       width: 150px;
   }
   /* サイトタイトル */
   .heading__ttl {
       border-bottom: 1px solid #ffffff;
       margin-bottom: 10px;
       color: white;
   }
   .heading__lead {
       font-size: 16px;
       color: white;
   }
   /* 共通 */
   .sec {
       margin: 80px auto 0;
   }
   .sec__ttl {
       font-style: 24px;
   }
   /* 自己紹介セクション */
   .about {
       display: block;
   }
   .about__img {
       order: 2;
       width: 40vw;
       margin-left: auto;
       margin-right: 0;
       z-index: 0;
   }
   .about__item {
       order: 1;
       margin-left: 0px;
       margin-top: -20%;
   }
   /* サービスセクション */
   .service {
       margin-top: 40px;
   }
   .service__item {
       width: 80%;
       padding: 10%;
       margin: 0 auto 40px;
   }
   /* スキルセクション */
   .skill {
       width: 80%;
       margin: 40px auto 0;
   }
   .skill__item {
       width: 50%;
   }
   /* ワークセクション */
   .work {
       margin-top: 40px;
       justify-content: center;
       flex-direction: column;
   }
   .work__item {
       width: 100%;
       margin: 40px auto 0;
   }
   /* お問い合わせセクション */
   .contact {
       margin-top: 40px;
   }
}
@media(min-width: 960px) {
.mask p {
   color: white;
}
.work__item:hover .mask {
   opacity : 1;	/* マスクを表示する */
   height: 100%;
}

}