@charset "UTF-8";
/*===============
共通部分
===============*/
html{
font-size: 62.5%;
/*基本のブラウザの文字サイズは16px、その62.5%は10px*/
}

.goTop{
position: fixed;
bottom: 1rem;
right: 2rem;
z-index: 20;
}

.textL{
  text-align: left !important;
}

/***************************************************
 * Generated by SVG Artista on 10/3/2020, 3:32:34 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 780px;
    stroke-dasharray: 780px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-1 {
  animation: animate-svg-stroke-1 2s cubic-bezier(0.6, 0.04, 0.98, 0.335) 0s both;
}

body{
font-family: 'Noto Sans',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color:#3f3f3f;
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}

a{
color: #000;
text-decoration: none;
}
header a:last-child{
margin-right: 2rem;
}
a:hover{
opacity: 0.8;
transition:.4s;
}

.inner{
max-width:1000px;
margin: 0 auto;
}

.sec1,.sec2,.sec3{
margin: 10rem 0;
}
.sec2{
padding: 10rem 0;
}
.sec4{
padding-top: 10rem;
}

.flexB{
display: flex;
justify-content: space-between;
}

h2{
font-size: 5.6rem;
font-family: 'Exo 2', sans-serif;
font-weight: 400;
text-align: center;
position: relative;
padding-bottom: 2.4rem;
margin-bottom: 2rem;
}
h2::after{
content: ""; /*新しく要素を入れる（インライン要素）*/
display: block;/*ブロックレベル要素に変える）*/
width: 120px;/*ブロックレベル要素なら幅の指定ができるので、幅指定*/
border-bottom: 1px solid #3f3f3f;/*幅分（ここでは120px）のボーダー*/
/*margin:0 auto;*/
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}

h3{
font-weight: 400;
text-align: center;
margin-bottom: 4.6rem;
font-family: 'noto-sans', sans-serif;
}

.bld{
font-weight: 700;
}

/*===============
header style
===============*/
header{
background-color: #E5EBEA;
font-family: 'Exo 2', sans-serif;
font-size: 2rem;
padding:1rem 0;
position: fixed;
top:0;
left:0;
width: 100%;
z-index: 10;
}


nav ul{
align-items: flex-end;
}

nav li{
margin-right: 3rem;
	line-height: 4REM;
}


/*===============
main style
===============*/
main{
display: block; /*IEの表示崩れを防ぐ*/
width:100%;
}
/*===============
mv style
===============*/
.mv{
height: 0;
padding-top:37.5%; /*画像サイズを1600pxに*/
margin-top:3rem;
background-color:#DBD9DB;
background-image: url("../images/ishikawa-aboutG3.svg");
background-repeat: no-repeat;
background-position: center;
background-size: auto;
position: relative;
}
.mv h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #000;
font-size: 5.6rem;
font-family: 'Exo 2', sans-serif;
text-shadow: 2px 2px 5px rgba(102,102,102,.8);
font-weight: 700;
max-width: 100%;
overflow: hidden;
margin: 0 auto;
 }
.mv h1 span{
font-size:2.8rem;
display: block;
text-align: center;
}



/*===============
sec1 style
===============*/
.sec1 p{
line-height: 3;
margin-left: 2rem;
margin-right: 2rem;
letter-spacing: 0.2rem;
}
.sec1 .center{
text-align: center;
}
.sec1 .center{
padding: 0.4rem 0;
margin: 1rem 0;
}

/*===============
sec2 style
===============*/
.sec2{
background: #B098A4;
 transform: skewY(-5deg);
}
.sec2 .inner{
 transform: skewY(5deg);
padding-left: 1.5rem;
padding-right: 1.5rem;
margin: 0 auto;
}
.sec2 h2{
color: #000;
}
.sec2 ul{
list-style: none;
}
.sec2 h2::after{
border-bottom: 1px solid #000;
}
.sec2 h3{
color: #000;
}
.sec2 p{
font-size: 1.6rem;
text-align: center;
}
.skillDetail{
max-width: 25%;
}
.sec2 dt{
padding-bottom:0.6rem;
border-bottom: 1px solid #000;
margin: 1.8rem 0 1.2rem;
text-align: center;
}
.sec2 dd{
font-size: 1.4rem;
line-height: 2;
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-bottom: 5rem;
}

.sec2 img{
height: 50px;
}
/*===============
sec3 style
===============*/

.workName{
padding-top:2rem;
padding-bottom: 1rem;
font-weight: bold;
}
.sec3 h3{
padding-bottom: 4rem;
}
.sec3 img{
margin-bottom:0.5rem;
  border-radius:  10px;
  max-width: 200px;
  height: 100px;
}
.worksWrapper{
text-align: center;
padding:0 2rem 3rem;
width: 33%;
line-height: 2;
letter-spacing: 0.1rem;
}

.sec3 p{
font-size: 1.6rem;
text-align: center;
}
.skillDetail{
max-width: 25%;
padding: 0 2rem;
}
.sec3 .smalldis{
font-size: 1.4rem;
}
.pimag{
max-width: 200px;
max-height: 100px;
}
/*===============
sec4 style
===============*/
.sec4,footer{
background: #000;
color:#fff;
}
.sec4{
text-align: center;
}
.sec4 p{
font-size: 1.4rem;
}
.sec4 .btn{
display: block;
max-width:40rem;
height: 5rem;
color: #fff;
border: 1px solid #fff;
line-height: 5rem;
margin: 3rem auto;
}
.sec4 .tel{
font-size: 3rem;
font-family: 'Exo 2', sans-serif;
color: #fff;
display: block;
margin-bottom: 1.6rem;
}
.sec4 .tel span{
font-size: 1.8rem;
font-family: "sans-serif"
}
.btn-shine {
  text-transform: uppercase;
  outline: 0.7px solid;
  outline-offset: 0px;
  transition: all 1.1s cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-shine:hover {
  border-color: #FFF;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: transparent;
  outline-offset: 8px;
  text-shadow: 2px 2px 3px #000;
}

/*===============
footer style
===============*/
footer{
padding:0 2rem 2rem 0;
}
footer small{
font-size: 1.4rem;
margin-left:2rem; 
}




@media screen and (max-width:768px){

body{
font-size: 14px;
}
header{
text-align: center;
}
header .inner{
margin: 0 auto;
}

.marT1rem_sp{
margin-top: 1rem;
}
.marT2rem_sp{
margin-top: 2rem;
}
.marT3rem_sp{
margin-top: 3rem;
}

.marB1rem_sp{
margin-bottom: 1rem;
}
.marB2rem_sp{
margin-bottom: 2rem;
}
.marB3rem_sp{
margin-bottom: 3rem;
}

.marS1rem_sp{
margin-left: 1rem;
margin-right: 1rem;
}
.marS2rem_sp{
margin-left: 2rem;
margin-right: 2rem;
}
.marS3rem_sp{
margin-left: 3rem;
margin-right: 3rem;
}


.sec1,.sec2,.sec3{
margin: 3rem 0;
}
.sec2{
padding: 3rem 0;
}
.sec4{
padding-top: 3rem;
}

/*===============
header style
===============*/
.logo{
font-size: 3.2rem;
text-align: center;
}
header{
background-color: #E5EBEA;
font-family: 'Exo 2', sans-serif;
font-size: 2rem;
padding:3.5rem 0;
position: fixed;
top:0;
left:0;
width: 100%;
z-index: 10;
}
header .inner{
display: flex;
}
header .inner .flexB{
justify-content: center;
}
svg{
width:160px;
height: auto;
margin-left:2rem;
}
.mv{
background-color:#DBD9DB;
background-image: url("../images/ishikawa-aboutG.svg");
margin-top: 10rem;
}
header a:last-child{
margin-right: initial;
}

.sp_none{
display: none;
}

/*===============
main style
===============*/
.mv h1{
display: none;
}
.mv h1 span{
font-size: 1.8rem;
}
.sec1{
padding:6rem 1.4rem 4rem;
}
h2{
font-size: 3rem;
padding-bottom:0.4rem;
}
h2::after{
width: 8rem;
}
h3{
margin-bottom: 3.4rem;
font-size: 1.2rem;
}

/*
===============
sec1 style
===============
*/
.sec1 p{
line-height: 3;
margin-left: 0;
margin-right: 0;
letter-spacing: 0.2rem;
}
/*
===============
sec2 style
===============
*/
.sec2{
padding: 3rem 1.4rem 4rem;
}

.sec2 .flexB{
flex-direction: column;
}
.skillDetail{
max-width: inherit;
margin-bottom: 3rem;
}
.skillDetail:last-child{
margin-bottom:0;
}
.skillDetail dt{
padding-bottom:1rem;
margin: 1.7rem 0 1rem;
font-size: 1.8rem;
}
.skillDetail dd{
line-height: 1.5;
}
/*
===============
sec3 style
===============
*/
.sec3{
padding:0 2rem 6.5rem;
}

.sec3 .flexB{
flex-direction: column;
padding:0;
}

.sec3 table{
margin-left: 0;
font-size: 1.2rem;
margin-top:2.8rem 
}
.sec3 table th{
width:31%;
}
.sec3 table td{
line-height: 1.6;
padding-bottom:1.8rem;
}
.sec3 tr:last-child td{
padding-bottom:0;
}
.worksWrapper{
width: 100%;
padding:0 0 3rem;

}

/*
===============
sec4 style
===============
*/
.sec4{
padding: 4rem 1.4rem 0;
}
.sec4 .contactText{
text-align: left;
line-height: 1.35;
}
.sec4 .btn{
max-width: 30rem;
height: 4rem;
line-height: 4rem;
font-size: 1.6rem;
margin-top: 1.6rem;
margin-bottom: 2.5rem;
}
.sec4 .tel{
margin-bottom: 1.5rem;
}
/*
===============
footer style
===============
*/
footer{
text-align: center;
}
footer small{
font-size: 1.1rem;
}
}/*@mediaの終わり*/




@media screen and (min-width:769px){
body{
font-size: 1.6rem;
}
.pc_none{
display: none;
}

.logo{
padding-left: 2rem;
}

.marT1rem_pc{
margin-top: 1rem;
}
.marT2rem_pc{
margin-top: 2rem;
}
.marT3rem_pc{
margin-top: 3rem;
}

.marB1rem_pc{
margin-bottom: 1rem;
}
.marB2rem_pc{
margin-bottom: 2rem;
}
.marB3rem_pc{
margin-bottom: 3rem;
}

.marS1rem_pc{
margin-left: 1rem;
margin-right: 1rem;
}
.marS2rem_pc{
margin-left: 2rem;
margin-right: 2rem;
}
.marS3rem_pc{
margin-left: 3rem;
margin-right: 3rem;
}



/*
===============
header style
===============
*/
.navi li:last-child{
margin-right: 0;
}


}/*@mediaの終わり*/




/*==================
要素がフワッとする設定
====================*/

/*このクラスは必須なので全部入れる*/
.huwa {
  opacity: 0;
  transition: all .7s ease;
}

/*Javascriptでスライドした時にこのクラスが入り、アニメーションが発生*/
.huwa.show {
  opacity: 1;
  transform: none;
}

/*左から右に出てくる*/
.huwa--lr {
  transform: translate(-100px, 0);
}

/*右から左に出てくる*/ 
.huwa--rl {
  transform: translate(100px, 0);
}

/*下から上に出てくる*/ 
.huwa--up {
  transform: translate(0, 100px);
}
 
 /*上から下に出てくる*/ 
.huwa--down {
  transform: translate(0, -100px);
}
 
 /*縮小状態から出てくる*/ 
.huwa--scaleUp {
  transform: scale(.5);
}
 
 /*拡大状態から出てくる*/ 
.huwa--scaleDown {
  transform: scale(1.5);
}
 
/*回りながら出てくる（右）*/ 
.huwa--rotateL {
  transform: rotate(180deg);
}
 
/*回りながら出てくる（左）*/
.huwa--rotateR {
  transform: rotate(-180deg);
}

.sample_box{
 width:300px; 
 margin:0 auto; 
 overflow:hidden;
}
.zoom{
 transition:1s all;
}
.zoom:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
}


.PORTFOLIO {
  color:#1234;
  font-size: 100px;
  position: relative;
  width: 600px;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip: rect(6px, 9999px, 74px, 0);
  }
  5% {
    clip: rect(63px, 9999px, 79px, 0);
  }
  10% {
    clip: rect(81px, 9999px, 43px, 0);
  }
  15% {
    clip: rect(95px, 9999px, 78px, 0);
  }
  20% {
    clip: rect(53px, 9999px, 30px, 0);
  }
  25% {
    clip: rect(59px, 9999px, 79px, 0);
  }
  30% {
    clip: rect(80px, 9999px, 64px, 0);
  }
  35% {
    clip: rect(27px, 9999px, 81px, 0);
  }
  40% {
    clip: rect(84px, 9999px, 12px, 0);
  }
  45% {
    clip: rect(14px, 9999px, 88px, 0);
  }
  50% {
    clip: rect(25px, 9999px, 10px, 0);
  }
  55% {
    clip: rect(36px, 9999px, 2px, 0);
  }
  60% {
    clip: rect(43px, 9999px, 43px, 0);
  }
  65% {
    clip: rect(11px, 9999px, 23px, 0);
  }
  70% {
    clip: rect(75px, 9999px, 11px, 0);
  }
  75% {
    clip: rect(41px, 9999px, 41px, 0);
  }
  80% {
    clip: rect(32px, 9999px, 62px, 0);
  }
  85% {
    clip: rect(99px, 9999px, 71px, 0);
  }
  90% {
    clip: rect(62px, 9999px, 99px, 0);
  }
  95% {
    clip: rect(92px, 9999px, 16px, 0);
  }
  100% {
    clip: rect(78px, 9999px, 20px, 0);
  }
}
.PORTFOLIO:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 black;
  top: 0;
  color: white;
 
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 1s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(14px, 9999px, 3px, 0);
  }
  5% {
    clip: rect(1px, 9999px, 59px, 0);
  }
  10% {
    clip: rect(1px, 9999px, 43px, 0);
  }
  15% {
    clip: rect(16px, 9999px, 57px, 0);
  }
  20% {
    clip: rect(21px, 9999px, 56px, 0);
  }
  25% {
    clip: rect(63px, 9999px, 24px, 0);
  }
  30% {
    clip: rect(43px, 9999px, 40px, 0);
  }
  35% {
    clip: rect(70px, 9999px, 32px, 0);
  }
  40% {
    clip: rect(41px, 9999px, 15px, 0);
  }
  45% {
    clip: rect(74px, 9999px, 72px, 0);
  }
  50% {
    clip: rect(77px, 9999px, 47px, 0);
  }
  55% {
    clip: rect(51px, 9999px, 47px, 0);
  }
  60% {
    clip: rect(67px, 9999px, 64px, 0);
  }
  65% {
    clip: rect(36px, 9999px, 94px, 0);
  }
  70% {
    clip: rect(13px, 9999px, 19px, 0);
  }
  75% {
    clip: rect(82px, 9999px, 45px, 0);
  }
  80% {
    clip: rect(53px, 9999px, 93px, 0);
  }
  85% {
    clip: rect(66px, 9999px, 2px, 0);
  }
  90% {
    clip: rect(73px, 9999px, 16px, 0);
  }
  95% {
    clip: rect(97px, 9999px, 30px, 0);
  }
  100% {
    clip: rect(35px, 9999px, 4px, 0);
  }
}
.PORTFOLIO:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 black;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 1s infinite linear alternate-reverse;
}