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

@import url(reset.css);
img { vertical-align: bottom; }

body{
  font-family: 'Inter',"Ms Madi", "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1D1D1D;
}
ul{list-style: none;}
.jp{
  font-family: "Noto Sans JP";
}

/* SP用 */
.pc{
  display: none;
}

/* dorower/navigation */
.drower{
  position: fixed;
  top: -100%;
  left: 0;
	z-index: 1000;
  width: 100%;
  height: 326px;
  transition: all 0.5s ease;
  background: rgba( 255, 255, 255, 0.15 );
backdrop-filter: blur( 6.5px );
-webkit-backdrop-filter: blur( 6.5px );
}

.drower.show{
 top: 0;
}

.drower .main_n p {
  width: 93px;
  height: 40px;
  margin: 20px auto 0;
}
.drower .main_n p:last-child {
  width: 120px;
  height: 50px;
background: url(../images/obj-circle.svg) center center / contain no-repeat;

}
.drower .main_n a{
  display: block;
  text-decoration: none;
  color: #1D1D1D;
  font-size: 93.75%;
  font-weight: 700;
}
.drower .main_n a.wo{
padding: 11px 19px;
}
.drower .main_n a.ab{
padding: 11px 6px;
}
.drower .main_n a.co{
padding: 13px 24px;
}

.clos_wrap{
  display: block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 14px 2px;
  font-size: 68.8%;
  font-weight: 700;
  margin:13px 13px 29px auto ;
}

.logobtnwrap{
  width: 90px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 13px;
  right: 13px;
  z-index: 2000;
}

a.logo{
  display: block;
  width: 40px;
  height: 40px;
}
p.hamburger{
  padding: 14px 3.5px 13px;
  font-size: 68.8%;
  font-weight: 700;
}
p.hamburger.delete{
  opacity: 0;
}
/* HOME共通 */
.btn{
  background-image: url(../images/obj-circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 74px auto 0;
  display: block;
  text-decoration: none;
  color: #1D1D1D;
}
.btn .btntxt {
  font-size: 81.3%;
  font-weight:700;
  padding-top: 10px;
}
.obj-line{
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}

.obj-line img{
  width: 100%;
  height: auto;
}
.obj-bline{
  width: 100%;
  height: auto;
}
.obj-bline img{
  width: 100%;
  height: auto;
}



/* home-top */

article.top{
  overflow: hidden;
}
article.top .obj-name{
  font-size: 108%;
  font-weight: 600;
  letter-spacing: 1.6em;
  text-align: center;
  margin: 34.2vh auto;
  animation: fade 2s ease;
  animation-duration: 3s;
  padding: 0 0 0 5%;
  box-sizing: border-box;
}
article.top .obj-name img{
  width: 100%;
  height: auto;
}
article.top .topline{
  width: 100%;
  height: 2px;
  background-color: #1D1D1D;
  animation: anime 2s ease;

}
article.top .hwrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10.9vh;
  background-color: #fff;
  background-image:
    radial-gradient(#b0b0b0 20%, transparent 20%),
    radial-gradient(#b0b0b0 20%, transparent 20%);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
}

article.top .obj-harmo{
  width: 74.6vw;
  max-width: 500px;
  height: auto;
}
article.top .obj-harmo img{
  width: 100%;
  height: auto;
}
@keyframes sliderAnimation {
  100% {
    transform: translateX(-50%);
  }
}
.autoplay-slider{
  display: flex;
  white-space: nowrap ;
  padding: 10px 0;
  min-width: 100%;
  width: min-content;
  background-color: #1D1D1D;
  animation: 45s linear infinite sliderAnimation;
}

.slide{
  display: block;
  margin: 0 5px 0 5px;
  position: relative;
} 

.slide span{
  font-size: 81.3%;
  font-weight: 600;
  color: #fff;
}

article.top .welwrap{
  position: relative;
}
article.top .welwrap .stxt{
  width: 1.7vw;
  position: absolute;
  top: 6px;
  left: 21.5vw;
}
article.top .welwrap .stxt img{
  width: 100%;
  height: auto;
}

article.top .objwelcome{
font-size: 12.5vw;
    font-weight: 700;
    margin: 7px auto;
    text-align: center;
    letter-spacing: -1px;
}




/* home-aboutme */

.homeaboutme{
  overflow: hidden;
  background-image: url(../images/obj-aboutme.svg);
  background-repeat: no-repeat;
  background-size:110%;
  background-position: center center;
  margin-top: -4vh;
}

.homeaboutme .abouttxtwrap{
  display: block;
  width: 95vw;
  position: relative;
  margin: 0 auto;
}
.homeaboutme .abouttxtwrap .abouttxt{
  width: 95vw;
  box-sizing: border-box;
  padding: 86px 10px;
  font-size: 67.9%;
  line-height: 3;
  text-align: center;
  color: #fff;
  background-color: #1D1D1D;
}
.homeaboutme .abouttxtwrap .abouttxt p{
  font-size:150%;
}
.abouttxtwrap.js-scroll-fall.is-animated .abouttxt{
  animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.homeaboutme .abouttxtwrap .name{
  font-family: "Ms Madi";
  color: #fff;
  font-size: 187.5%;
  position: absolute;
  bottom: 30px;
  right: 21px;
  transform: rotate(-13deg);
}

.btn.about{
  width: 133px;
  height: 41.5px;
}




/* home-skill */
.skill {
  margin-top: -4vh;
  position: relative;
  overflow: hidden;
}
.skill .skillobj{
  font-size: 16vw;
  font-weight: 700;
  position: absolute;
  transform: rotate(90deg);
  top: 58vw;
  right: -17vw;
  background-color: #fff;
  background-image:
    radial-gradient(#8f8f8f 20%, transparent 20%),
    radial-gradient(#8f8f8f 20%, transparent 20%);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
  -webkit-background-clip: text;
  color: transparent;
}
.skill div.js-scroll-fall.is-animated .skillobj{
animation: fade 1s .5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.skill .txt-wrap{
  width: 79.2vw;
  margin: 0 auto 70px;
  overflow: hidden;
}
.skill .txt-wrap h1{
  font-size:150%;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
}
.skill div.js-scroll-fall.is-animated h1{
  animation: ttlAprOut 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.skill div.js-scroll-fall.is-animated span {
  display: block;
  animation: ttlAprIn 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes ttlAprOut {
  0%{ transform: translate(-100%, 0); }
  100%{ transform: translate(0, 0); }
}
@keyframes ttlAprIn {
  0%{ transform: translate(100%, 0); }
  100%{ transform: translate(0, 0); }
}
.skill div.js-scroll-fall.is-animated .txt{
animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.skill .txt-wrap .txt{
  margin-top: 14px;
  font-size:93.8%;
  line-height: 2.2;
  font-weight: 400;
}
.skill .txt-wrap span.line{
  display: block;
  height: 1px;
  width: 100%;
  margin-top: 37px;
  background-color: #1D1D1D;

}
.skill .js-scroll-fall.is-animated .line{
  animation: anime 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes anime {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

.skill .txt-wrap h1:nth-child(2n+1),
.skill .txt-wrap h1:nth-child(2n){
  margin-top: 37px;
}
.skill .txt-wrap .iconswrap{
  display: flex;
  justify-content: space-between;
  width: 230px;
  margin-top: 37px;
  margin-bottom: 37px;
}
.skill .txt-wrap .iconswrap li{
  width: 29px;
  height: auto;
}
.skill .txt-wrap .iconswrap li img{
  width: 100%;
  height: auto;
}



/* home-works */
.homeworks {
  position: relative;
}

.homeworks h1{
  font-size: 8vh;
  transform: rotate(90deg);
  transform-origin: left top;
  position: absolute;
  top: 26vw;
  left: 16.5vw;
  text-decoration: none;
  color          : #1D1D1D;            /* 文字の色 */
}

.homeworks.js-scroll-fall.is-animated h1{
  animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.gridwrap{
  width: 80vw;
  margin-left: 16.9vw;
  display: grid;
  grid-template-columns: auto auto; 
  grid-template-rows:  40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw ; 
  gap: 12px 12px; 
  grid-template-areas: 
    "one one"
    "one one"
    "two three"
    "four five"
    "six six"
    "six six"
    "seven eight"
    "nine nine"
    "nine nine"; 
}
.gridwrap .card{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.gridwrap .card:active p::after{
  width: 100%;
  height: 100%;
  background: rgba( 255, 255, 255, 0.3 );
  backdrop-filter: blur( 10px );
  -webkit-backdrop-filter: blur( 10px );
}

.gridwrap .card p::before{
transition: .5s;
}

.gridwrap .card:active p::before{
  position: absolute;
  display: block;
    white-space: pre;
    text-align: center;
    line-height: 1.8;
    color: #1D1D1D;
    box-sizing: border-box;  

  }



.gridwrap .card:active p.one::before{
  content: "WEBSITE";
  padding-top: 45%;
}
.gridwrap .card:active p.mff::before{
  content: "LOGO";
  padding-top: 45%;
}
.gridwrap .card:active p.moch::before{
  content: "UI/UX";
  padding-top: 45%;
}
.gridwrap .card:active p.ji::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.roo::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.sfw::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.nfdt::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.sq::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.tft::before{
  content: "GRAPHIC";
  padding-top: 45%;
}



.gridwrap .card1 { 
  grid-area: one;
  background-image: url(../images/grid-one.jpg);
}
.gridwrap .card2{ 
  grid-area: two;
  background-image: url(../images/grid-mff.jpg);
 }
.gridwrap .card3 {
   grid-area: three;
   background-image: url(../images/grid-mochimon.jpg);
  }
.gridwrap .card4 {
   grid-area: four;
   background-image: url(../images/grid-jines.jpg);
  }
.gridwrap .card5 { 
  grid-area: five;
  background-image: url(../images/grid-roomclip.jpg);
 }
.gridwrap .card6{ 
  grid-area: six; 
  background-image: url(../images/grid-sfw.jpg);
}
.gridwrap .card7 {
   grid-area: seven;
   background-image: url(../images/grid-nfdt.jpg);
  }
.gridwrap .card8 {
   grid-area: eight;
   background-image: url(../images/grid-sqnz.jpg);
  }
.gridwrap .card9 { 
  grid-area: nine; 
  background-image: url(../images/grid-tft.jpg);
}
.btn.works{
  width: 112px;
  height: 41.5px;
}



/* home-contaact */
.homecontact .obj{
  display: block;
  width: 2px;
  height: 133px;
  margin: 0 auto;
  background-color: #1D1D1D;
}
.homecontact h3{
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
}




/* home-footer */

footer .adwrap{
  width: 100%;
  padding: 53.5px 0;
  background-color: #1D1D1D;
  display: flex;
  justify-content: center;
}
footer .adwrap .adress{
  text-decoration: none;
  color          : #1D1D1D;            /* 文字の色 */
  font-size      : 7.5vw;               /* 文字のサイズ */
  letter-spacing : 1px;                /* 文字間 */
  text-shadow    : 
       0.5px  0.5px 0px #ffffff,
      -0.5px  0.5px 0px #ffffff,
       0.5px -0.5px 0px #ffffff,
      -0.5px -0.5px 0px #ffffff,
       0.5px  0px 0px #ffffff,
       0px  0.5px 0px #ffffff,
      -0.5px  0px 0px #ffffff,
       0px -0.5px 0px #ffffff;  
}

footer .adress img{
  width: 100%;
  height: auto;
}
footer .objwrap{
  width: 100%;
  position: relative;
}
footer .objwrap::before{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 43px;
  left: 0;
  background-color: #1D1D1D;
}
footer .objwrap span{
  display: block;
  width: 2px;
  height: 89px;
  background-color: #1D1D1D;
  margin: 0 auto;
}
footer .copy{
  font-size: 87.5%;
  text-align: center;
  margin: 16px 0;
}














/* aboutme */
.abouttop{
  background: url(../images/obj-aboutme.svg) 50% 25% / 110% no-repeat;
}
.abouttop .mypic{
  width: 90vw;
  margin: 111px auto 0;
  height: auto;
  animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.abouttop .mypic img{
  width: 100%;
  height: auto;
}
.abouttop .aboutex{
  margin: 31px auto 0;
  width: 73vw;
  line-height: 2.66;
  text-align: center;
  font-size: 81.25%;
  font-weight: 400;
  animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.abouttop .aboutex h1{
  font-size: 130%;
}
.biography{
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}
.biography .objs{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: #1D1D1D;
  z-index: 1000;
}
.biography .objt{
  font-weight: 700;
  font-size: 25vw;
  position: absolute;
  bottom: -2%;
  left: -5%;
  height: auto;
  z-index: 50;
  color: #d0d0d0;
}

.area{
  overflow: hidden;
}
.wrap{
  display: flex;
  position: relative;
  z-index: 100;
}
.wrap .objf{
  position: absolute;
  top: 67vw;
  left: 0;
  width: 95%;
  height: 2px;
  background-color: #1D1D1D;
  z-index: 1200;
}
.item{
  width: 70%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.item h1{
  text-align: center;
  margin-top: 40vw;
}
.item .obj{
  display: block;
  position: relative;
  width: 2px;
  height: 90px;
  background-color: #1D1D1D;
  margin: 40px auto 0;
}
.item span{
  display: block;
  position: absolute;
  bottom: -4%;
  left: -116%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #1D1D1D;

}
.item h2{
  width: 80%;
  text-align: center;
  margin-top: 10vw;
  font-size: 120%;
  margin: 7vw auto 0;
  line-height: 1.5;
}
.item .ex{
  width: 80%;
  font-weight: 400;
  margin: 10px auto 0;
  line-height: 2.25;
  text-align: center;
}
.strength{
  background-color: #ffffff00;
  background-image:
    radial-gradient(#717171 20%, transparent 20%),
    radial-gradient(#717171 20%, transparent 20%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  padding-bottom: 70px;
}
.strength .txt-wrap .js-scroll-fall.is-animated h1{
  animation: ttlAprOut 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.strength .txt-wrap .js-scroll-fall.is-animated h1 span{
  display: block;
  animation: ttlAprIn 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.strength .txt-wrap{
  width: 84.8vw;
  margin: 0 auto;
  overflow: hidden;
}
.strength .txt-wrap .stline{
  display: block;
  width: 100%;
  height: 1px;
  background-color: #1D1D1D;
  margin-top:5px ;
}
.strength .js-scroll-fall.is-animated .stline{
  animation: anime 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.strength .txt-wrap .stline:last-child{
  margin-top:30px ;
}
.strength .txt-wrap h4{
  font-size: 93.75%;
  padding-top: 30px;
}
.strength .js-scroll-fall.is-animated h4{
  animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.strength .txt-wrap h4.firstn{
  padding-top: 131px;
}
.strength .txt-wrap h1{
  font-size: 162.5%;
  padding-top: 30px;
  line-height: 1.2;
  overflow: hidden;

}
.strength .txt-wrap .txt{
  font-size: 93.75%;
  font-weight: 400;
  line-height: 2;
  padding-top: 11px;
}
.strength .js-scroll-fall.is-animated .txt{
  animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  }
.btn.abpage{
  width: 100px;
  height: 39.5px;
}
.strength .txt-wrap h4,
.strength .txt-wrap h1,
.strength .txt-wrap .txt{
  margin-left: 3px;
}















/* WORKS */
.works{
  margin-bottom: 100px;
}
input[name="tab_btn"] {
	display: none;
}
ul.tabs{
  padding: 10px 15px;
    background-color: #1d1d1d;
	display: flex;
  width: 100%;
  margin: 100px auto 60px;
justify-content: space-between;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
}
ul.tabs li {
  font-size: 75%;
  color: #fff;
  display: block;
}
ul.tabs li label{
	display: block;
	transition: all .8s ease;
}
.tab_panels .panel_1,
.tab_panels .panel_2,
.tab_panels .panel_3,
.tab_panels .panel_4,
.tab_panels .panel_5,
.tab_panels .panel_6{
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all .8s ease;
}
#tab_all:checked ~ .tab_panels .panel_1,
#tab_website:checked ~ .tab_panels .panel_2,
#tab_uiux:checked ~ .tab_panels .panel_3,
#tab_graphic:checked ~ .tab_panels .panel_4,
#tab_logo:checked ~ .tab_panels .panel_5,
#tab_anime:checked ~ .tab_panels .panel_6
{
  height: auto;
	opacity: 1;
}
#tab_all:checked ~ ul.tabs li:first-child label,
#tab_website:checked ~ ul.tabs li:nth-child(2) label,
#tab_uiux:checked ~ ul.tabs li:nth-child(3) label,
#tab_graphic:checked ~ ul.tabs li:nth-child(4) label,
#tab_logo:checked ~ ul.tabs li:nth-child(5) label,
#tab_anime:checked ~ ul.tabs li:last-child label{
  color: #979797;
}

.works .gridwrap{
  width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto; 
  grid-template-rows:40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw; 
  gap: 12px 12px; 
  grid-template-areas: 
    "one one"
    "one one"
    "two three"
    "four five"
    "six six"
    "six six"
    "seven eight"
    "nine ten"
    "eleven eleven"
    "eleven eleven"
    "twelve thirt" 
    "fourt fift"
    "sixt sixt"
    "sixt sixt"
    "sevt eigt"; 
}

.gridwrap .card{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.12);

}

.gridwrap .card p::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
transition: .4s;
}
.gridwrap .card:active p::before{
  position: absolute;
    white-space: pre;
    text-align: center;
    line-height: 1.8;
    width: 100%;
    height: 100%;
    background: rgba( 255, 255, 255, 0.3 );
    box-shadow: 0 8px 32px 0 rgba(114, 114, 114, 0.37);
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    color: #1D1D1D;
    box-sizing: border-box;
    padding-top: 25%;
    
  }

.gridwrap .card:active p.one::before,
.gridwrap .card:active p.sfw::before,
.gridwrap .card:active p.tft::before{
position: absolute;
width: 100%;
height: 100%;
transition: .1s;
}

.gridwrap .card:active p.one::before{
  content: "WEBSITE";
}
.gridwrap .card:active p.mff::before{
  content: "LOGO";
}
.gridwrap .card:active p.moch::before{
  content: "UI/UX";
}
.gridwrap .card:active p.ji::before{
  content: "GRAPHIC";
}
.gridwrap .card:active p.roo::before{
  content: "GRAPHIC";
}
.gridwrap .card:active p.sfw::before{
  content: "GRAPHIC";
}
.gridwrap .card:active p.nfdt::before{
  content: "GRAPHIC";
}
.gridwrap .card:active p.sq::before{
  content: "GRAPHIC";
}
.gridwrap .card:active p.tft::before{
  content: "GRAPHIC";
}
.gridwrap .card:active p.sfda::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.truth::before{
  content: "WEBSITE";
  padding-top: 45%;
}
.gridwrap .card:active p.cafe::before{
  content: "WEBSITE";
  padding-top: 45%;
}
.gridwrap .card:active p.poled::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.ffein::before{
  content: "GRAPHIC";
  padding-top: 45%;
}
.gridwrap .card:active p.coco::before{
  content: "ANIMATION\AGRAPHIC";
  white-space: pre;
  padding-top: 32%;
}
.gridwrap .card:active p.mylogo::before{
  content: "GRAPHIC";
  padding-top: 45%;

}
.gridwrap .card:active p.rookie::before{
  content: "UI/UX";
  padding-top: 45%;

}
.gridwrap .card:active p.myworks::before{
  content: "ANIMATION";
  padding-top: 45%;

}

.gridwrap.one .card1 { 
  grid-area: one;
  background-image: url(../images/grid-one.jpg);
}
.gridwrap.one  .card2{ 
  grid-area: two;
  background-image: url(../images/grid-mff.jpg);
 }
.gridwrap.one  .card3 {
   grid-area: three;
   background-image: url(../images/grid-mochimon.jpg);
  }
.gridwrap.one  .card4 {
   grid-area: four;
   background-image: url(../images/grid-jines.jpg);
  }
.gridwrap.one  .card5 { 
  grid-area: five;
  background-image: url(../images/grid-roomclip.jpg);
 }
.gridwrap.one  .card6{ 
  grid-area: six; 
  background-image: url(../images/grid-sfw.jpg);
}
.gridwrap.one  .card7 {
   grid-area: seven;
   background-image: url(../images/grid-nfdt.jpg);
  }
.gridwrap.one  .card8 {
   grid-area: eight;
   background-image: url(../images/grid-sqnz.jpg);
  }
.gridwrap.one  .card9 { 
  grid-area: nine; 
  background-image: url(../images/grid-tft.jpg);
}
.gridwrap.one  .card10 { 
  grid-area: ten; 
  background-image: url(../images/grid-truth.jpg);
}
.gridwrap.one  .card11 { 
  grid-area: eleven; 
  background-image: url(../images/grid-sfda.jpg);
}
.gridwrap.one  .card12 { 
  grid-area: twelve; 
  background-image: url(../images/grid-cafe.jpg);
}
.gridwrap.one  .card13 { 
  grid-area: thirt; 
  background-image: url(../images/grid-poled.jpg);
}
.gridwrap.one  .card14 { 
  grid-area: fourt; 
  background-image: url(../images/grid-ffein.jpg);
}
.gridwrap.one  .card15 { 
  grid-area: fift; 
  background-image: url(../images/grid-coco.jpg);
}
.gridwrap.one  .card16 { 
  grid-area: sixt; 
  background-image: url(../images/grid-mylogo.jpg);
}
.gridwrap.one  .card17 { 
  grid-area: sevt; 
  background-image: url(../images/grid-rookie.jpg);
}
.gridwrap.one  .card18 { 
  grid-area: eigt; 
  background-image: url(../images/grid-myworks.jpg);
}



/* WORKS-website */
.works .gridwrap.two{
  width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto; 
  grid-template-rows:  40vw 40vw 40vw; 
  gap: 12px 12px; 
  grid-template-areas: 
    "one one"
    "one one"
    "two three";
}
.gridwrap.two .card1 { 
  grid-area: one;
  background-image: url(../images/grid-truth.jpg);
}
.gridwrap.two .card2 { 
  grid-area: two;
  background-image: url(../images/grid-one.jpg);
}
.gridwrap.two .card3 { 
  grid-area: three;
  background-image: url(../images/grid-cafe.jpg);
}
/* WORKS-uiux */
.works .gridwrap.three{
  width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto; 
  grid-template-rows:  40vw 40vw 40vw; 
  gap: 12px 12px; 
  grid-template-areas: 
    "one one"
    "one one"
    "two three";
}
.gridwrap.three .card1 { 
  grid-area: one;
  background-image: url(../images/grid-mochimon.jpg);
}
.gridwrap.three .card2 { 
  grid-area: two;
  background-image: url(../images/grid-rookie.jpg);
}
/*SP WORKS-graphic */
.works .gridwrap.four{
  width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto; 
  grid-template-rows:  40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw 40vw; 
  gap: 12px 12px; 
  grid-template-areas: 
  "one one"
  "one one"
  "two three"
  "four five"
  "six six"
  "six six"
  "seven eight "
  "nine nine"
  "nine nine"
  "ten elev";
}
.gridwrap.four .card1 { 
  grid-area: one;
  background-image: url(../images/grid-jines.jpg);
}
.gridwrap.four .card2 { 
  grid-area: two;
  background-image: url(../images/grid-roomclip.jpg);
}
.gridwrap.four .card3 { 
  grid-area: three;
  background-image: url(../images/grid-sfw.jpg);
}
.gridwrap.four .card4 { 
  grid-area: four;
  background-image: url(../images/grid-nfdt.jpg);
}
.gridwrap.four .card5 { 
  grid-area: five;
  background-image: url(../images/grid-sqnz.jpg);
}
.gridwrap.four .card6 { 
  grid-area: six;
  background-image: url(../images/grid-tft.jpg);
}
.gridwrap.four .card7 { 
  grid-area: seven;
  background-image: url(../images/grid-sfda.jpg);
}
.gridwrap.four .card8 { 
  grid-area: eight;
  background-image: url(../images/grid-poled.jpg);
}
.gridwrap.four .card9 { 
  grid-area: nine;
  background-image: url(../images/grid-ffein.jpg);
}
.gridwrap.four .card10 { 
  grid-area: ten;
  background-image: url(../images/grid-coco.jpg);
}
/* SP WORKS-logo */
.works .gridwrap.five{
  width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto; 
  grid-template-rows:  40vw 40vw 40vw 40vw; 
  gap: 12px 12px; 
  grid-template-areas: 
    "one one"
    "one one"
    "two three";
}
.gridwrap.five .card1 { 
  grid-area: one;
  background-image: url(../images/grid-mff.jpg);
}
.gridwrap.five .card2 { 
  grid-area: two;
  background-image: url(../images/grid-mylogo.jpg);
}
/* SP WORKS-Animation */
.works .gridwrap.six{
  width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto; 
  grid-template-rows:  40vw 40vw 40vw 40vw; 
  gap: 12px 12px; 
  grid-template-areas: 
    "one one"
    "one one"
    "two three";
}
.gridwrap.six .card1 { 
  grid-area: one;
  background-image: url(../images/grid-coco.jpg);
}
.gridwrap.six .card2 { 
  grid-area: two;
  background-image: url(../images/grid-myworks.jpg);
}












/* WORKS-page-site-one */
.sitepagetop.one{
  background: url(../images/page-one-bg.jpg) left center / cover no-repeat;
}
.sitepagetop .sitemockwrap{
  padding-top: 91px;
}
.sitepagetop .mock{
  animation: fade 2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.sitepagetop .sitemockwrap .txtwrap{
  width: 88vw;
  margin: 39px auto 0;
  padding-bottom: 77px;
  color: white;
}
.sitepagetop .sitemockwrap .txtwrap h1{
  font-size: 150%;
  font-weight: 500;
}
.sitepagetop .sitemockwrap .txtwrap h2{
  font-size: 81.25%;
  font-weight: 500;
  margin-top: 20px;
}
.sitepagetop .sitemockwrap .txtwrap h2:first-child{
  margin-top: 25px;
}
.sitepagetop .sitemockwrap .txtwrap p{
  margin-top: 6px;
  line-height: 1.5;
}
.sitepagetop .sitemockwrap .txtwrap p.jp{
font-weight: 400;
}

.sitepagetop .sitemockwrap .txtwrap p:last-child{
  margin-top: 33px;
  font-size: 81.25%;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sitepagetop .sitemockwrap .txtwrap .skl{
  margin-top: 25px;
}
.sitepagetop .sitemockwrap .txtwrap .skl div{
  display: flex;
  margin-top: 3px;
}
.sitepagetop .sitemockwrap .txtwrap .skl div .sk{
  margin-top: 0;
  font-size: 81.25%;
    width: 86px;
    margin-right: 5px;
}
.sitepagetop .sitemockwrap .txtwrap .skl div .jp{
  margin-top: 0;
}
.sitepagetop .sitemockwrap .txtwrap .linkb{
  display: block;
  text-decoration: none;
  margin-top: 10px;
  font-size: 93.75%;
  padding: 11px 14px;
  border-radius: 2px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.sitepagetop.one .sitemockwrap .txtwrap .linkb{
  color: #737373;
  background-color: #fff;
}
.sitepagetop .sitemockwrap p.mock{
  width: 94.3vw ;
  height: auto;
  margin: 0 auto;
}
.sitepagetop .sitemockwrap p.mock img{
  width: 100% ;
  height: auto;
}

.sitepagepic .sitepicwrap li{
  width: 78vw ;
  height: auto;
}
.sitepagepic .sitepicwrap li img{
  width: 100% ;
  height: auto;
}
.recowrap li{
  width: 70vw;
  height: auto;
}
.recowrap li img{
  width: 100%;
  height: auto;
}

.sitepageex .txtwrap{
  width: 77.8vw;
  margin: 0 auto;
  padding: 55px 0;
}
.sitepageex.one{
  background-color:#737373;
}
.sitepageex.one .txtwrap h2,
.sitepageex.one .txtwrap p{
  color: #fff;
}
.sitepageex .txtwrap h2{
  font-size: 81.25%;
  font-weight: 700;
  margin-top: 30px;
}
.sitepageex .txtwrap h2:first-child{
  margin-top: 0px;
}
.sitepageex .txtwrap p{
  font-size: 93.75%;
  font-weight: 400;
  margin-top: 10px;
  line-height: 2.13;
}



.sitepageall{
  height: auto;
}
.sitepageall .thumbnail {
  width: 100%;
}
.sitepageall .thumbnail img{
  width: 100%;
  height: auto;
}



.sitepagepic .sitepicwrap {
  margin-top: 100px;
}
.sitepagepic .sitepicwrap li{
  width: 78.1vw;
  height: auto;
  margin: 0 auto;
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.1)
}
.sitepagepic .sitepicwrap li img{
  width: 100%;
  height: auto;
}
.sitepagepic .sitepicwrap li:last-child{
  margin-top: 70px;
}
.btn.page{
  width: 110px;
  height: 41.5px;
}
.otherworks{
  background: #A9A9A9;
  margin-top: 100px;
padding: 68px 0;
}
.otherworks h2{
  font-size: 125%;
  text-align: center;
}

.othwrap{
  margin: 0 auto;
  width: 70vw;
}
.othwrap li:first-child{
  margin-top: 40px;
}
.othwrap li:nth-child(2n),
.othwrap li:last-child{
  margin-top: 30px;
}
.othwrap li{
width: 70vw;
height: 70vw;
}

.othwrap li.btn01 {
  background: url(../images/grid-nfdt.jpg) center center / 100% no-repeat;
}
.othwrap li.btn02 {
  background: url(../images/grid-coco.jpg) center center / 100% no-repeat;
}
.othwrap li.btn03 {
  background: url(../images/grid-mff.jpg) center center / 100% no-repeat;
}
.othwrap li.btn04 {
  background: url(../images/grid-mochimon.jpg) center center / 100% no-repeat;
}
.othwrap li.btn05 {
  background: url(../images/grid-poled.jpg) center center / 100% no-repeat;
}
.othwrap li.btn06 {
  background: url(../images/grid-cafe.jpg) center center / 100% no-repeat;
}
.othwrap li.btn07 {
  background: url(../images/grid-ffein.jpg) center center / 100% no-repeat;
}
.othwrap li.btn08 {
  background: url(../images/grid-jines.jpg) center center / 100% no-repeat;
}
.othwrap li.btn09 {
  background: url(../images/grid-mylogo.jpg) center center / 100% no-repeat;
}
.othwrap li.btn10 {
  background: url(../images/grid-myworks.jpg) center center / 100% no-repeat;
}
.othwrap li.btn11 {
  background: url(../images/grid-one.jpg) center center / 100% no-repeat;
}
.othwrap li.btn12 {
  background: url(../images/grid-rookie.jpg) center center / 100% no-repeat;
}
.othwrap li.btn13 {
  background: url(../images/grid-roomclip.jpg) center center / 100% no-repeat;
}
.othwrap li.btn14 {
  background: url(../images/grid-sfda.jpg) center center / 100% no-repeat;
}
.othwrap li.btn15 {
  background: url(../images/grid-sfw.jpg) center center / 100% no-repeat;
}
.othwrap li.btn16 {
  background: url(../images/grid-sqnz.jpg) center center / 100% no-repeat;
}
.othwrap li.btn17 {
  background: url(../images/grid-tft.jpg) center center / 100% no-repeat;
}
.othwrap li.btn18 {
  background: url(../images/grid-truth.jpg) center center / 100% no-repeat;
}
.othwrap li a{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.othwrap li a:active{
  width: 100%;
  height: 100%;
  background: rgba( 255, 255, 255, 0.3 );
  backdrop-filter: blur( 10px );
  -webkit-backdrop-filter: blur( 10px );
}
.othwrap a p {
  color: #1d1d1d;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.othwrap li a:active p {
  opacity: 1;   
  transition: .1s;
}





























/* WORKS-page-site-truth */
.sitepagetop.truth{
  background: url(../images/page-truth-bg.jpg) left center / cover no-repeat;
}
.sitepagetop.truth .sitemockwrap .txtwrap .linkb{
  color: #FF4219;
  background-color: #fff;
}
.sitepageex.truth{
  background-color:#fff;
}
.sitepageex.truth .txtwrap h2,
.sitepageex.truth .txtwrap p{
  color: #0065BF;
}














/* WORKS-page-site-cafe */
.sitepagetop.cafe{
  background: url(../images/page-cafe-bg.jpg) left center / cover no-repeat;
}
.sitepagetop.cafe .sitemockwrap .txtwrap {
  color: #242424;
}
.sitepagetop.cafe .sitemockwrap .txtwrap .linkb{
  color: #fff;
  background-color: #242424;
}
.sitepageex.cafe{
  background-color:#242424;
}
.sitepageex.cafe .txtwrap h2,
.sitepageex.cafe .txtwrap p{
  color: #fff;
}














/* WORKS-page-site-nfdt */
.sitepagetop.smarphone{
  background-color: #fff;
}
.sitepagetop.nfdt .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.nfdt .sitemockwrap .txtwrap .linkb{
  color: #1D1D1D;
  background-color: #E3FE33;
}
.sitepageex.nfdt{
  background-color:#242424;
}
.sitepagetop.nfda .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.nfdt .txtwrap h2,
.sitepageex.nfdt .txtwrap p{
  color: #fff;
}
.sitepagetop .sitemockwrap p.smarphone{
  width: 100vw ;
  height: auto;
  margin: 0 auto;
}
.postpic .postpicwrap.first {
  margin-top: 100px;
}
.postpic .postpicwrap li{
  width: 78.1vw;
  height: auto;
  margin: 40px auto 0;
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.1)
}
.postpic .postpicwrap li img{
  width: 100%;
  height: auto;
}
.sitepagetop.nfdt .sitemockwrap .txtwrap p:last-child{
  width: 89%;
}















/* WORKS-page-site-sfda */
.sitepagetop.sfda .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.sfda .sitemockwrap .txtwrap .linkb{
  color: #fff;
  background-color: #006835;
}
.sitepageex.sfda{
  background-color:#006835;
}
.sitepagetop.sfda .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.sfda .txtwrap h2,
.sitepageex.sfda .txtwrap p{
  color: #fff;
}
.sitepagetop.sfda .sitemockwrap .txtwrap p:last-child{
  width: 89%;
}













/* WORKS-page-site-sfw */
.sitepagetop.sfw .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.sfw .sitemockwrap .txtwrap .linkb{
  color: #fff;
  background-color: #1EB9B3;
}
.sitepageex.sfw{
  background-color:#1EB9B3;
}
.sitepagetop.sfw .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.sfw .txtwrap h2,
.sitepageex.sfw .txtwrap p{
  color: #fff;
}
.sitepagetop.sfw .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}















/* WORKS-page-site-mff */
.sitepagetop.mff{
  background: url(../images/page-mff-bg.jpg) left bottom / cover no-repeat;
}
.sitepagetop.mff .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.mff .sitemockwrap .txtwrap .linkb{
  color: #fff;
  background-color: #2E6470;
}
.sitepageex.mff{
  background-color:#2E6470;
}
.sitepagetop.mff .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.mff .txtwrap h2,
.sitepageex.mff .txtwrap p{
  color: #fff;
}
.sitepagetop.mff .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}
.postpic .mffb{
  margin: 40px auto 0;
  width: 78.1vw;
  height: auto;
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.1)
}
.postpic .mffb img{
  width: 100%;
  height: auto;
}
.sitepagetop.mff .sitemockwrap .txtwrap p:last-child{
  width: 62%;
}












/* WORKS-page-site-jines */
.sitepagetop.jines .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepageex.jines{
  background-color:#8BA676;
}
.sitepagetop.jines .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.jines .txtwrap h2,
.sitepageex.jines .txtwrap p{
  color: #fff;
}















/* WORKS-page-site-threefourtome */
.sitepagetop.tft .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepageex.tft{
  background-color:#7B6785;
}
.sitepagetop.tft .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.tft .txtwrap h2,
.sitepageex.tft .txtwrap p{
  color: #fff;
}















/* WORKS-page-site-sequenz */
.sitepagetop.sqnz .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepageex.sqnz{
  background-color:#0250A2;
}
.sitepagetop.sqnz .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.sqnz .txtwrap h2,
.sitepageex.sqnz .txtwrap p{
  color: #fff;
}














/* WORKS-page-site-ffein */
.sitepagetop.ffein .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepageex.ffein{
  background-color:#737373;
}
.sitepagetop.ffein .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.ffein .txtwrap h2,
.sitepageex.ffein .txtwrap p{
  color: #fff;
}















/* WORKS-page-site-poled */
.sitepagetop.poled .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.poled .sitemockwrap .txtwrap .linkb{
  color: #fff;
  background-color: #CEA497;
}
.sitepageex.poled{
  background-color:#CEA497;
}
.sitepagetop.poled .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.poled .txtwrap h2,
.sitepageex.poled .txtwrap p{
  color: #fff;
}
.sitepagetop.poled .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}
















/* WORKS-page-site-roomclip */
.sitepagetop.room .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.room .sitemockwrap .txtwrap .linkb{
  color: #fff;
  background-color: #ACACAC;
}
.sitepageex.room{
  background-color:#ACACAC;
}
.sitepagetop.room .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.room .txtwrap h2,
.sitepageex.room .txtwrap p{
  color: #fff;
}
.sitepagetop.room .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}















/* WORKS-page-site-mochimon */
.sitepagetop.mochimon{
  background: url(../images/page-mochimon-bg.jpg) center center / cover no-repeat;
}
.sitepagetop.mochimon .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.mochimon .sitemockwrap .txtwrap .linkb{
  color: #1D1D1D;
  background-color: #F6D83C;
}
.sitepagetop.poled .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}
.mochimon .mpic{
  width: 100%;
  height: auto;
}
.mochimon .mpic img{
  width: 100%;
  height: auto;
}










/* WORKS-page-site-mylogo */
.sitepagetop.mylogo .sitemockwrap p.smarphone {
  width: 50.4vw;
  height: auto;
  margin: 0 auto 80px auto;
}
.sitepagetop.mylogo .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepageex.mylogo{
  background-color:#01AA8F;
}
.sitepagetop.mylogo .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.mylogo .txtwrap h2,
.sitepageex.mylogo .txtwrap p{
  color: #fff;
}
.sitepagetop.mylogo .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}
.postpic.mylogo .postpicwrap li{
  margin: 90px auto 0;
  width: 59.5vw;
  height: auto;
  box-shadow: none;
}
.postpic .mylogo img{
  width: 100%;
  height: auto;
}









/* WORKS-page-site-rookie */
.sitepagetop.rookie .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepagetop.rookie .sitemockwrap .txtwrap .linkb{
  color: #1D1D1D;
  background-color: #15D33D;
}

.rookie .mpic{
  width: 100%;
  height: auto;
}
.rookie .mpic img{
  width: 100%;
  height: auto;
}









/* WORKS-page-site-myworks */
.sitepagetop.myworks .sitemockwrap p.smarphone {
  width: 94.3vw;
  height: auto;
  margin: 0;
}
.sitepagetop.myworks .sitemockwrap .txtwrap {
  color: #1D1D1D;
}
.sitepageex.myworks{
  background-color:#1D1D1D;
}
.sitepagetop.myworks .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.myworks .txtwrap h2,
.sitepageex.myworks .txtwrap p{
  color: #fff;
}
.sitepagetop.myworks .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}

.postpic.myworks video{
  margin-top: 100px;
}

.sitepagetop.myworks .sitemockwrap .txtwrap .skl div .sk {
    width: 98px;
}









/* WORKS-page-site-coco */
.sitepagetop.coco .sitemockwrap p.smarphone {
  width: 94.3vw;
  height: auto;
  margin: 0;
}
.sitepagetop.coco .sitemockwrap .txtwrap {
  color: #1D1D1D;
}

.sitepagetop.coco .sitemockwrap .txtwrap .linkb{
  color: #1D1D1D;
  background-color: #FFCC03;
}

.sitepageex.coco{
  background-color:#FFCC03;
}


.sitepagetop.coco .sitemockwrap .txtwrap h1 {
  line-height: 1.25;
}
.sitepageex.coco .txtwrap h2,
.sitepageex.coco .txtwrap p{
  color: #1d1d1d;
}
.sitepagetop.coco .sitemockwrap .txtwrap p:last-child{
  width: 95%;
}

.sitepagetop.coco .sitemockwrap .txtwrap .skl div .sk {
    width: 98px;
}






























/* PC用 */
@media only screen and (min-width:960px) {
	.sp{
    display: none;
  }
	.pc{
    display: block;
  }
  header{
  transition: all .4s ease;

  }
	.pnav .mainpnav{
    display: flex;
    width: 95%;
    justify-content: space-between;
    align-items: center ;
  }
	.pnav .mainpnav a.logo{
    display: block;
    text-align: center;
    width: 152px;
    height: 67px;
    padding: 14px 0;
    box-sizing: border-box;
    transition: .4s;
  }
	.pnav .mainpnav a.logo:hover{
    opacity: 50%;
  }
	.pnav{
    width: 100%;
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 6000;
  }
	.pnav p {
    text-align: center;
    width: 152px;
    height: 67px;
  }
	.pnav p:last-child {
    background: url(../images/obj-circle.svg) center center / contain no-repeat;
  }
	.pnav p a{
    text-align: center;
    padding: 24px 0;
    display: block;
    color: #1D1D1D;
    text-decoration: none;
    transition: .4s;
  }
	.pnav p a:hover{
    opacity: 50%;
  }
/* HOME共通 */
  .btn{
    margin: 85px auto 0;
  }
  .btn:hover .btntxt{
    opacity: 50%;
  }
  .btn .btntxt {
    font-size: 112.5%;
    font-weight:700;
    padding-top: 17px;
    text-align: center;
    transition: .4s;

  }
  .obj-line.pc{
    width: 100%;
    height: auto;
}
.obj-bline.pc{
  width: 100%;
  height: auto;
}
/* home-top */
  article.top .obj-name.pc{
    font-size: 120%;
    letter-spacing: 2em;
    text-align: center;
    margin: 17vw auto ;
    padding: 0 0 0 2.5vw;

  }
  article.top .hwrap{
    height: 10.8vw;
  }
  article.top .obj-harmo{
    width: 49.6vw;
    max-width: 1000px;
  }
  .autoplay-slider{
    padding: 25px 0;
  }
  .slide span{
    font-size: 131.25%;
  }

  article.top .objwelcome {
    font-size: 13vw;
    font-weight: 700;
    margin: 18px auto 15px;
    text-align: center;
    letter-spacing: -6px;
}
  .homeaboutme .abouttxtwrap{
    width: 576px;
  }
  /* home-aboutme */
  .homeaboutme{
    margin-top: -6vh;
    background-size: 108%;
    background-position: center 40%;
  }
  .homeaboutme .abouttxtwrap .abouttxt{
    width: 611px;
    padding: 55px 37px;
    font-size:87.5%;
    line-height: 3.2;
  }
  .homeaboutme .abouttxtwrap .abouttxt p{
    font-size:150%;
  }
  .btn.about{
    width: 202px;
    height: 67.5px;
  }


  /* home-skill */
  .skill {
    margin-top: -6vh;
  }
  .skill .skillobj{
    top: 30vw;
  }
  .skill .txt-wrap{
    width: 832px;
    margin: 0 auto;
  }
  .skill .txt-wrap h1{
    font-size:250%;
  }
  .skill .txt-wrap .txt{
    margin-top: 16px;
    font-size:100%;
    line-height: 2.5;
  }
  .skill .txt-wrap span{
    margin-top: 50px;
  }
  .skill .txt-wrap h1:nth-child(2n+1),
  .skill .txt-wrap h1:nth-child(2n){
    margin-top: -9px;
  }
  .skill .txt-wrap .iconswrap{
    width: 290px;
    margin-top: 50px;
    margin-bottom: 0;
  }
  .skill .txt-wrap .iconswrap li{
    width: 36px;
  }
/* home-works */

  .homeworks h1{
    font-size: 13vw;
    top: 21vw;
    left: 14.5vw;
      /* text-shadow    : 
           3px  3px 0px #1D1D1D,
          -3px  3px 0px #1D1D1D,
           3px -3px 0px #1D1D1D,
          -3px -3px 0px #1D1D1D,
           3px  0px 0px #1D1D1D,
           0px  3px 0px #1D1D1D,
          -3px  0px 0px #1D1D1D,
           0px -3px 0px #1D1D1D;   */
  }
  .gridwrap{
    width: 66vw;
    margin: 120px auto 0;
    display: grid;
    grid-template-columns: 22vw 22vw 22vw ; 
    grid-template-rows:  22vw 22vw 22vw 22vw 22vw   ; 
    gap: 20px 20px; 
    grid-template-areas: 
      "one one two "
      "one one three "
      "four five six "
      "seven nine nine"
      "eight nine nine"; 
  }

  .gridwrap .card:hover p::before{
    white-space: pre;
    text-align: center;
    line-height: 1.8;
    color: #1D1D1D;
    font-size: 120%;
    z-index: 30;
  }
  .gridwrap .card p::after{
    content: "";
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba( 255, 255, 255, 0.3 );
    opacity: 0;
  }
  .gridwrap .card:hover p::after{
    opacity: 1;
    background: rgba( 255, 255, 255, 0.3 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
  }

  .gridwrap .card:hover p.one::before,
  .gridwrap .card:hover p.sfw::before,
  .gridwrap .card:hover p.tft::before{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: .1s;
  }

  .gridwrap .card:hover p.one::before{
    content: "WEBSITE";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.mff::before{
    content: "LOGO";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.moch::before{
    content: "UI/UX";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.ji::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.roo::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.sfw::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.nfdt::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.sq::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.tft::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }

  .btn.works{
    width: 187px;
    height: 67.5px;
  }
  /* home-contaact */
  .homecontact .obj{
    width: 4px;
    height: 145px;
  }
  .homecontact h3{
    font-size: 187.5%;
  }
  /* home-footer */
  footer .adwrap .adress{
    transition: .4s;
  }
  footer .adwrap .adress{
    text-decoration: none;
    color          : #1D1D1D;            /* 文字の色 */
    font-size      : 7.5vw;               /* 文字のサイズ */
    letter-spacing : 0px;                /* 文字間 */
    text-shadow    : 
         1px  1px 0px #ffffff,
        -1px  1px 0px #ffffff,
         1px -1px 0px #ffffff,
        -1px -1px 0px #ffffff,
         1px  0px 0px #ffffff,
         0px  1px 0px #ffffff,
        -1px  0px 0px #ffffff,
         0px -1px 0px #ffffff;  
  }
  footer .adwrap:hover .adress{
    color: white;
  }
  footer .objwrap::before{
    height: 3px;
    top: 51.5px;
  }
  footer .objwrap span{
    width: 3px;
    height: 103px;
  }
  footer .copy{
    font-size: 87.5%;
    margin: 24px 0;
  }















  /* aboutme */
  .abouttop{
    background: url(../images/obj-aboutme.svg) 50% 0% / 108% no-repeat;
  }
  .abouttop .mypic{
    width: 46.7vw;
    max-width: 600px;
    margin: 200px auto 0;
  }
  .abouttop .aboutex{
    margin: 50px auto 0;
    width: 46.7vw;
    max-width: 420px;
    line-height: 2.66;
    font-size: 100%;
  }
  .biography{
    margin-top: 150px;
  }
  .wrap .objf{
    position: absolute;
    top: 19vw;
    width: 100%;
  }
  .item{
    width: 100px;
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  .item h1{
    text-align: center;
    margin-top: 160px;
    
  }
  .strength{
    padding-bottom: 170px;
  }
  .strength .txt-wrap{
    width: 87.4vw;
    max-width: 1119px;
    margin: 0 auto;
  }
  .strength .txt-wrap .stline{
    margin-top:7px ;
  }
  .strength .txt-wrap .stline.tight{
    width: 85%;
    min-width: 850px;

  }
  .strength .txt-wrap .stline:last-child{
    margin-top:40px ;
  }
  .strength .txt-wrap h4{
    font-size: 125%;
    padding-top: 40px;
  }
  .strength .txt-wrap h4.firstn{
    padding-top: 150px;
  }
  .strength .txt-wrap h1{
    font-size: 468.75%;
    padding-top: 40px;
    line-height: 1.2;
  }
  .strength .txt-wrap .txt{
    width: 795px;
    font-size: 100%;
    line-height: 2.5;
    padding-top: 11px;
  }
  .btn.abpage{
    width: 134px;
    height: 67.5px;
  }
  .strength .txt-wrap h4,
  .strength .txt-wrap h1,
  .strength .txt-wrap .txt{
    margin-left: 6px;
  }
















/* PC WORKS */
  ul.tabs{
    padding: 0 25px;
    width: 720px;
    margin: 235px auto 100px 10vw;
  justify-content: space-around;
  }
  ul.tabs li {
    font-size: 100%;
    width: 112px;
    text-align: center;
  }
  ul.tabs li label{
    cursor: pointer;
    padding: 10px ;
  }
  .works .gridwrap{
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw; 
    grid-template-rows:  20vw 20vw 20vw 20vw 20vw 20vw ; 
    gap: 12px 12px; 
    grid-template-areas: 
      "one one two three"
      "one one four five"
      "six seven eight nine"
      "ten eleven fourt fourt"
      "twelve thirt fourt fourt"
      "fift sixt sevt eigt"; 
  }

  .gridwrap .card:hover p.sfda::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.truth::before{
    content: "WEBSITE";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.cafe::before{
    content: "WEBSITE";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.poled::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.ffein::before{
    content: "GRAPHIC";
    padding-top: 45%;
  }
  .gridwrap .card:hover p.coco::before{
    content: "ANIMATION\AGRAPHIC";
    white-space: pre;
    padding-top: 37%;
  }
  .gridwrap .card:hover p.mylogo::before{
    content: "GRAPHIC";
    padding-top: 45%;
  
  }
  .gridwrap .card:hover p.rookie::before{
    content: "UI/UX";
    padding-top: 45%;
  
  }
  .gridwrap .card:hover p.myworks::before{
    content: "ANIMATION";
    padding-top: 45%;
  
  }

  /* PC WORKS-website */
  .works .gridwrap.two{
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw; 
    grid-template-rows: 20vw 20vw; 
    gap: 12px 12px; 
    grid-template-areas: 
      "one one two three"
      "one one fourn five";
  }
  /* PC WORKS-uiux */
  .works .gridwrap.three{
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw; 
    grid-template-rows: 20vw 20vw; 
    gap: 12px 12px; 
    grid-template-areas: 
      "one one two three"
      "one one fourn five";
  }
  /* PC WORKS-graphic */
  .works .gridwrap.four{
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw; 
    grid-template-rows:  20vw 20vw 20vw 20vw; 
    gap: 12px 12px; 
    grid-template-areas: 
      "one one two three"
      "one one four five"
      "six seven eight nine"
      "ten ele twe thirth"; 
  }
  .gridwrap.four .card8 { 
    grid-area: eight;
    background-image: url(../images/grid-poled.jpg);
  }
  .gridwrap.four .card9 { 
    grid-area: nine;
    background-image: url(../images/grid-ffein.jpg);
  }
  /*PC WORKS-logo */
  .works .gridwrap.five{
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw; 
    grid-template-rows:  20vw 20vw 20vw   ; 
    gap: 12px 12px; 
    grid-template-areas: 
      "one one two three"
      "one one four five"
  }
  /*PC WORKS-animation */
  .works .gridwrap.six{
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw; 
    grid-template-rows:  20vw 20vw 20vw   ; 
    gap: 12px 12px; 
    grid-template-areas: 
      "one one two three"
      "one one four five"
  }















  .sitepagetop.one{
    background: url(../images/page-one-bg.jpg) center center / cover no-repeat;
  }
  .sitepagetop .sitemockwrap{
    padding-top: 200px;
    padding-bottom: 118px;
    margin: 0 auto 0  2vw;
    width: 91%;
    display: flex;
    align-items: center;
  }
  .sitepagetop .sitemockwrap p.mock{
    width: 59.2vw;
    /* max-width: 790px; */
    height: auto;
    margin: 0 ;
  }
  .sitepagetop .sitemockwrap .mock img{
    width: 100%;
    height: auto;
  }
  .sitepagetop .sitemockwrap .txtwrap{
    width: 396px;
    margin: 0 0 0 5%;
    padding-bottom: 0;
  }
  .sitepagetop .sitemockwrap .txtwrap h1{
    font-size: 200%;
  }
  .sitepagetop .sitemockwrap .txtwrap h2{
    font-size: 93.75%;
    margin-top: 23px;
  }
  .sitepagetop .sitemockwrap .txtwrap h2:first-child{
    margin-top: 55px;
  }
  .sitepagetop .sitemockwrap .txtwrap .linkb{
    transition: .5s;
  }
  .sitepagetop.one .sitemockwrap .txtwrap .linkb:hover{
    color: #fff;
    background-color: #737373;
  }
  .sitepageex .txtwrap{
    width: 51.4vw;
    max-width: 659px;
    margin: 0 auto 0 5%;
    padding: 120px 0;
  }

  .sitepageex .txtwrap h2{
    font-size: 93.75%;
    margin-top: 30px;
  }
  .sitepageex .txtwrap h2:first-child{
    margin-top: 0px;
  }
  .sitepageex .txtwrap p{
    font-size: 93.75%;
    font-weight: 500;
    margin-top: 10px;
    line-height: 2.13;
  }
  .sitepageex .txtwrap p.jp{
    font-weight: 400;
  }
  .sitepageall{
    height: 80%;
  }
  .sitepagepic .sitepicwrap {
    margin-top: 150px;

    display: flex;
    justify-content: space-between;
    width: 75vw;
    margin-left: auto;
    margin-right: auto;
  }
  .sitepagepic .sitepicwrap li{
    width: 52.2vw;
    height: auto;
    margin: 0 ;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.1)
  }
  .sitepagepic .sitepicwrap li:last-child{
    width: 15.3vw;
    margin-top: 0;
  }
  .btn.page{
    width: 152px;
    height: 57.5px;
    margin-top: 70px;
    margin-bottom: 0;
  }
  .otherworks{
    background: #A9A9A9;
    margin-top: 200px;
    padding: 100px 0;
  }
  .otherworks h2{
    font-size: 150%;
    text-align: center;
    margin-bottom: 50px;
  }

  .othwrap{
    margin: 0 auto;
    width: 70vw;
    display: flex;
    justify-content: space-between;
  }
  .othwrap li:first-child{
    margin-top: 0;
  }
  .othwrap li:nth-child(2n),
  .othwrap li:last-child{
    margin-top: 0;
  }
  .othwrap li{
  width: 22vw;
  height: 22vw;
  }

  .othwrap li.btn01 {
    background: url(../images/grid-nfdt.jpg) center center / 100% no-repeat;
  }
  .othwrap li.btn02 {
    background: url(../images/grid-coco.jpg) center center / 100% no-repeat;
  }
  .othwrap li.btn03 {
    background: url(../images/grid-mff.jpg) center center / 100% no-repeat;
  }
  .othwrap li a{
    display: block;
    width: 100%;
    height: 100%;
    
  }
  .othwrap li a:hover{
    width: 100%;
    height: 100%;
    background: rgba( 255, 255, 255, 0.3 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
  }
  .othwrap a p {
    font-size: 120%;
    color: #1d1d1d;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .othwrap li a:hover p {
    opacity: 1;   
    transition: .5s;
  } 













  /* PC WORKS-page-site-truth */
  .sitepagetop.truth{
    background: url(../images/page-truth-bg.jpg) center center / cover no-repeat;
  }
  .sitepagetop.truth .sitemockwrap .txtwrap .linkb:hover{
    color: #fff;
    background-color: #FF4219;
  }















  /* PC WORKS-page-site-cafe */
  .sitepagetop.cafe{
    background: url(../images/page-cafe-bg.jpg) center center / cover no-repeat;
  }
  .sitepagetop.cafe .sitemockwrap .txtwrap .linkb:hover{
    color: #242424;
    background-color: #fff;
  }














  /* WORKS-page-site-nfdt */
  .sitepagetop.nfdt .sitemockwrap .txtwrap .linkb:hover{
    color: #E3FE33;
    background-color: #1D1D1D;
  }
  .sitepagetop.nfdt .sitemockwrap .txtwrap p:last-child {
    width: 77%;
  }
  .postpic .postpicwrap {
    width: 70vw;
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 100px auto 0;
  }
  .postpic .postpicwrap li:nth-child(3),
  .postpic .postpicwrap li:nth-child(4){
    margin-top: 7vw;
  }
  .postpic .postpicwrap li{
    width: 31.2vw;
    max-width: 600px;
    height: auto;
    margin: 0;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.1)
  }
  .postpic .postpicwrap.first {
    margin-top: 200px;
  }
















  /* WORKS-page-site-sfda */
  .sitepagetop.sfda .sitemockwrap .txtwrap {
    color: #1D1D1D;
  }
  .sitepagetop.sfda .sitemockwrap .txtwrap .linkb:hover{
    color: #006835;
    background-color: #b0b0b0;
  }
  .sitepagetop.sfda .sitemockwrap .txtwrap p:last-child{
    width: 77%;
  }















  /* WORKS-page-site-sfw */
  .sitepagetop.sfw .sitemockwrap .txtwrap {
    color: #1D1D1D;
  }
  .sitepagetop.sfw .sitemockwrap .txtwrap .linkb:hover{
    color: #1EB9B3;
    background-color: #fff;
  }
  .sitepagetop.sfw .sitemockwrap .txtwrap p:last-child{
    width: 81%;
  }















  /* WORKS-page-site-mff */
  .sitepagetop.mff{
    background: url(../images/page-mff-bg.jpg) center center / cover no-repeat;
  }
  .sitepagetop.mff .sitemockwrap .txtwrap .linkb:hover{
    color: #2E6470;
    background-color: #fff;
  }
  .sitepagetop.mff .sitemockwrap .txtwrap p:last-child{
    width: 54%;
  }
  .postpic.mff{
    margin-top: 150px ;
  }
  .postpic .mffb{
    margin: 64px auto 0;
    width: 35vw;

  }
  .mff.postpic .postpicwrap li{
    max-width: 470px;
  }
  .postpic.mff .postpicwrap.second{
    margin-top: 67px;
  }














  /* WORKS-page-site-jines */
  .postpic.jines .postpicwrap li:nth-child(5),
  .postpic.jines .postpicwrap li:nth-child(6),
  .postpic.jines .postpicwrap li:nth-child(7),
  .postpic.jines .postpicwrap li:nth-child(8){
    margin-top: 7vw;
  }














  /* WORKS-page-site-threefourtome */
  .postpic.tft .postpicwrap {
    width: 80%;
    max-width: 1280px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 222px auto 0;
  }
  .postpic.tft{
    margin-top: 150px;
  }
  .postpic.tft .postpicwrap li{
    width: 22.4vw;
    max-width: 500px;
    height: auto;
    margin-right: 0;
  }

  .postpic.tft .postpicwrap li:nth-child(3), 
  .postpic.tft .postpicwrap li:nth-child(4), 
  .postpic.tft .postpicwrap li:nth-child(5), 
  .postpic.tft .postpicwrap li:nth-child(6), 
  .postpic.tft .postpicwrap li:nth-child(7), 
  .postpic.tft .postpicwrap li:nth-child(8) {
    margin-top: 7vw;
  }
  .postpic.tft .postpicwrap li:nth-child(3){
    margin-right: 0;
    margin-top: 0;
  }
  .postpic.tft .postpicwrap li:nth-child(6) {
    margin-right: 0;
  }
  .postpic.tft .postpicwrap li:last-child {
    box-shadow: none;
  }
















/* WORKS-page-site-sequenz */
.postpic.sqnz .postpicwrap {
  width: 67vw;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 222px auto 0;
}
.postpic.sqnz .postpicwrap.second{
  margin-top: 7vw;
}
.postpic.sqnz .postpicwrap li:nth-child(3), 
.postpic.sqnz .postpicwrap li:nth-child(4), 
.postpic.sqnz .postpicwrap li:nth-child(5), 
.postpic.sqnz .postpicwrap li:nth-child(6) {
  margin-top: 7vw;
}














  /* WORKS-page-site-ffein */
  .postpic.ffein .postpicwrap {
    width: 67vw;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 222px auto 0;
  }
  .postpic.ffein .postpicwrap.second{
    margin-top: 7vw;
  }
  .postpic.ffein .postpicwrap li:nth-child(3), 
  .postpic.ffein .postpicwrap li:nth-child(4), 
  .postpic.ffein .postpicwrap li:nth-child(5), 
  .postpic.ffein .postpicwrap li:nth-child(6) {
    margin-top: 7vw;
  }
















  /* PC WORKS-page-site-poled */
  .sitepagetop.poled .sitemockwrap .txtwrap .linkb:hover{
    color: #CEA497;
    background-color: #fff;
  }
  .postpic.poled .postpicwrap {
    width: 67vw;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 222px auto 0;
  }
  .postpic.poled .postpicwrap .second{
    margin-top: 7vw;
  }
  .postpic.poled .postpicwrap li:nth-child(3), 
  .postpic.poled .postpicwrap li:nth-child(4), 
  .postpic.poled .postpicwrap li:nth-child(5), 
  .postpic.poled .postpicwrap li:nth-child(6) {
    margin-top: 7vw;
  }















  /* PC WORKS-page-site-roomclip */
  .sitepagetop.room .sitemockwrap .txtwrap .linkb:hover{
    color: #ACACAC;
    background-color: #fff;
  }
  .postpic.room .postpicwrap {
    width: 67vw;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 222px auto 0;
  }
  .postpic.room .postpicwrap .second{
    margin-top: 7vw;
  }
  .postpic.room .postpicwrap li:nth-child(3), 
  .postpic.room .postpicwrap li:nth-child(4), 
  .postpic.room .postpicwrap li:nth-child(5), 
  .postpic.room .postpicwrap li:nth-child(6), 
  .postpic.room .postpicwrap li:nth-child(7), 
  .postpic.room .postpicwrap li:nth-child(8) {
    margin-top: 7vw;
  }









    /*PC WORKS-page-site-mochimon */
    .sitepagetop.mochimon .sitemockwrap .txtwrap {
      color: #1D1D1D;
    }
    .sitepagetop.mochimon .sitemockwrap .txtwrap .linkb:hover{
      color: #F6D83C;
      background-color: #1D1D1D;
    }
    .sitepagetop.mochimon .sitemockwrap .txtwrap p:last-child{
      width: 77%;
    }









    /* PC WORKS-page-site-mylogo */
    .sitepagetop.mylogo .sitemockwrap p.smarphone {
      width: 23.3vw;
      height: auto;
      margin: 0 auto 80px auto;
  }
    .postpic.mylogo .postpicwrap li {
      margin: 90px auto 0;
      width: 18vw;
      height: auto;
      box-shadow: none;
  }









    /* WORKS-page-site-myworks */
  .sitepagetop.myworks .sitemockwrap p.smarphone {
    width: 59.2vw;
    height: auto;
    margin: 0 ;
  }
  .postpic.myworks video{
    margin-top: 150px;
  }










    /* PC WORKS-page-site-coco */
  .coco .sitemockwrap .txtwrap .linkb:hover{
    color: #FFCC03;
    background-color: #1d1d1d;
  }

  .postpic.coco .postpicwrap li:nth-child(3), 
  .postpic.coco .postpicwrap li:nth-child(4), 
  .postpic.coco .postpicwrap li:nth-child(5), 
  .postpic.coco .postpicwrap li:nth-child(6), 
  .postpic.coco .postpicwrap li:nth-child(7), 
  .postpic.coco .postpicwrap li:nth-child(8),
  .postpic.coco .postpicwrap li:nth-child(9)
   {
    margin-top: 7vw;
  }

}