@charset "utf-8";

/* 共通部分
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/

/* 基本スタイルのリセット */

body {
font-family:monospace;
}

p{
  color: #595656;
}

/* ハンバーガーメニューのアイコン */
.menu-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  width: 30px; 
  height: 25px;
  justify-content: space-between;
  right: 10%;
  top: 5%;
  overflow:visible;
  z-index: 999;
}

.menu-icon span {
  background-color: #595656;
  height: 3px;
  width: 100%;
  display: block;
  transition: all 0.3s ease;
}

/* クリック時にバッテンに変形 */
.menu-icon.active span:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px); /* 回転時に位置を調整 */
}

.menu-icon.active span:nth-child(2) {
  opacity: 0; /* 真ん中の線を隠す */
}

.menu-icon.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px); /* 回転時に位置を調整 */
}

/* ナビゲーションメニュー */
.nav-menu {
  opacity: 0;
  visibility: hidden; /* 初期状態で表示しない */
  pointer-events: none; /* 初期状態でクリックを無効化 */
  align-content: center;
  justify-content: center;
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  flex-direction: column;
  transition: opacity 0.3s ease;
  z-index: 100;
}

.nav-menu ul {
  list-style: none;
  margin: 0 auto;
}

.nav-menu li {
  margin: 15px 0;
  font-size: 2.4rem;
  display: flex;
  justify-content: center;

}

.nav-menu a {
  text-decoration: none;
  color: #595656;
  font-size: 2rem;
}



/* ナビゲーションメニューが表示されるとき */
.nav-menu.active {
  opacity: 1;
  visibility: visible;/* メニューを表示 */
  pointer-events: auto; /* クリックを有効化 */
  z-index: 100;
}

/* ハンバーガーメニュー表示ここまで */

html{
  font-size: 100%;
}

body{
  line-height: 1.7;
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
}

.randombg {
    display: flex;
    justify-content: cover;
    align-items: center;
    background-repeat: no-repeat;
}

/* HEADER
----------------------------------ｰｰｰｰｰｰｰｰｰｰ  */
.top-container{
  position: relative;
  z-index: 1;
}

header h1{
  text-align:left;
  margin-left: 3%;
  margin-top: 3%;
  margin-bottom: 6%;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #343232;
}

.randombg{
    width: 100%;
    height: 100vh; /* または任意の高さ */
    background-size: contain; /* ★比率を保つ */
    background-position: center;
    transition: opacity 1.5s ease-in-out;
}

/* フッター
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/

footer p{
  padding-left: 20px;
  padding-top: 10px; 
}

@media screen and (min-width: 920px) {
  .main-nav{
    position: absolute;
    z-index: 999;
    top: 100px;
    right: 30px;
    width: 27vh;
    text-transform: capitalize;
    list-style: none;
    background-color: white;
    padding-top: 40px;
  }
  
  .main-nav li{
    font-size: 2rem;
    margin-left: 30px;
  }
  .nav-menu .text{
    font-size: 1rem;
  }

}

/* トップページ
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/
.top_page .container { 
  position: relative;
  max-height: 90vh;
  max-width: 90%;
  margin: 0 auto;
}

.fade-in-image {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* アニメーションの定義 */
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* サブページ（Schedule）
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/
header{
  margin-bottom: 10px;
}

.sub_page header {
  position: relative;
  overflow: hidden;
}
.sub_page header::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../top_page/IMG_8770.JPG) center / cover;
  opacity: 0.5;
  z-index: 0;
}

.sub_page header h1{
  position: relative;
  z-index: 10;
  text-align:left;
  margin-left: 3%;
  margin-top: 3%;
  margin-bottom: 3%;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #343232;
}

.sub_page header h2 {
  position: relative;
  text-align: center;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #343232;
}

.sub_page header h2 span {
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.sub_page .lead {
  position: relative;
  text-align: center;
  margin-bottom: 25px;
  font-size: 0.8rem;
  letter-spacing: .05em;
  line-height: 2;
}

.sub_page a:hover {
  text-decoration: underline double;
}

.sub_page header h1 .logo-name a:hover {
  text-decoration: none;
}

.sub_page main {
  max-width: 90%;
  margin: 90px auto;
}

.news-item{
  padding-bottom: 15%;
}


.sub_page h3 {
  font-size: 0.5rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .17em;
  margin-top: 35px;
  margin-bottom: 5px;
}

.news .text {
  font-size: 1.7rem;
  font-weight: bold;
  text-align: left;
}

.news .date{
font-size: 0.8rem;
 text-align: left;
}

.news .url{
  max-width: 100%;
  word-break: break-word;
}

/* サブページ（Schedule）PC用screen～960以上
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/
@media screen and (min-width: 960px) {
  .news-item{
    padding-bottom: 5%;
  }
  
}

/* サブページ（Gallery）スマホ・タブレット用　screen960以下
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/

.text-logo{
  width: 1rem;
  vertical-align: middle;
  margin-right: 4px;
}

/* コンテナについて */
.works-list{
  width: 100%;
  margin: 0 auto;
  margin-bottom: 90px;
  display:flex;
  flex-direction: column;
  }

/*　リストの中の画像(子要素）について */
.works-list img{
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
  padding: 30px;
}

.image-item:hover img {
  transform: scale(1.1); /* 拡大 */
  transition-duration: 0.3s; /* 動く時間(なめらかになる) */
  opacity: 0.8; /* 半透明になる */
}


.works-list a {
  display: block; /* 画像全体をリンクエリアにする */
  position: relative;
  overflow: hidden; /* マスクがはみ出さないようにする */
}

/* マスク */
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.2s ease;
}

/* キャプション */
.caption {
  font-size: 1.2rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #595656;

}

/* ホバーでマスク表示 */
.image-item:hover .mask {
  opacity: 1;
}

@media screen and (min-width: 960px) {
/* サブページ（Gallery）PC用　screen　960~
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/
/* コンテナについて */
.works-list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* リストの中の画像（子要素）について */

/*画像そのもの */
.works-list img{
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

}


/* サブページ（Gallery→1枚ページ）スマホ・タブレット端末用
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/
header{
  margin-bottom: 0px;
}

.works_page header {
  position: relative;
  overflow: hidden;
}

.works_page header h1{
  position: relative;
  z-index: 10;
  text-align:left;
  margin-left: 3%;
  margin-top: 3%;
  margin-bottom: 3%;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #343232;
}


.works_page .title{
  width: 60%;
  margin: 5px auto;
  text-align: center;
  font-size: 0.8rem;
}

.works_page .introduce{
  width: 60%;
  margin: 0 auto;
  padding-bottom: 10px;
  text-align: center;
  font-size: 1.2rem;
}

.works_page .works{
  position: relative;
  margin: 0 auto;
  max-width: 70%;
  max-height: 50%;
  display: flex;
  justify-content: center;
  overflow: auto;
}

.works img{
  position: relative;
  width: 100%;
}


.works_page .turn-page{
  width: 75%;
  max-width: 900px;
  margin: 5px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
}
.works_page .back-gallery{
  width: 75%;
  max-width: 600px;
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  padding-bottom: 80px;
  font-size: 1.2rem;
}


@media screen and (min-width: 960px) {
/* サブページ（Gallery→1枚ページ）PC用　screen　960~
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/
.works_page .works{
  position: relative;
  margin: 0 auto;
  max-width: 70%;
  max-height: 60vh;
  display: flex;
  justify-content: center;
  overflow: auto;
}
.works_page .works img {
  max-height: 100%; /* ✅ 親要素（.works）の高さに合わせる */
  width: auto;      /* アスペクト比を維持 */
  height: auto;
  object-fit: contain; /* ✅ 画像の表示バランスを保つ */
  display: block;
}
}


/* サブページ（Gallery）のふわっと表示
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/

/* フェードインアニメーション */
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 画像をふわっと表示 */
.works-list img {
  opacity: 0;
  animation: fadein 1.2s ease-out forwards;
}

.works_page .works{
    opacity: 0;
  animation: fadein 1.2s ease-out forwards;
}






/* サブページ（profile）
----------------------------------ｰｰｰｰｰｰｰｰｰｰ*/
.profile_page header {
  margin-bottom: 30px;
}

.profile-pic{
  display: flex;
  justify-content: center;
}
.profile-pic img{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
}

.profile_page h2{
  font-size: 2rem;
  width: 80%;
  text-align: center;
  margin: 20px auto 0;
  border-bottom: 1px black solid;
}
.profile_page .bio1{
  width: 80%;
  margin: 0 auto;
  padding-top: 20px;
  font-size: 1.0rem;
  letter-spacing: .1em;
}
.profile_page .bio2{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 80px;
  text-align: justify;
  font-size: 1.4rem;
  letter-spacing: .1em;
}


.social-links{
  display: flex;
  margin: 0 auto;
  margin-bottom: 60px;
  font-size: 0.7rem;
  color:gray;

}

.social-links a{
  display: block;
}

.social-links img{
  width: 20px;
  height: auto;
}
.contact{
  margin-left: 5%;
  text-align: center;
}

.followme{
  margin-left: 5%;
  text-align: center;
}

/* サブページ（Profile）PC用　screen　960~*/
@media screen and (min-width: 960px)

  {
    .profile_page main{
      display: flex;
      max-width: 70%;
      margin: 0 auto;
    }

    .profile-pic{
      display: flex;
      justify-content: center;
    }
    .profile-pic img{
      min-width: 400px;
      min-height: 400px;
      border-radius: 50%;
      object-fit: cover;
      margin-top: 30px;
    }

    .profile_page h2{
      font-size: 2rem;
      width: 70%;
      text-align: center;

    }

    .profile_page .social-links{
      width: 70%;
    }

    .profile_page .bio1{
      width: 70%;
      padding-top: 20px;
    }
    .profile_page .bio2{
      width: 70%;
      text-align: justify;
      font-size: 0.8rem;
    }


    }