@charset "utf-8";

/* PC文字スタイル */
h1{
  color: #517D99;
  font-size: 2.5vw;
  display: block; /* ブロック要素に変更 */
  text-align: center; /* 中央揃えに指定 */
  margin-top: 1.2vw;
  margin-bottom: 1.2vw;
}
h2{
  margin: 0px;
  font-size: 1.7vw;
  color: #454545;
  font-family: 'Kosugi Maru', sans-serif;
}
p{
  margin-top: 0.7vw;
  margin-bottom: 0.7vw;
  font-size: 1.2vw;
  font-family: 'Kosugi Maru', sans-serif;
  line-height: 150%;
}

#l2 p{
  display: none; /*表示しない*/
}

/*動画背景*/
.video-back {
  position: fixed; /* 要素を固定位置に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
.video-back video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}

/*ヘッダー*/
header{/*変化前のヘッダーのサイズやアニメーションの設定*/
  position: fixed;
  top: 1.5vw; /*上の余白*/
  background-color: #517D99;
  transition: all 300ms 0s ease;
  z-index: 1;
  border-top-right-radius: 40px;/*右上丸*/
  border-bottom-right-radius: 40px;/*右下丸*/
}

.small{/*変化後のヘッダーのサイズ*/
  top: 0; /*上の余白*/
  padding: 0px;
  border-top-right-radius: 0px;/*右上丸*/
  border-bottom-right-radius: 20px;/*右下丸*/
}
header,li{
  padding: 0.8vw;
  display: inline;
}
header,li,a{/*リンク*/
text-decoration:none;
font-size: 1.5vw;
}
a:link {
color:white;
}
a:visited {
color:#ffff;
}
a:hover {
color:#000000;
text-decoration:none; /*アンダーラインを消す*/
}
a:active {
color:#white;
}


/*タイトル文字*/
.TOPtext{
  margin: 0;
  margin-top: 3vw;
  font-size: 20vw; /* ビューポートに合わせて変更 */
  color: black;
  letter-spacing: 1.5vw; /* 文字間隔 */
  line-height: 100%; /* 行間 */
  font-family: 'Staatliches', cursive;
}


/* ホビーセクション */
.flexBOX{
  display: flex; /* 直下要素の並列化 */
  flex-wrap: wrap; /* 並列要素を次の行に折り返す */
  justify-content: center; /* 中央揃え */
}
.txtLink{
  width: 30%;
  height: auto;
  position: relative;
  background-color: black;
}
.txtLink img{
  width: 100%;
  height: 100%;
  opacity: 0.2; /* 透明度 */
}
.txtLink img:hover{ /* カーソル合わせた時 */
  opacity: 0.5;
}
.txtLink p{
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3vw;
  letter-spacing: 1vw; /* 文字間隔 */
  color: white;
  font-family: 'Roboto', sans-serif;
  pointer-events: none; /* マウスイベントを無効化 */
}


/* スキルセクション */
.IMbox{
  display: flex; /*要素の並列化*/
  justify-content: center; /* 中央揃え */
  padding:0;
  padding-top: 1%;
  padding-bottom: 1%;
}
.IMbox img{
  width: 30%;
}
.INbox{
  display: flex;
  flex-direction: column; /* 要素の縦列化 */
  padding: 2%; /* パディングの指定 */
}
.ICbox{
  display: flex;
  padding: 0px;
}
.ICbox a{/*リンク*/
  padding: 0.8vw;
  padding-left: 0px;
  text-decoration:none; /*アンダーラインを消す*/
}
.ICbox i{/*アイコン*/
  color: #517D99;
  font-size: 2.5vw;
}
.ICbox i:hover{
  color: #6AC1B7;
  font-size: 2.5vw;
}

/* ギャラリーセクション */
.flexBOX2{
  display: flex; /* 直下要素の並列化 */
  flex-wrap: wrap; /* 並列要素を次の行に折り返す */
  justify-content: center; /* 中央揃え */
}
.flexBOX2 img{
  padding: 0.5vw;
  width: 20%;
  height: auto;
}

/* コンタクト */
.ICbox2{
  display: flex;
  justify-content: center; /* 中央揃え */
}
.ICbox2 img{
  display: flex;
  padding: 20px;
  width: 1.8vw;
  height: 1.8vw;
}