@charset "UTF-8";

#header{
    z-index: 9999;
}
/* ヘッダー分の初期位置移動下へ */
#about{
  margin-top: 5rem;
}
#about::before{
  content: "";
  display: block;
  height: 5rem;
  margin-top: -5rem;
  visibility: hidden;
}

.content-box{
  margin-top: 2rem;
}
.about-menu{
  width: 100svw;
  height: auto;
}
/* 「../profile」「../skill..」「/career」横並び */
.mainmenu{
  list-style: none;
  margin-top: 1rem;
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
  max-width: 100svw;
  background-color: var(--white-color);
}
/* 「../profile」「../skill..」「/career」リストの枠の各調整 */
.menu-item {
  cursor: pointer;
  position: relative;
  text-align: center;
}

/* 「../profile」「../skill..」「/career」タイトルの調整 */
.menu-title {
  background: none;
  border: none;
  font-size: 2rem;
  font-family: 'Caveat', cursive;
}
/* #profile, #skill, #careerのリスト大枠 */
.submenu{
  position: static;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-rows: repeat(3,1fr);
  gap: 0.5rem;
  max-width: 100%;
  max-height: auto;
  transition: max-height 0.3s ease;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* アコーディオン式に出てくるため初期は消えておく */

/* liのユーザーシートが悪さをしていたため調整していらない余白を消去し子要素aタグに合わせる */
.submenu>li{
  display: inline-block;
  text-align: left;
  font-size: 0;
}
/* ＃のアコーディオンサブメニューのフォント調整 */
.submenu-title{
  font-size: 1rem;
  padding: 0;
  margin: 2rem auto 1rem auto;
}
/* サブメニューをホバーしたら色が変わって太字になる */
.submenu>li:hover {
  color: var(--main-color);
  font-weight: bold;
  cursor: pointer;
}
/* メインメニューをクリックしてアクティブ状態になった時に色を変える */
.active{
  color:var(--main-color);
}

/* 　スマホ用 メニュー部分*/
@media screen and (max-width: 768px) {
  #about{margin-top: 0;}
  /* 展開サブメニュー */
.about-menu {
  display: none;
}
}

/* 各セクション(../profile」「../skill..」「/career)のタイトル部分の調整 */
.submenu-title-about{
    width: 100%;
    height: auto;
    margin-top: 2rem;
    text-align: center;
    padding: 0.5rem;

}

/* プロフィール セクション*/
/* 名前カードグリッド対応 */
#name-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#name-card>img{
  grid-column: 1/3;
  grid-row: 1/2;
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
#name-card-text{
  grid-column: 3/4;
  grid-row: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#name-card-text>*{
  font-size: 1.8rem;
}
/* サブメニュータイトル(#profile, #skill, #career) */
.submenu-title{
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 1.8rem;
}

/* ＃profile サブセクション*/
/* #profileグリッド対応 */
.SelfIntro-gridbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 1rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
}
/* #profileのテキスト部分 */
.SelfIntro-text{
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  margin: 0 auto;
}
/* #profileのイメージ部分 */
#SelfIntro>img{
  grid-column: 2/3;
  grid-row:1/2;
  width: 100%;
  height: 100%;
  aspect-ratio: 4/2;
  object-fit: cover;
}

/* #likeのサブセクション */
/* ライクのグリッド調整 */
.like-gridbox{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  align-items: center;   /* 縦方向：中央 */
}


/* ライクのテキスト部分 */
#like-text{
  grid-column: 1/2;
  grid-row: 1/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding-left: 2rem;
  margin: 0 auto;
}
/* ライクのイメージ部分 */
#like>img{
  grid-column: 2/4;
  grid-row:1/3;
  width:100%;
  height:auto;
}

/* ホビーサブセクション */
#hobby-title{
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-top: 2rem auto 0 auto;
}
.hobby-gridbox{
  margin-top: 4rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 50%;
  margin: auto;
}

/* ==== スマホ時  ../profilecection*/
@media screen and (max-width: 768px) {

  /* 名前カード */
  #name-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  #name-card>img{
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem;
  }
  #name-card-text{
    grid-column: 2/3;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  /* profile */
  .SelfIntro-gridbox {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  #SelfIntro-text{
    grid-column: 1/2;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    margin: 0 auto;
  }
  #SelfIntro>img{
    grid-column: 1/2;
    grid-row:2/3;
    width: 100%;
    height: 100%;
    aspect-ratio: 5/3;
    object-fit: cover;
    border-radius: 2rem;
  }

  /* ライクのグリッド */
  .like-gridbox{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  #like-text{
    grid-column: 1/2;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    padding-left: 1rem;
    margin: 0 auto;
  }
  #like>img{
    grid-column: 1/2;
    grid-row:2/3;
    width: 100%;
    border-radius: 2rem;
  }

  /* 趣味　２c９r */
  #hobby{
    display: block;
    width: 80%;
    margin: 1rem auto 0 auto;
  }
  #hobby-title{
    padding: 1rem;
    margin: 2rem auto 0 auto;
    text-align: center;
  }
  .hobby-gridbox{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
  }
}

/* ../skillセクション */
/* #strengthサブセクション */
/* #strengthサブタイトルをセンターへ */

#strength{
  text-align: center;
  font-weight: bold;
}
/* #strengthグリッド */
.strength-gridbox{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 0rem;
}
/* #strengtの中身３項目 */
.strengh-card{
  grid-column: auto;
  grid-row: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  gap: 1rem;
  margin: 0 auto;
}
/* #strengthの中身３項目のタイトル */
.strength-card-title{
  font-weight: bold;
}
/* #toolsサブセクション */
/* #toolsサブタイトルをセンターへ */
#tools{
  text-align: center;
  font-weight: bold;
}

/* toolsグリッド */
.tools-gridbox{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: .5rem;
  padding: 0;
}
/* toolsの中身 タグの形状 */
.tool-tag{
  text-align: center;
  width: 100%;
  margin: 1rem auto 0 auto;
  background:var(--sub-color2);
  border-radius: 3rem;
}
/* #others サブセクション */
/* #othersサブタイトルをセンターへ */
#others{
  text-align: center;
  font-weight: bold;
}
/* othersグリッド */
.others-gridbox{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: .5rem;
  padding: 0;
}
/* othersの中身 タグの形状 */
.others-tag{
  text-align: center;
  width: 80%;
  margin: 1rem auto 0 auto;
  background:var(--sub-color2);
  border-radius: 3rem;
}
/*#othersの中身イメージ デジタルバッジなど */
.skill-img>img{
  margin: 0 auto;
  aspect-ratio: 1/1;
}

/* sp ../skill */
@media screen and (max-width: 768px) {
  /* 強み */
  .strength-gridbox{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
  }
  .strengh-card{
    grid-column: 1/2;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom:1em;
  }

  /* tool */
  .tools-gridbox{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom:1em;
  }
  .tool-tag{
    text-align: center;
    width: 80%;
    margin: 0 auto;
    background:var(--sub-color2);
    border-radius: 3rem;
  }

  /* その他 */
  #others{
  text-align: center;
  font-weight: bold;
  margin-top: 4rem;
  margin-bottom:2em;
  }
  .skill-img>img{
    margin: 0 auto;
  }
}

・・・・・・・・・・・・・・・・・・・・・・・・・
/* ../careerタイトルをセンターへ  */

.history-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/* #historyのタイトル */
#history{
  text-align: center;
  font-weight: bold;
}
/* #historyの箱 */
.game-tile {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: .2rem;
  margin: 2rem auto 0 auto;
  height: 4rem;
  transition: transform 0.3s ease;
}
/* #historyの行をホバーで拡大 */
.game-tile:hover{
  transform: scale(1.02);
}
/* ＃historyの矢印 */
.arrow{
  height: 4rem;
  width: 4rem;
  margin: 0 auto;
  padding: 0.5rem;
}

/* #historyの中身1行目 */
.tile1{
  grid-column: 1/3;
  grid-row: 1/2;
  text-align: center;
  padding: .2rem;
  margin: 0 auto;
}

.arrow1{
  grid-column: 1/3;
  grid-row: 2/3;
  text-align: center;
  padding: .2rem;
  margin: 0 auto;
}
/* #historyの中身2行目 */
.tile2{
  grid-column: 1/3;
  grid-row: 3/4;
  text-align: center;
  padding: .2rem;
  margin: 0 auto;
}
.arrow2{
  grid-column: 1/3;
  grid-row: 4/5;
  text-align: center;
  padding: .2rem;
  margin: 0 auto;
}
/* #historyの中身3行目 */
.tile3{
  grid-column: 1/3;
  grid-row: 5/6;
  text-align: center;
  padding: .2rem;
  margin: 0 auto;

}
.arrow3{
  grid-column: 1/3;
  grid-row: 6/7;
  text-align: center;
  padding: .2rem;
  margin: 0 auto;
}
/* #historyの中身4行目 */
.tile4{
  grid-column: 1/3;
  grid-row: 7/8;
  text-align: center;
  padding: .2rem;

}
/* #historyのマス画像の大きさ */
.boardtile{
  width: 20%;
}


/* #reason */
/* #reasonタイトル */
#reason{
  width: 100%;
  margin: 0 auto;
  margin-top:2rem ;
  text-align: center;
  font-weight: bold;
}
/* #reasonグリッド */
#reason-card{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 1rem;
  width: 90%;
  margin: 0 auto;
  margin-top: 2rem;
}
/* #reasonの中身 text部分 */
.reason-card-text{
  grid-column: 2/3;
  grid-row: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding-left: 2rem;
  margin: 0 auto;
}
/* #reasonの中身 img部分 */
#reason-card>img{
  grid-column: 1/2;
  grid-row: 1/2;
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 2rem;
}

/* #vision */
/* #visionタイトル */
#vision{
  width: 100%;
  margin: 0 auto;
  margin-top:2rem;
  text-align: center;
  font-weight: bold;
}
/* #vision 中身　箱*/
#vision-card{
  width: 80%;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 4rem;
  text-align: center;
}
/* #vision 中身 text */
#vision-card>p{
  margin-top: 1rem;
}

/* SP ../career */
@media screen and (max-width: 768px) {
  /* ../career#history */
  .history-board {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0.5rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
    .game-tile {
      transform: none;
      box-shadow: none;
      height: auto;
    }
    .game-tile img {
      display: none; /* ← マス画像を消す */
    }
    .game-tile>p {
      font-size: 1rem;
      color: var(--text-color);
      line-height: 1rem;
      text-align: left;
      margin-top: .5rem;
    }
    .arrow{
      display: none;
    }
  /* ../career#reason */
  #reason-card{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 1rem;
    width: 90%;
    margin: 0 auto;
    margin-top: .4rem;
    margin-bottom: .2rem;
  }
  .reason-card-text{
    grid-column: 1/2;
    grid-row: 1/2;
    align-items: center;
    text-align: left;
    margin: 0 auto;
    padding-left: 0;
  }
  #reason-card>img{
    grid-column: 1/2;
    grid-row: 2/3;
    width: 80%;
    height: 80%;
    object-fit: cover;
    margin: 1rem auto 0 auto;
    border-radius: 100% 100%;
  }
}