@import url(./reset.css);

/* 全体のフォント設定
--------------------------------------- */
/* Google Fontsのインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

/* フォントの設定 */
body {
  font-family: 'Noto Sans JP', sans-serif; /* 本文にNoto Sans JPを適用 */
  line-height: 1.6;
  color: #333;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif; /* 見出しにPlayfair Displayを適用 */
  font-weight: 700;
}

  
  /* 見出しタグのサイズと間隔 */
/* Google Fontsをインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

/* 全体設定 */
body {
  font-family: 'Noto Sans JP', sans-serif; /* 本文フォント */
  font-size:16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
}

/* 見出し設定 */
h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

h3 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

/* 段落の設定 */
p {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* リンク設定 */
a {
  font-family: 'Noto Sans JP', sans-serif;
  color: #007BFF;
  text-decoration: none;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}


/* 汎用
------------------------------------- */
  .text-left{
    text-align: left;
  }

/*  header
------------------------------------- */

/* ヘッダー全体 */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1000;
  background-color: transparent;
}


/* ハンバーガーメニュー */
.hamburger-menu {
  display: flex;
  flex-direction: row; /* 縦方向に棒を配置 */
  justify-content: space-between;
  align-items: center; /* 中央揃え */
  width: 20px; /* メニュー全体の幅 */
  height: 20px; /* メニュー全体の高さ */
  cursor: pointer;
  padding: 1%;
  background: rgba(255,255,255,0.6);
  /* border-radius: 50% 0% 0% 50%;  */
}


/* 縦棒のスタイル */
.hamburger-menu .bar {
  width: 1px; /* 縦棒の太さ */
  height: 80%; /* 縦棒の長さを全体の高さに対する割合で指定 */
  background-color: #333; /* 縦棒の色 */
  border-radius: 2px; /* 棒を丸くする */
  transition: all 0.3s ease; /* アニメーション */
}

/* ハンバーガーメニューがアクティブなときのアニメーション */
.hamburger-menu.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(8px, -8px);
}

.hamburger-menu.active .bar:nth-child(2) {
  opacity: 0; /* 中央の棒を非表示にする */
}

.hamburger-menu.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(-5px, -5px);
}

/* ナビゲーションメニュー */
.nav-menu {
  position: fixed;
  top: 0;
  left: 100%; /* 初期状態で画面外に配置 */
  width: 100%;
  height: 100%;
  background-color: rgba(3,3,3,0.8); /* 背景色 */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: left 0.3s ease; /* スライドアニメーション */
  z-index: 999;
}

.nav-menu.active {
  left: 0; /* 画面内にスライドイン */
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.nav-menu ul li {
  margin: 20px 0;
}

.nav-menu ul li a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-menu ul li a:hover {
  color: #007BFF;
}

/* 閉じるボタン */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 1200;
}

.close-btn:hover {
  color: #FF6347;
}


/* ハンバーガーメニュー */
.hamburger-menu {
  align-items: center;
  cursor: pointer;
  z-index: 1100;
}

/* 縦棒のスタイル */
.hamburger-menu .bar {
  background-color: #333; /* 横棒の色 */
  border-radius: 2px; /* 棒を丸くする */
  transition: all 0.3s ease; /* アニメーション */
}



.hamburger-menu.active .bar:nth-child(2) {
  opacity: 0; /* 中央の棒を消す */
}


/*20250109
-----------------------------*/
.main-header {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%; /* ヘッダーを画面幅いっぱいに */
  height: 60px; /* 必要な高さを指定 */
  z-index: 10; /* 他の要素の上に表示 */
  background-color: transparent; /* 背景透明の場合も問題ない */
  display: flex;
  justify-content: flex-end; /* ハンバーガーメニューを右寄せ */
  pointer-events: none; /* デフォルトでクリックを無効化 */
}

.main-header .hamburger-menu,
.main-header .nav-menu {
  pointer-events: auto; /* 必要な部分のみクリック可能 */
}

/* list-style
------------------------- */
li{
  list-style: none;
}
.work-content ul li{
  /* padding-left: 40px; */
}
.work-content ul li::before {
  content: "•";
  color: rgb(0, 123, 255);
  font-size: 18px;
  position: absolute;
  left: 0px;
  top: 2px;
}

/* midasi
----------------------- */
/* 見出しのデザイン調整 */
h2 {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

/* シンプルなアンダーライン */
h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 4px;
  background-color: #df3f3f;
  margin: 8px auto 0;
  border-radius: 2px;
}



/* H3（小見出し） */
h3 {
  font-size: 1.3em;  /* 約24px */
  font-weight: bold;
  color: #333;
  padding: 6px 12px;
  background-color: rgba(0, 86, 179, 0.1); /* 薄い青の背景 */
  display: inline-block;
  border-radius: 5px;
}



/*  sec-navi
-------------------------------------- */
/* ナビゲーションボタンのコンテナ */
.scroll-nav {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

/* ボタンデザイン */
.scroll-btn {
  width: 50px;
  height: 50px;
  background: rgba(0, 86, 179, 0.8); /* 半透明のブルー */
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* ホバー時のアニメーション */
.scroll-btn:hover {
  background: rgba(0, 86, 179, 1);
  transform: scale(1.1);
}


section {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* フェードアウト用 */
.fade-out {
  opacity: 0;
}

/* フェードイン用 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* フェードインのアニメーション */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}


/*  20250306
----------------------------------- */
@media screen and (max-width: 768px) {
  
  /*  共通部分
  ---------------------------- */
  section{
    height: auto !important;
  }

 

  
}