body {
    font-family: 'garamond', serif; /* 高級感のあるフォント */
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #2f4f4f; /* ダークグリーン */
    line-height: 1.6;
}

main {
    max-width: 1200px;
    text-align:center;
    margin: 2% auto;
}
.category {
    position: relative;
    margin-bottom: 0px;
}

.category img {
    width: 100%;
    height: auto;
    display: block;
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}

p{
  font-size: 16px; /* デフォルトのフォントサイズ */
  line-height: 1.8; /* 行間を適切に設定 */
  margin:5% 5%;
  word-wrap : break-word;
}

/* 画面幅が1080px以下の場合 */
@media (max-width: 1080px) {
    p {
        font-size: 14px; /* フォントサイズを小さくする */
        line-height: 1.6; /* 行間を少し詰める */
        margin: 0 8px; /* 余白を調整 */
    }
}



a{
  color: #fff;
}

h1{
  text-align: center;
  font-size: clamp(26px, 4vw, 60px); /* 最小26px、最大30px */
  line-height: 130%;
  letter-spacing: 0.1em;
  margin:5%;
}

}

h2 {
  text-align: center;
  font-size: clamp(22px, 3vw, 36px); /* 最小22px、最大36px */
  margin:5%;
  
}


h3 {
  text-align: center;
  font-size: clamp(22px, 3vw, 30px); /* 最小22px、最大30px */
  margin: 3% 0;
}


/*==================================================
ヘッダーメニュー
===================================*/
.logo {
    max-width:100%;
    height:auto;
    display:block;
}

.instagram {
    max-width:100%;
    height:auto;
    display:block;
}

.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

/* 画面が768px以下のときにメニューを非表示に */
@media (max-width: 768px) {
    .menu {
        display: none;
    }
}

header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin: 0.5% 0;
}

.logo {
    max-width:100%;
    height:auto;
}
header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

header nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav ul li a {
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

header nav ul li img {
    max-height: 40px;
    display: block;
}

header nav ul li a:hover {
    color: #8fbc8f;
}

.main-banner {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/*==================================================
index スライダーセクション
===================================*/
.slider-container {
    position: relative;
    width: 100%;
    height: 1000px; /* スライダーの高さ */
    overflow: hidden;
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    width: 110%; /* スライダーより大きめに設定 */
    height: 110%; /* スライダーより大きめに設定 */
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    object-fit: cover; /* 画像の比率を保ちながらスライダー内に収める */
}

.slide:nth-child(1) {
    animation-name: moveUp;
}

.slide:nth-child(2) {
    animation-name: moveDown;
    animation-delay: 5s;
}

.slide:nth-child(3) {
    animation-name: moveLeft;
    animation-delay: 10s;
}

.slide:nth-child(4) {
    animation-name: moveRight;
    animation-delay: 15s;
}

/* アニメーションの設定 */
@keyframes moveUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5%); /* 動きを調整 */
    }
}

@keyframes moveDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(5%); /* 動きを調整 */
    }
}

@keyframes moveLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-5%); /* 動きを調整 */
    }
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(5%); /* 動きを調整 */
    }
}

/* 画面幅が1080px以下の場合 */
@media (max-width: 1080px) {
    .slider-container {
        height: 900px; /* スライダーの高さを縮小 */
    }

    .slide {
        width: 100%; /* スライダーと同じ幅に設定 */
        height: 100%; /* スライダーと同じ高さに設定 */
        background-size: cover
        background-position: center; /* 背景を中央に表示 */
    }
}

/* 画面幅が768px以下の場合 */
@media (max-width: 768px) {
    .slider-container {
        height: 500px; /* スライダーの高さをさらに縮小 */
    }

     .slide {
        width: 100%; /* スライダーと同じ幅に設定 */
        height: 100%; /* スライダーと同じ高さに設定 */
        background-size: cover
        background-position: center; /* 背景を中央に表示 */
    }


}
/*==================================================
4ブロック説明文のcss
===================================*/

#works {
  padding: 0px;
  background-color: #fff;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}

.grid-item.text {
  background: #fff;
  padding: 5%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grid-item.text p{
  margin: 0 8px 50px 8px;
}

.grid-item.image {
  position: relative;
  min-height: 300px; /* 最小高さを維持 */
  height: auto; /* コンテンツに応じた高さ */
  overflow: hidden; /* 子要素がはみ出さないように */
}

.parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%; /* 動きを見せる余裕を確保 */
  background-size: cover;
  background-position: center;
  transform: translateY(-4); /* 初期位置 */
  transition: transform 0.1s linear; /* なめらかな動き */
  will-change: transform; /* パフォーマンス最適化 */
}

.image1 {
  background-image: url('../images/work13.jpg');
}

.image2 {
  background-image: url('../images/work18.jpg');
}

.image3 {
  background-image: url('../images/work14.jpg');
}





@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  .container .grid-item:nth-child(1) {
    order: 1;
  }
  .container .grid-item:nth-child(2) {
    order: 2;
  }
  .container .grid-item:nth-child(3) {
    order: 4;
  }
  .container .grid-item:nth-child(4) {
    order: 3;
  }
 .container .grid-item:nth-child(5) {
    order: 5;
  }
  .container .grid-item:nth-child(6) {
    order: 6;
  }
}

/*==================================================
index ジュエリーシリーズ設定
===================================*/
/* 全体エリアのスタイル */
.series-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row-reverse;
}

/* 各ブロックのスタイル */
.series-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 300px; /* 各ブロックの最大幅 */
  text-align: left;
}

.series-block img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.series-block h4 {
  font-size: 1.7em;
  margin: 0 10px;
  color: #777;
  line-height: 1.0;
}

.series-block p {
  font-size: 1.0em;
  color: #333;
  margin: 0 5px;
}

/* 縦書きブロックのスタイル */
.series-block.vertical-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 縦書きブロックのスタイル */
.series-block.vertical-text div {
  writing-mode: vertical-rl; /* 縦書き */
  text-align: left;
  font-size: 1.7em;
  line-height: 0.3;
}

/* レスポンシブ対応 - 横書きへの変更 */
@media (max-width: 768px) {
  .series-area {
    flex-direction: column
    align-items: center;
  }

  .series-block {
    max-width: 100%;
    text-align: center;
  }

  .series-block.vertical-text div {
    writing-mode: horizontal-tb; /* 横書き */
  }
}




/*==================================================
各カテゴリ設定
===================================*/
/* 共通スタイル */
.category {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50vh; /* 高さを画面の50%に設定 */
    min-height: 600px; /* 最小高さを400pxに設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* 画像をコンテナ全体にフィットさせる */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;
}

/* カテゴリごとの背景画像 */
.category.event {
    background-image: url('../images/category1.jpg');
}

.category.profile {
    background-image: url('../images/category2.jpg');
}

.category.company {
    background-image: url('../images/category3.jpg');
}

/* オーバーレイ効果 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.category:hover .overlay {
    opacity: 1;
}

.overlay h2 {
    font-size: 2em;
    letter-spacing: 0.1em;
}

.overlay p {
    margin: 0px 50px 30px 50px;
    font-size: 1.2em;
    letter-spacing: 0.05em;
}

.overlay .btn {
    padding: 10px 20px;
    font-size: 1em;
    color: white;
    border: 1px solid white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.overlay .btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* レスポンシブ対応 */
@media (min-width: 1024px) {
    .category {
        height: 70vh; /* 大きな画面では高さを画面の70%に */
    }
}

@media (max-width: 768px) {
    .category {
        height: 50vh; /* タブレットサイズ */
    }
    .overlay h2 {
        font-size: 1.6em;
    }
    .overlay p {
        font-size: 1em;
    }
    .overlay .btn {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .category {
        height: 400px; /* 小さな画面では400px固定 */
    }
    .overlay h2 {
        font-size: 1.4em;
    }
    .overlay p {
        font-size: 0.9em;
    }
    .overlay .btn {
        font-size: 0.8em;
    }
}


/*==================================================
各ページのレイアウト設定
===================================*/


.banner-img-container {
    width: 100%;
    overflow: hidden; /* コンテナ外の画像を切り取る */
    position: relative;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をカバー表示 */
    object-position: center; /* 画像の中心を表示 */
    display: block;
}

/* ページコンテンツ */
.page-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

.page-content h2 {
    font-size: 24px;
    color: #2f4f4f;
    margin-bottom: 20px;
}

.page-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}






/* プロフィールレイアウト */
.profile-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 上段と下段共通 */
.profile-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 上段: ポートレートとテキスト */
.profile-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-text h3 {
    font-size: 20px;
    color: #2f4f4f;
    margin-bottom: 10px;
}

.profile-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* 下段: プロフィール情報と作品画像 */
.profile-info {
    flex: 1;
}

.profile-info h3 {
    font-size: 20px;
    color: #2f4f4f;
    margin-bottom: 10px;
}

.profile-info p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.profile-works img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;

}

/* レスポンシブ対応 */
@media  screen and (max-width: 768px) {
    .profile-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-text,
    .profile-info {
        text-align: center;
    }

    .banner-img-container {
        height: 400px; /* 小さい画面では高さを調整 */
}
}


/*==================================================
company
===================================*/
.company_h2{
    margin:5% auto;
    text-align:center;

}

.info-list {
    margin: 0 auto; /* 中央寄せ */
    max-width: 760px; /* リスト全体の最大幅 */
}

.info-list li {
    padding: 20px;
    border-bottom: 1px solid #ddd; /* ボーダーを明示的に設定 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* 縦方向の位置揃え */
}

.info-list li:last-child {
    border-bottom: none; /* 最後のリスト要素のボーダーを削除 */
}

.info-list li span {
    min-width: 150px; /* ラベルの最小幅 */
}

.info-list li span.label {
    margin-right: 10px; /* ラベルと内容の間隔 */
    font-size: 0.8em;
}

.info-list li span.value {
    flex: 1; /* 内容が伸縮可能 */
    text-align: left; /* 通常時は左揃え */
 }



/* レスポンシブデザイン */
@media screen and  (max-width: 768px) {
    .info-list li {
        flex-direction: column; /* 小さい画面では縦並び */
        align-items: flex-start; /* ラベルと内容を左寄せに */
        padding:3% 10%;
    }

    .info-list li span {
        min-width: 0; /* ラベル幅を解除 */
        margin-right: 0;
    }

    .info-list li span.label {
        margin-bottom: 0.5em; /* ラベルと内容の間隔 */
    }

    .info-list li span.value {
        text-align: left; /* 小さい画面では中央揃え */
        margin-top: -5px; /* ラベルとの間隔を微調整 */
    }
}

.map {
     margin:5% auto;
     width: 100%;
     aspect-ratio: 16 / 9;
}

.map iframe {
     width:100%;
     height:100%;
}




/*==================================================

ハンバーガーメニューのアイコンスタイル

===================================*/



/* メニューコンテンツのスタイル */

.hamburger { 
  display: none; /* 初期状態で非表示 */
  position: fixed; /* 右下に固定表示 */
  bottom: 20px;    /* 下端からの距離 */
  right: 20px;     /* 右端からの距離 */
  font-size: 35px;
  color: #ddd;
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 65px;        /* アイコンの幅 */
  height: 65px;       /* アイコンの高さ */
  background-color: #2f4f4f; /* 背景色 */
  border-radius: 50%;  /* 円形にする */
  transition: opacity 0.3s ease; /* 半透明のアニメーション */
  z-index: 1001; /* 他の要素の上に表示 */
}

/* 小さな画面ではハンバーガーアイコンを表示 */
@media screen and (max-width: 768px) {
  .hamburger {
    display: flex !important;
  }
}

/* オーバーレイ */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9); /* 背景色を変更 */
  z-index: 1000; /* メニューより下に配置 */
  opacity: 0; /* 初期状態で透明 */
  visibility: hidden; /* 非表示 */
  transition: opacity 0.3s ease; /* フェードイン/アウトのアニメーション */
}

/* メニューコンテンツ */
#menu-content {
  position: fixed;
  bottom: 100px; /* ハンバーガーアイコンの上に配置 */
  right: 60px; /* ハンバーガーアイコンと整列 */
  opacity: 0; /* 初期状態で透明 */
  visibility: hidden; /* 初期状態で非表示 */
  display: flex; /* フレックスボックス */
  flex-direction: column; /* 縦方向に並べる */
  align-items: flex-end; /* 右寄せ */
  z-index: 1002; /* オーバーレイの上に配置 */
}

#menu-content ul {
  list-style: none; /* リストスタイルを削除 */
  margin: 0; /* 外側の余白を削除 */
  padding: 0; /* 内側の余白を削除 */
}

#menu-content ul li {
  opacity: 0; /* 初期状態で透明 */
  transform: translateY(20px); /* 下からアニメーション */
  transition: opacity 0.3s ease, transform 0.3s ease; /* アニメーション設定 */
  margin-bottom: 20px; /* 各メニューの間隔 */
}

#menu-content ul li a {
  color: #2f4f4f; /* リンク文字色 */
  text-decoration: none; /* 下線を削除 */
  font-size: 18px; /* フォントサイズ */
  padding: 10px 15px; /* 内側の余白 */
}

#menu-content ul li a:hover {
  color: #8fbc8f; /* ホバー時の文字色 */
}


/* オープン時のスタイル */
#overlay.active {
  opacity: 1; /* 表示状態にする */
  visibility: visible; /* 表示状態にする */
}

#menu-content.active {
  opacity: 1; /* 表示状態にする */
  visibility: visible; /* 表示状態にする */
}

#menu-content.active ul li {
  opacity: 1; /* 表示状態にする */
  transform: translateY(0); /* 元の位置に移動 */
}

/* 768px以上の場合のスタイル */
@media screen and (min-width: 769px) {
  .hamburger {
    display: none; /* ハンバーガーメニューを非表示 */
  }

  #menu-content {
    display: none; /* メニューコンテンツも非表示 */
  }
}



/*==================================================
フッター設定
===================================*/

footer {
    text-align: center;
    padding: 20px 0;
    margin: 0 auto;
    position: relative;
    bottom: 0;
    width: 100%;
}