html {
    font-size: 100%; 
    scroll-behavior: smooth;
}
body {
    display: flex;
  flex-direction: column;
  min-height: 100vh;
    background-color: #FFFFF0;
    font-family: "M PLUS 1", sans-serif;
  font-weight: 100;
  font-style: normal;
  color: #242424;
  margin: 0;
  overflow-x: hidden; /* 横方向のはみ出しを強制的にカットする */
}


/* すべてのリンクの下線を消す */
a {
  text-decoration: none;
  color: #459472;
  font-weight: 400;
}
/* 訪問済みのリンク */
a:visited {
  color: #556b2f; /* 訪問済みのリンクの色 */
}

.fixed-menu{
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
}
p {
    overflow-wrap: break-word;
}
img, video {
    max-width: 100%;
    height: auto;
}
header {
    position: fixed;
  
    background: linear-gradient(to bottom, #FFFFF0 80%, rgba(252, 246, 223, 0) 100%);
    height: calc(20px + 15dvh);
    width: 100%;
    top: 0;
    z-index: 50;
    transform: translate3d(0,0,0);
}
.logo-box{
  display: flex;
  justify-content: center;
  align-items: center;

}
.logo {
   position: fixed; /* 画面右上に固定する場合 */
    top: 20px;

    
    
    z-index: 98;
}
/* ボタンの基本スタイル */
.menu-btn {
    position: fixed; /* 画面右上に固定する場合 */
    top: 30px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 100;
    
}

.menu-btn span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #8C8C8B;
    position: absolute;
    left: 5px;
    border-radius: 1.5px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* アニメーションの設定 */
}

/* 3本の線の位置調整 */
.menu-btn span:nth-child(1) {
    top: 8px;
    opacity: 1;
}

.menu-btn span:nth-child(2) {
    top: 18px;
    opacity: 1;
}

.menu-btn span:nth-child(3) {
    top: 28px;
    opacity: 1;
}

/* JavaScriptで付与する active クラス時のスタイル */

/* 真ん中の線を非表示にする */
.menu-btn.active span:nth-child(2) {
    opacity: 0;
}

/* 上下の線を回転させてバツ印にする */
.menu-btn.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg); /* Y軸方向に移動して回転 */
    opacity: 1;
}

.menu-btn.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg); /* Y軸方向に移動して逆回転 */
    opacity: 1;
}
/* --- ハンバーガーメニューを右から出す --- */
.menu {
    position: fixed;
    top: 0;
    right: 0; /* 左ではなく右基準に */
    width: 90dvw;
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.95); /* 透明度はrgbaが便利 */
    transform: translateX(100%); /* 右側に隠す */
    transition: transform 0.6s ease-in-out;
    z-index: 99;
}

nav ul {
    padding: 0;
    margin-top: 15dvh; /* メニュー全体の開始位置 */
    list-style: none;
}
nav li {
    /* [重要] 上下に余白を作る */
    margin-bottom: 1.2rem; 
    border-bottom: solid #8C8C8B 1px;
   font-size: clamp(14px, 2vw, 18px);
    text-align: center;
}

/* 最後の項目だけ下の余白を消す（お好みで） */
nav li:last-child {
    margin-bottom: 0;
}

/* 文字のクリックできる範囲を広げる */
nav li a {
    display: block;    /* 行全体をクリック可能にする */
    padding: 1.2rem 0; /* 文字の上下に広めの余白を作る */
}

.menu.active {
    transform: translateX(0); /* activeクラスがついたら表示 */
}



h1 {
   left: 3dvw;
   top: 3dvh;
    position: fixed;
  font-weight: 100;
    font-size: clamp(20px, 2vw, 24px);
    z-index: 52;
 
}
h2 {
    margin-top: 200px;
    text-align: center;
font-weight: 100;
    font-size: clamp(12px, 2vw, 15px);
    z-index: 52;

}
main {
    flex: 1; /* これにより、footerを下に押し出す力が働きます */
    width: 100%;
    padding-top: calc(20px + 15dvh); /* ヘッダーと被らないための余白 */
    
   
}
/* --- [修正点] ここで画像と動画を重ねる --- */
.hero-container {
    position: relative; /* 子要素の基準点にする */
    width: 100%;
    line-height: 0; /* 下にできる謎の隙間を消す */
    display: block;
}
.wood {
  
    width: 100%;
    height: auto;
    max-height: 80dvh; /* スマホで縦長になりすぎないよう制限 */
    object-fit: cover; /* 枠に合わせて綺麗に収める */
    
    z-index: 1;
}

.topvideo {
    position: absolute; 
    top: 50%; /* 上から50%の位置 */
    left: 50%; /* 左から50%の位置 */
    transform: translate(-50%, -50%); /* 自身のサイズの半分だけ戻して真ん中へ */
    
    /* レスポンシブなサイズ設定 */
    width: 70dvw;   /* 画面幅の70%（スマホで見やすいサイズ） */
    max-width: 600px; /* PCなど大きな画面でも広がりすぎない制限 */
    
    border: 2dvw solid #FFFFFF; /* 白枠も画面幅に合わせて変化 */
    border-radius: 10px;
    z-index: 2;
}
h3 {
    margin-bottom: 2.5rem; 
    padding-left: 5dvw;
     font-weight: 200;
    font-size: clamp(16px, 2vw, 20px);
}
h4 {
    margin-top: 50px;
    margin-bottom: 2.5rem; 
    padding-left: 5dvw;
     font-weight: 100;
   font-size: clamp(14px, 2vw, 18px);
}


/* 段落ごとの設定 */
.text-section p {
    margin-bottom: 2rem;   /* 段落と段落の間の余白（brを2回打つ代わり） */
    line-height: 2;       /* 1行ごとの高さ（読みやすさの調整） */
    padding-left: 5dvw;
    font-size: clamp(13px, 2vw, 16px);
}

.text-section p:last-child {
    margin-bottom: 0;
}
#concept-text {
    margin-top: 300px; /* テキスト間の余白 */
}
#prof-text {
    margin-top: 300px; /* テキスト間の余白 */
}

#gallery-text {
    margin-top: 300px; /* テキスト間の余白 */

}
.gallery-img-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* すべて中央に */
    width: 100%;
}

.gallery-item {
    margin-top: 300px; /* セットごとの間隔 */
    width: 80%;
    max-width: 600px; /* PCで見ても広がりすぎないように */
    text-align: center;
}
.gallery-item:first-child {
    margin-top: 50px;
}
/* 1. 通常の状態（隠れている） */
.gallery-item img {

    width: 100%; /* 親（.gallery-item）の幅いっぱいに広げる */
    height: auto;
    border-radius: 10px; /* お好みで角を少し丸くしても素敵です */
    /* 既存の設定にこれをプラス */
    opacity: 0;
    transform: translateY(30px) scale(1); /* 移動と拡大をセットで管理 */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* 2. フェードイン発動（JavaScriptで .show が付いた時） */
.gallery-item.show img {
    opacity: 1;
    transform: translateY(0) scale(1); /* 位置を戻し、サイズは標準 */
}

/* 3. マウスを置いた時（hover） */
/* [重要] .show が付いている時だけ拡大するようにします */
.gallery-item.show img:hover {
    transform: translateY(0) scale(1.05); /* 位置はそのまま、サイズだけ大きく */
    cursor: pointer;
}

.gallery-item p {
    padding-left: 0;
}


.text-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.text-section.show {
    opacity: 1;
    transform: translateY(0);
}
footer {
  position: static;
  
    /* body の flex-direction: column; と組み合わせて一番下に配置 */
    margin-top: auto; 
    
    width: 100%;
  
}
/* --- フッターの画像と文字の重なり --- */
#footer-inner {
    margin-top: 200px; /* 前のセクションとの間隔 */
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: hidden;
   
}

.wood2 {
/* 高さを少し抑える（1000pxだとスマホで長すぎるため） */
    height: 80dvh; 
    min-height: 500px; /* 最低限の高さ */
    width: 100%;
   object-fit: cover; 
    opacity: 0.5;
}

.footer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    line-height: 1.8; /* 文字の行間を戻す */

     
}
.footer-text p {
        padding-left: 0;
}
/* 既存の共通設定 */
#concept, #prof, #gallery {
    scroll-margin-top: calc(20px + 15dvh);
}

/* リンク集（フッター）専用の設定を個別に追加 */
#link {
    
    scroll-margin-top: calc(20px + 25dvh); 
}