* {
  margin: 0px;
  padding: 0px;
}
img{
  width:100%;
  vertical-align: bottom;
}
p{
  margin: 0px;
  padding: 0px;
}
a{text-decoration: none;}
body{
width:100%;
margin:0 auto;
position: relative;
background:#ECF5FA;
}
.space{
  display: block;
  margin:50px 0 0 0;
}
.space_sp{
  display: block;
  margin:50px 0 0 0;
}
@media screen and (max-width:768px){
  .space_sp{
    display: none;
  }
}
/*dammy**/
.box{
  width:500px;
  height:350px;
  margin:0 100px 0 0;
  overflow: hidden;
}
@media screen and (max-width:768px){
  .box{
    width:100%;
    margin:0 auto;
    height:auto;
  }
}
.box3{
  width:90%;
  height:250px;
  overflow: hidden;
}
@media screen and (max-width:768px){
  .box3{
    width:100%;
    margin:0 auto;
  }
}
/*************/
.fv{
  width:100%;
  margin:0 auto;
  padding:2% 0;
  position:fixed;
  z-index:999;
  background:#ECF5FA;
}
@media screen and (max-width:768px){
  .fv{
    padding:10% 0;
  }
}
.fv_zone{
  max-width:1000px;
  margin:0 auto;
background-repeat: no-repeat;
}
@media screen and (max-width:768px){
  .fv_zone{
    width:90%;
  }
}
.animate__animated.animate__fadeInUp {
  --animate-duration: 2s;
}
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

h1.name{
font-size:4em;
font-family: var(--font-scheherazade);
font-weight:lighter;
  letter-spacing:7px;
  margin:0 auto;
  color:#575757;
}
@media screen and (max-width:768px){
  h1.name{
    font-size:3em;
    line-height:0.87em;
  }
}
p.name_sub{
  font-size:1.3em;
  letter-spacing: 0.1em;
  margin:-30px 0 0 0;
  color:#575757;
}
@media screen and (max-width:768px){
  p.name_sub{
    font-size:1em;
    margin:0 auto;
  }
}
.mini_column_1{
  flex:1;
}
.mini_column_2{
padding:20px 0 0 0;
  flex:1;
  display:-webkit-flex;
  display:flex;
}
.mini_column_3{
    flex:1;
  }
.platform{
  max-width:1000px;
  margin:0 auto;
}
@media screen and (max-width:768px){
  .platform{
    width:80%;
  }
}
#about_zone{
  width:100%;
margin:0 auto;
padding:15% 0 5% 0;
  background:#fff;
}
@media screen and (max-width:768px){
  #about_zone{
  padding:60% 0 10% 0;
  }
}
.column{
  display:-webkit-flex;
  display:flex;
}
@media screen and (max-width:768px){
  .column{
    -webkit-flex-direction:column;
    flex-direction:column;
  }
}
.left_column{flex:1;}
.center_column{
  flex:1;
  margin:0 5%;
}
.right_column{
  flex:1;
  background:url(../img/fv_pc.png);
  background-size:contain;
  background-repeat: no-repeat;
}
p.about {
  font-size: var(--font-size-29xl);
  letter-spacing: 0.2em;
  font-family: var(--font-scheherazade);
  margin:100px 0 10px 0;
  color: #575757;
}
@media screen and (max-width:768px){
  p.about {
    margin:0 0 10px 0;
  }
}
p.about_sub {
  font-size: var(--font-size-mini);
  letter-spacing: 0.1em;
  margin:-30px 0 30px 0;
  color: #575757;
}
/*timeline**/
.timeline {
  width:100%;
  padding:8% 0 0 0;
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
  li{
    position:relative
  }
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content h3{
    margin:10px 0 0 0;
    font-weight:bold;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #e0f3ff solid;
    padding-left: 30px;
  }
  @media screen and (max-width:768px){
    .timeline-content {
      width:100%;
    }
  }
  .timeline-content h3{
    font-size:15px;
    color:#575757;
    font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
    
  }
  .timeline-content p{
    font-size:12px;
    color:#575757;
    font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background:#bce5ff;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
  @media screen and (max-width:768px){
    .timeline-content:before {
      display: none;
    }
  }
p.want_link{
  background:#bce5ff;
  padding:3px 5px;
  width:150px;
  text-align: center;
  margin:2% 0 0 0;
}

/*skills_zone**/
.skills_zone{
  padding:10% 0 0 0;
}
.s_left_column,.s_right_column{
  flex:1;
}
p.skills {
  font-size: var(--font-size-29xl);
  letter-spacing: 0.2em;
  font-family: var(--font-scheherazade);
  margin:0 0 10px 0;
  color:#575757;
}
p.skills_sub {
  color:#575757;
  font-size: var(--font-size-mini);
  letter-spacing: 0.1em;
  margin:-30px 0 50px 0;
}
.skills_txt{
  width:90%;
  margin:20px 0 0 0;
  font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
}
@media screen and (max-width:768px){
  .skills_txt{
    width:100%;
  }
}
p.skills_item{
  font-family: var(--font-scheherazade);
  font-size: var(--font-size-6xl);
  color:#575757;
}
.cvr_zone{
  width:100%;
  padding:5% 0;
}
.goto_workspage{
width: 200px;
margin:0 auto;
text-align: center;
flex-shrink: 0;
border: 1px solid #000;
background: #FFF;
padding:10px 0;
}
.goto_workspage p{
  font-size: var(--font-size-lg);
  display: contents;
  font-family: Poor Story;
}
.rectangle_box{
  width:100%;
  margin:0 auto;
  padding:5% 0 0 0;
}
.rectangle{
  background:#bce5ff;
  width:30px;
  height:30px;
  border-radius: 3px;
  padding:3px 0 0 0;
  display:inline-block;
  margin:0 5px 0 0;
}
.rectangle p{
  font-size:18px;
  color:#fff;
  text-align:center;
  vertical-align: middle;
  letter-spacing: 2px;
}
.rectangle_b{
  background:#fff;
  border:2px solid #bce5ff;
  border-radius: 3px;
  padding:3px 5px;
  display:inline-block;
  margin:0 5px 0 0;
  color:#bce5ff;
}
@media screen and (max-width:768px){
  .rectangle_b{
    margin:5px 5px 0 0;
  }
}
/*works_zone**/
#works_zone{
  width:100%;
  margin:0 auto;
  padding:10% 0;
  background:#F2F8FC;
}
p.works{
  font-size: var(--font-size-29xl);
  letter-spacing: 0.2em;
  font-family: var(--font-scheherazade);
  margin:0 0 10px 0;
  text-align: center;
  color:#575757;
}
p.works_sub{
  font-size: var(--font-size-mini);
  letter-spacing: 0.1em;
  margin:-30px 0 0 0;
  text-align: center;
  color:#575757;
}
p.works_txt{
  margin:30px 0 0 0;
  text-align: center;
  color:#575757;
  font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
  
}
.nov_left,.nov_cener,.nov_right{
  flex:1;
  width:300px;
  height:420px;
  overflow: hidden;
}
@media screen and (max-width:768px){
  .nov_left,.nov_cener,.nov_right{
    width:100%;
    height:300px;
    margin:20px 0 0 0;
  }
}
.nov_cener{
  margin:0 50px;
}
@media screen and (max-width:768px){
  .nov_cener{
    margin:20px 0 0 0;
  }
}
/*contact***/
#contact_zone{
  width:100%;
  margin:0 auto;
  padding:10% 0 5% 0;
  background:#fff;
}
p.contact{
  font-size: var(--font-size-29xl);
  letter-spacing: 0.2em;
  font-family: var(--font-scheherazade);
  margin:0 0 10px 0;
  text-align: center;
  color:#575757;
}
p.contact_sub{
  font-size: var(--font-size-mini);
  letter-spacing: 0.1em;
  margin:-30px 0 0 0;
  text-align: center;
  color:#575757;
}
p.contact_txt{
  font-size: var(--font-size-mini);
  font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
  letter-spacing: 0.1em;
  margin:20px 0 0 0;
  text-align: center;
}
footer{
  width:100%;
  margin:0 auto;
  background:#e0f3ff;
  padding:3% 0;
}
p.footer_copy{
  font-size:11px;
  text-align: center;
}