@charset "utf-8";

html {
  scroll-behavior: smooth;
}

/*------------------------------------
  gnavi
------------------------------------*/
#gnavi {
    background: rgb(0, 0, 0);
    color:rgb(255, 255, 255);
    display:flex;
    justify-content: left;
    align-items:center;
    width:100%;
    padding:0.7rem;
    position:fixed;
    z-index: 1;
}

.content {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 1rem;
    padding:10px 20px;
}

#gnavi ul {
  display: flex;
}

/*5-3-11 左右から線が伸びて枠線になる*/
#gnavi li{
    /*線の基点とするためrelativeを指定*/
  position: relative;
    margin:0 10px;
}

/*線の基点位置*/
#gnavi li::before,
#gnavi li::after{
  content:"";
    /*絶対配置で線の位置を決める*/
  position: absolute;
    /*線の形状*/
  width: 0;
  height:2px;
  background: linear-gradient(to left,#f43b47 0%, #453a94 100%);
  /*background:#0481A2;:/

/*アニメーションの指定*/
  transition: all 0.2s linear;
  transition-delay: 0.2s;
}

#gnavi li::before{
  right: 0;
  top: 0;
}
#gnavi li::after{
  left: 0;
  bottom: 0;
}

/*線の基点位置2 spanタグ*/
#gnavi li span{
  display: inline-block;
}

#gnavi li span::before,
#gnavi li span::after{
  content:"";
    /*絶対配置で線の位置を決める*/
  position: absolute;
    /*線の形状*/
  width:1px;
  height:0;
  background: linear-gradient(to top,#f43b47 0%, #453a94 100%);
  /*background: #0481A2;*/

/*アニメーションの指定*/
  transition: all 0.2s linear;
}

#gnavi li span::before{
  left: 0;
  top: 0;
}
#gnavi li span::after{
  right: 0;
  bottom: 0;
}

/*現在地とhoverした際の線の変化*/
#gnavi li.current::before,
#gnavi li.current::after,
#gnavi li:hover::before,
#gnavi li:hover::after{
  width: 100%;/*横幅を100%に*/
}

#gnavi li.current span::before,
#gnavi li.current span::after,
#gnavi li:hover span::before,
#gnavi li:hover span::after{
  height: 100%;/*縦幅を100%に*/
}





/*------------------------------------
  area
------------------------------------*/
.area {
    overflow:auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
}

.area h1 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
}

.area h2 {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-size: 3rem;
    margin:3rem 0;

}

/*------------------------------------
  container
------------------------------------*/
#container{
    height:100vh;
    width: 100vw;
    scroll-snap-align: start;
    background: rgb(255, 255, 255);
    margin: 0 auto;
    padding:5rem 0rem 5rem 0rem;
    text-align: center;
}

#container h1{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  color: rgb(0, 0, 0);
  font-size: 8rem;
  letter-spacing: 3rem;
  text-indent:3rem;
  padding-top:1.5rem;
}

/*------------------------------------
  about
------------------------------------*/
#about{
    background-color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
    scroll-snap-align: start;
    overflow: auto;
    padding:5rem 3rem;
    margin: 0 auto;
    justify-content: space-between;
}

#career{
    width:100%;
    margin:1rem 0;
    padding:0;
}

#career .about-pri, #strength .about-pri{
    float:left;
    margin-top:1rem;
}

#career .about-sec, #strength .about-sec{
    float:right;
    margin-top:1rem;
}

#career .about-sec .sec1 ,#strength .about-sec .sec1{
  table-layout:auto;
  width:14%;
}

#career .about-sec .sec2 ,#strength .about-sec .sec2{
  table-layout:auto;
  width:86%;
}

#strength{
    clear:both;
    width:100%;
}

#about table {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;  
    font-size: 0.75rem;
    color: rgb(0, 0, 0);
    table-layout: fixed;
}

#about th{
    font-weight: normal;
    vertical-align: top;
    padding:1rem;
    white-space: nowrap;
}

#about td{
    text-align: left;
    vertical-align: middle;
    padding:1rem;
    border-top: solid 1px #c3c3c3;
}

/*------------------------------------
  skill
------------------------------------*/
#skill{
    background-color: rgb(255, 255, 255);
    justify-content: center;
    height:100%;
    width: 100%;
    scroll-snap-align: start;
    padding:5rem 3rem;
    margin:0 auto;
}

/*スライドする横棒グラフ*/
.bar{
  max-width: 500px;
  width: 100%;
  margin: 2em;
  color: white;
  padding: 0.25em;
  animation: bar-animation 1 9s;
  background: #68aeda;
  border-radius: 0 4px 4px 0;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  padding:10px 20px;
}

.bar1{
  max-width: 75%;
}
.bar2{
  max-width: 65%;
}
.bar3{
  max-width: 10%;
}
.bar4{
  max-width: 30%;
}
.bar5{
  max-width: 0%;
}
.bar6{
  max-width: 80%;
}
.bar7{
  max-width: 65%;
}
.bar8{
  max-width: 50%;
}

@keyframes bar-animation{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

/*------------------------------------
  work
------------------------------------*/
#work{
    background-color: rgb(255, 255, 255);
    justify-content: center;
    height:100%;
    width: 100%;
    scroll-snap-align: start;
    padding:5rem 3rem;
    margin:0 auto;
}

.work-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.work-list li {
  width: 45%;
  margin-bottom: 5rem;
}

.work-list img{
  width:100%;
  height:100%;
  object-fit: cover;
  margin-bottom: 0.5rem;
  filter: grayscale(100%);
  transition: 3s;
}

.work-list img:hover{
  filter:grayscale(0)
}

.work-list p{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;  
  font-size: 0.75rem;
  color: rgb(0, 0, 0);
  margin-bottom: 0.2rem;
}

.work-contents{
  padding:0 5rem;
}

.work-contents img{
  width:100%;
  height:100%;
  margin-top:3rem;
  margin-bottom:3rem;
}

.work-info{
  margin-bottom: 3rem;
}

.work-info .info1{
  width:20%;
}

.work-info table {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;  
  font-size: 0.75rem;
  color: rgb(0, 0, 0);
  table-layout: fixed;
  width: 100%;
}

.work-info th{
  font-weight: normal;
  vertical-align: top;
  padding:1rem;
  white-space: nowrap;
}

.work-info td{
  text-align: left;
  vertical-align: middle;
  padding:1rem;
  border-top: solid 1px #c3c3c3;
}

#work-navi li{
  color:rgb(0, 0, 0);
  display: inline;
}

#work-navi ul{
  text-align: center;
  margin-bottom: 1rem;
}

/*------------------------------------
  footer
------------------------------------*/
footer {
  background-color:rgb(0, 0, 0);
  height: 30px;
  padding-top:0.5rem;
}

footer p {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-size: x-small;
  color:#fff;
  text-align: center;
  letter-spacing: 0.1rem;
  text-indent:0.1rem;
}

/*------------------------------------
  各メディアの表示変更
------------------------------------*/
@media only screen and (max-width: 600px) {
  /* スマートフォンの場合のCSS */
  #gnavi {
    display:inline-block;
  }
  .content {
    font-size: 0.8rem;
    padding:10px 5px;
  }

  #container {
    height: 68vh;
  }
  #container h1 {
    font-size: 4rem;
    letter-spacing: 0.7rem;
    text-indent: 0.7rem;
    text-align: center;
    align-items: center;
  }

  #about {
    height:110vh;
  }

  #about h1{
    font-size:3rem;
  }

  #about table{
    font-size: 0.6rem;
  }

  #about th,td{
    padding:1rem 0.5rem;
  }

  #skill {
    height: 75vh;
  }

  #skill h1{
    font-size:3rem;
  }

  .bar{
    width: 100%;
    margin: 2em 0;
    color: white;
    animation: bar-animation 1 9s;
    background: #68aeda;
    border-radius: 0 4px 4px 0;
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    padding:10px 10px;
  }

  #work h1{
    font-size:3rem;
  }

  footer p {
    font-size:0.5rem;
    font-weight: 80;
  }

}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* タブレットの場合のCSS */
  #container {
    padding:6rem 0rem 0rem;
  }
  #container h1 {
    font-size: 8rem;
    letter-spacing: 2rem;
    text-indent: 2rem;
  }
  #about h1{
    font-size:5rem;
  }
  #skill h1{
    font-size:5rem;
  }
  #work h1{
    font-size:5rem;
  }
}

@media only screen and (min-width: 1025px) {
  /* パソコンの場合のCSS */
  #container h1 {
    font-size: 11rem;
  }
  #about h1{
    font-size:7rem;
  }
  #skill h1{
    font-size:7rem;
  }
  #work h1{
    font-size:7rem;
  }
}


/* ABOUT セクション内のテーブルに適用 */
#about .about-sec table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 20px; /* 必要に応じて上マージン */
}

#about .about-sec th,
#about .about-sec td {
  border: 1px solid #ccc; /* 適当な色に調整 */
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  box-sizing: border-box;
}

/* 列幅の指定（例） */
#about .about-sec th.sec1 {
  width: 25%; /* 日付列を狭めに */
  background-color: #f5f5f5;
}

#about .about-sec th.sec2 {
  width: 75%;
  background-color: #f5f5f5;
}

/* 行交互の背景色 (見やすさ向上) */
#about .about-sec tr:nth-child(even) {
  background-color: #fafafa;
}