/* 全ブラウザでスクロールバーを強制非表示（ガタつき完全防止） */
html, body {
    -ms-overflow-style: none !important;  /* IE, Edge */
    scrollbar-width: none !important;  /* Firefox */
    overflow-y: auto !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;  /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* スクロール追従ヘッダーの幅伸縮による干渉を防止 */
header, .header, #header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body{    
    font-family: "Yu Mincho", "YuMincho", "游明朝", "游明朝体", serif !important;
    font-weight: 500; /* 游明朝がかすれて見えないよう、標準的なウェイト（Medium相当）に調整することをお勧めします */
}

/* ビデオタグ自体にも制限をかける */
.video-wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;          /* ← ここが最重要 */
    height: 100%;
    max-width: 1920px;    /* ← mainImage と揃える */
    transform: translate(-50%, -50%);
    object-fit: cover;
}




/* 1920px以上のモニターで、左右に隙間ができた時の背景色 */
body {
    background-color: #f6f4f1; /* 動画の外側を暗いグレーにして馴染ませる */
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}





html, body { margin: 0; padding: 0; background: transparent !important; }
.mv-spacer { height: 0; background: transparent !important; pointer-events: none; }



/* 2. ヘッダーとアコーディオン（最前面） */
#gHeader {
    z-index: 999999 !important;
    position: fixed;
    width: 100%;
}
#gHeader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* PC版アコーディオン：main.cssのdisplay:noneを上書きしてJSで制御 */
header .dropDown {
    display: none;
    position: absolute !important;
    top: 89px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000000 !important;
    background: linear-gradient(to right, #a78300, #695200) !important;
    pointer-events: auto !important;
}

/* デザインパーツ */
.wrap { max-width: 1920px; margin: 0 auto; position: relative; }
.wrap2 { max-width: 1000px; margin: 0 auto; position: relative; }
.content-box { display: flex; align-items: center; padding: 20px 0 80px 0; }
.content-image { width: 50%;  }
.content-image img { width: 100%; }
@media screen and (min-width: 1820px) and (max-width: 2500px) {
       .content-text { width: 500px; padding:0 20% 0 24%; position: absolute; right: 5%; /*box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */text-align:center;}
    }

@media screen and (min-width: 1710px) and (max-width: 1820px) {
        .content-text { width: 500px; padding:0 18% 0 22%; position: absolute; right: 5%; /*box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */text-align:center;}
}

@media screen and (min-width: 1500px) and (max-width: 1709px) {
        .content-text { width: 500px; padding:0 16% 0 20%; position: absolute; right: 5%; /*box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */text-align:center;}
}

@media screen and (min-width: 1460px) and (max-width: 1499px) {
        .content-text { width: 500px; padding:0 14% 0 22%; position: absolute; right: 5%; /*box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */text-align:center;}
}


@media screen and (min-width: 1300px) and (max-width: 1459px) {
        .content-text { width: 500px; padding:0 9% 0 15%; position: absolute; right: 5%; /*box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */text-align:center;}
}

@media screen and (min-width: 741px) and (max-width: 1299px) {
        .content-text { width: 500px; padding:0 9% 0 15%; position: absolute; right: 5%; /*box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */text-align:center;}
}
@media screen and (max-width: 740px) {
        .content-text { width: 500px; padding:0 9% 0 15%; position: absolute; right: 5%; /*box-shadow: 20px 20px 60px rgba(0,0,0,0.05); */text-align:center;}
}


.design-reverse { justify-content: flex-end; }
.design-reverse .content-text { right: auto; left: 0; }
.num { font-size: 80px; color: #bca77b; line-height: 1; font-family: serif; display: block; position: relative; left: 38%; top: 25px; z-index: 1;}
.num2 { font-size: 80px; color: #bca77b; line-height: 1; font-family: serif; display: block; position: relative; top: 25px; right:38%; z-index: 1;}
.whitebk{background:#fff; padding:15px 15px;opacity:1;}

.whitebk p[style*="line-height:2.4"] {
    text-align: left !important;
}

@media screen and (max-width: 959px) {
    .whitebk {
        margin-top: -30px !important; /* 数字に半分程度被るように位置調整 */
        padding-top: 30px !important;
    }
    .whitebk hr {
        margin-left: 0 !important;
    }
    .whitebk p[style*="line-height:2.4"] {
        text-align: left !important;
    }
}
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999999; display: flex; align-items: center; justify-content: center; }

/* スマホ版調整 */
@media screen and (max-width: 1024px) {
    #gNav.open { display: block !important; opacity: 1 !important; visibility: visible !important; }
    .close.sp { cursor: pointer !important; pointer-events: auto !important; }
}
/* フェードイン演出：動きを大きく、よりゆっくりに */
.fade-up {
    opacity: 0 !important;
    transform: translateY(100px) !important; /* 移動距離を大きく(50→100) */
    transition: opacity 2.0s ease-out, transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) !important; /* 時間を長く(1.0→1.8) */
    visibility: hidden;
    will-change: opacity, transform; /* ブラウザの負荷を軽減し動きを滑らかにする */
}

/* 活性化状態 */
.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible;
}

/* 02に少しディレイ（遅延）をかける場合（任意） */
#design.is-active {
    transition-delay: 0.2s !important;
}

/* ローディング画面のカスタマイズ */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* 背景は白 */
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-logo {
    width: 120px; /* ロゴのサイズはお好みで調整してください */
    opacity: 0;
    transform: scale(0.95);
    animation: logoFadeIn 1.5s ease-out forwards;
}

.loading-logo img {
    width: 100%;
    height: auto;
}

/* ロゴがふわっと現れるアニメーション */
@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* スマホ版（1024px以下）のレイアウト調整 */
@media screen and (max-width: 1024px) {
    /* 1. フレックス方向を縦に強制 */
    .content-box {
        flex-direction: column !important;
        padding: 0; /* 上下パディングをスマホ用に調整 */
    }

    /* 2. 画像エリアを横幅いっぱいにする */
    .content-image {
        width: 100% !important;
        height: auto !important; /* 高さを自動にしてアスペクト比を維持 */
        margin-bottom: -100px; /* テキストとの間に余白を作成 */
    }

    .content-image img {
        height: auto !important;
        object-fit: contain;
    }

    /* 3. テキストエリアを画像の下に配置（浮いている状態を解除） */
    .content-text {
        position: static !important; /* 絶対配置を解除して下に並べる */
        width: 100% !important;
        padding: 30px !important;
        box-shadow: none !important; /* スマホではフラットなデザインに */
        right: auto !important;
        left: auto !important;
    }

    /* 4. 反転レイアウト（02など）もスマホでは標準の順序に */
    .design-reverse {
        justify-content: flex-start !important;
    }

    /* 5. 文字サイズの微調整 */
    .content-text h3 {
        font-size: 23px !important;
        padding-top: 25px;
    }
    .num {
        font-size: 60px !important;
        left:0%;
		top: 25px !important;
        
    }
    
     .num2 {
        font-size: 60px !important;
        right:0%;
		top: 25px !important;
    }
}


@media screen and (max-width: 740px) {
    /* 3. テキストエリアを画像の下に配置（浮いている状態を解除） */
    .content-text {
        position: static !important; /* 絶対配置を解除して下に並べる */
        width: 100% !important;
        padding: 30px !important;
        box-shadow: none !important; /* スマホではフラットなデザインに */
        right: auto !important;
        left: auto !important;
        text-align: center !important; /* テキストを中央寄せ */
    }
}
/* --- 00-1 ローレルの約束 キャッチコピー --- */
#laurel-promise {
    padding: 100px 0 60px 0; /* 上下の余白 */
    background: transparent; /* MV動画が見えるように透明 */
}

.promise-box {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center; /* 縦中央 */
    gap: 80px; /* タイトルとテキストの間隔 */
}

/* 左：縦書きタイトル */
.promise-ttl p {
    writing-mode: vertical-rl; /* 縦書き（右から左） */
    -ms-writing-mode: tb-rl;
    font-size: 36px;
    color: #bca77b; /* ゴールド */
    line-height: 1.8;
    letter-spacing: 0.15em; /* 文字間隔 */
    position: relative;
    white-space: nowrap; /* 改行を防ぐ */
}

.promise-ttl p span {
    font-size: 40px;
    font-weight: bold;
    display: block;
    margin-top: 10px; /* 縦書き時の上の余白 */
}

/* 右：横書きテキスト */
.promise-text p {
    font-size: 16px;
    color: #333;
    line-height: 2.8; /* 行間を広く */
    margin-bottom: 0.5em;
}

.promise-text p:last-child {
    margin-bottom: 0;
}

/* フェードインの遅延設定用 */
.delay-03.fade-up.is-active {
    transition-delay: 0.3s !important;
}

/* スマホ版（1024px以下）のレイアウト調整 */
@media screen and (max-width: 1024px) {
    #laurel-promise {
        padding: 60px 20px 40px 20px;
    }

    .promise-box {
        flex-direction: column !important; /* 縦並びに */
        gap: 40px;
        position:relative;
        left:-20px;
    }

    .promise-ttl p {
        writing-mode: horizontal-tb; /* スマホでは横書きに */
        -ms-writing-mode: lr-tb;
        text-align: center;
        font-size: 18px;
    }

    .promise-ttl p span {
        font-size: 32px;
        display: inline; /* スマホでは横に並べる */
        margin-left: 10px;
    }

    .promise-text p {
        font-size: 14px;
        line-height: 2.0;
        text-align: center; /* 中央寄せ */
    }
}
.kuwa{position: relative; top: -20px;} 

/* PC・共通設定 */
hr {
    border: none;
    border-top: 1px solid #bca77b;
    position: static !important; /* 位置ズレ（left）を解除 */
    left: auto !important;
    width: 85% !important; /* 白枠の幅いっぱいにフィット */
    max-width: 100% !important;
    margin: 15px 0 20px 85px !important;
    box-sizing: border-box !important;
}

/* スマホ表示時 */
@media screen and (max-width: 959px) {
    .whitebk hr,
    hr {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        margin-left: 20px !important;
        margin-right: 0 !important;
    }
}
/* --- 05 ラインナップ（新デザイン ＋ 共通ボタン用） --- */
#lineup {
    padding: 100px 0 0 0;
    background:#fff;
}

.lineup-border-box {
    border-top: 1px solid #a78300;
    border-bottom: 1px solid #a78300;
    padding: 60px 0;
    margin-bottom: 50px;
    background-color: #fff; /* 白背景でゴールドラインを強調 */
}

.lineup-grid-new {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.lineup-brand {
    flex: 1;
    text-align: center;
    position: relative;
}

/* 境界の縦線 */
.lineup-brand:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 60px;
    background-color: #333;
}

.brand-en {
    font-size: 26px;
    color: #a78300!important;
    font-family: serif;
    margin-bottom: 5px;
}

.brand-jp {
    font-size: 13px;
    color: #a78300!important;
    letter-spacing: 0.1em;
}

.lineup-btn-area {
    text-align: center;
}

/* 共通ボタンのホバー演出（白っぽく変更） */
.kuwa {
    display: inline-block;
    transition: filter 0.3s, transform 0.3s;
}
.kuwa:hover {
    filter: brightness(1.1); /* 明るくして白っぽく見せる */
    transform: translateY(-3px);
}

/* スマホ版（1024px以下） */
@media screen and (max-width: 1024px) {
    .lineup-border-box {
        padding: 40px 0;
    }
    .lineup-grid-new {
        flex-wrap: wrap;
    }
    .lineup-brand {
        flex: 0 0 50%;
        margin: 20px 0;
    }
    .lineup-brand:nth-child(2n)::after {
        display: none;
    }
    .brand-en { font-size: 20px; }
}
.section-ttl{    text-align: center;    font-size: 30px;    margin-bottom: 2%;}

/* --- 06 竣工ギャラリー（新デザイン） --- */
#gallery {
      background: transparent;
}

/* ラインナップと同じゴールドの境界線ボックス */
.gallery-border-box {
    border-top: 1px solid #a78300;
    border-bottom: 1px solid #a78300;
    padding: 20px 0 20px 20px; /* 画像上下のゴールドの座布団（指示書再現） */
    background-color: #fff; 
    margin-bottom: 30px;
}

@media screen and (min-width: 741px){
.gallery-main-img {
    width: 49%;
    line-height: 0; /* 画像下の隙間排除 */
    display:inline-block;
    vertical-align: middle;
}
}
@media screen and (max-width: 740px){
.gallery-main-img {
    width: 100%;
    line-height: 0; /* 画像下の隙間排除 */
    overflow: hidden;
}
	/* ▼ ここから追加（80%サイズに縮小） ▼ */
    .gallery-main-img p[style*="font-size:2.1em"] {
        font-size: 1.7em !important; /* 2.1em × 80% ≒ 1.7em */
    }
    .gallery-main-img p[style*="font-size:1.25em"] {
        font-size: 1.0em !important; /* 1.25em × 80% = 1.0em */
    }
    /* ▲ ここまで ▲ */
}


.gallery-main-img img {
    width: 100%;
    height: auto;
    /* MOVIEアイコン付きの画像（image_4.png）をそのまま使用 */
}

/* テキストエリア */
.gallery-text-area {
    text-align: center;
    margin-bottom: 30px;
}

.gallery-text-area p {
    font-size: 16px;
    color: #333;
    letter-spacing: 0.1em;
}

/* ボタンエリア */
.gallery-btn-area {
    text-align: center;
}
.galbtm{margin-top:40px;}
.galbtm2{margin-top:40px;}
/* スマホ版（1024px以下） */
@media screen and (max-width: 1024px) {
    #gallery {
        padding: 0px 20px;
    }
    .gallery-border-box {
        padding: 10px 0; /* スマホでは少し狭く */
    }
    .gallery-text-area p {
        font-size: 14px;
    }
}


@media screen and (min-width: 446px) and (max-width: 740px){
  .gallery-border-box {
        padding: 10px 0; /* スマホでは少し狭く */
        height: 325px;
        margin-bottom: 50px;
    }
    .gallery-border-box2{
        height: 360px;
        margin-bottom: 50px;
    }
    .pgt{margin-top:10px;}
    .galbtm{
    	position:relative;
    	top:-20px;
    	
    	}
    	
     .galbtm2{
    	position:relative;
    	top:-20px;
    	
    	}
} 



@media screen and (min-width: 436px) and (max-width: 445px){
  .gallery-border-box {
        padding: 10px 0; /* スマホでは少し狭く */
        height: 325px;
        margin-bottom: 50px;
    }
    .gallery-border-box2{
        height: 360px;
        margin-bottom: 50px;
    }
    .pgt{margin-top:10px;}
    .galbtm{
    	position:relative;
    	top:-33px;
    	
    	}
    	
     .galbtm2{
    	position:relative;
    	top:-33px;
    	
    	}
} 

@media screen and (min-width: 416px) and (max-width: 435px){
  .gallery-border-box {
        padding: 10px 0; /* スマホでは少し狭く */
        height: 325px;
        margin-bottom: 50px;
    }
    .gallery-border-box2{
        height: 360px;
        margin-bottom: 50px;
    }
    .pgt{margin-top:10px;}
    .galbtm{
    	position:relative;
    	top:-33px;
    	
    	}
    	
     .galbtm2{
    	position:relative;
    	top:-26px;
    	
    	}
} 




@media screen and (min-width: 396px) and (max-width: 415px){
  .gallery-border-box {
        padding: 10px 0; /* スマホでは少し狭く */
        height: 325px;
        margin-bottom: 50px;
    }
    .gallery-border-box2{
        height: 360px;
        margin-bottom: 50px;
    }
    .pgt{margin-top:10px;}
    .galbtm{
    	position:relative;
    	top:-26px;
    	
    	}
    	
     .galbtm2{
    	position:relative;
    	top:-26px;
    	
    	}
} 



@media screen and (min-width: 381px) and (max-width: 395px){
  .gallery-border-box {
        padding: 10px 0; /* スマホでは少し狭く */
        height: 325px;
        margin-bottom: 50px;
    }
    .gallery-border-box2{
        height: 360px;
        margin-bottom: 50px;
    }
    .pgt{margin-top:10px;}
    .galbtm{
    	position:relative;
    	top:-12px;
    	
    	}
    	
     .galbtm2{
    	position:relative;
    	top:-12px;
    	
    	}
} 

@media screen and (max-width: 380px) {
     .gallery-border-box {
        padding: 10px 0; /* スマホでは少し狭く */
        height: 303px;
        margin-bottom: 50px;
    }
      .gallery-border-box2{
        height: 350px;
        margin-bottom: 50px;
    }
    .pgt{margin-top:10px;}
    .galbtm{
    	position:relative;
    	top:-20px;
    	
    	}
    	
    .galbtm2{
    	position:relative;
    	top:-10px;
    	
    	}
}


/* --- 07 オリジナル企画 --- */
#original-project {
    padding: 40px 0;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 40px 30px; /* 上下左右の余白 */
}

.project-item {
    background: transparent;
    transition: transform 0.3s;
}

.project-img {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: auto;
    transition: 0.5s;
}

.project-item:hover .project-img img {
    transform: scale(1.05);
}

.project-info {
    text-align: center;
}

.project-en {
    font-size: 20px;
    color: #7b6311 !important;
    font-family: serif;
    margin-bottom: 3px;
    letter-spacing: 0.05em;
}

.project-jp {
    font-size: 11px;
    color: #7b6311 !important;
    margin-bottom: 12px;
}

.project-border {
    width: 100%;
    height: 1px;
    background: #a78300; /* 指示書のゴールドライン */
    margin: 0 auto 12px;
}

.project-desc {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

/* スマホ版（1024px以下） */
@media screen and (max-width: 1024px) {
    #original-project {
        padding: 60px 20px;
    }
    .project-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
        gap: 30px 15px;
    }
    .project-en { font-size: 16px; }
    .project-desc { font-size: 11px; }
}

/* さらに小さい画面（スマホ縦） */
@media screen and (max-width: 480px) {
    /* 必要に応じて1列にするか、2列を維持するか調整可能 */
}

/* --- 08 事業実績 --- */
#business-record {
    padding: 40px 0;
    background: #fff;
}

@media screen and (max-width: 1024px) {
    #business-record {
    padding: 0px 0;
   
}
}


.record-grid {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.record-item {
    flex: 1;
    max-width: 370px;
    text-decoration: none;
    transition: transform 0.3s;
}

.record-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    overflow: hidden;
    margin-bottom: 20px;
}

/* 右側のグッドデザインバナー：指示書通りの細い枠線 */
.record-img.border-frame {
    border: 1px solid #bca77b;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.record-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.record-img.border-frame img {
    width: 80%; /* ロゴなので少し余白を持たせる */
    height: auto;
    object-fit: contain;
}

.record-item:hover .record-img img {
    transform: scale(1.05);
}

.record-info {
    text-align: center;
}

.record-en {
    font-size: 18px;
    color: #bca77b;
    font-family: serif;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.record-jp {
    font-size: 20px;
    color: #333;
    font-family: serif;
    letter-spacing: 0.05em;
}

/* スマホ版（1024px以下） */
@media screen and (max-width: 1024px) {
    .record-grid {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    .record-item {
        width: 100%;
        max-width: 400px;
        padding:0 17px;
    }
    
    .record-en {
    font-size: 12px;
    color: #bca77b;
    font-family: serif;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
    line-height:1 !important;
}
    
    .record-jp {
    font-size: 12px;
    color: #333;
    font-family: serif;
    letter-spacing: 0.05em;
}
    
    
}



/* --- 動画とコンテンツの最終的な重なり順修正 --- */

/* 動画の檻 */
.video-container-limit {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1920px !important;
    height: 100vh !important;
    z-index: -10 !important; /* 一番後ろ */
    overflow: hidden !important;
    background: #000;
}

/* 白いコンテンツ全体：100vh分、動画を見せるための設定 */
#mainContent {
    position: relative !important;
    z-index: 10 !important; /* 動画（-10）より前 */
    background: transparent !important; /* ここ自体は透明にする */
    width: 100% !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
}

/* 透明な空間：ここで動画が透けて見えます */
.mv-spacer {
    height: 0;
    background: transparent !important;
    pointer-events: none !important;
}

/* 白い背景をここから開始させる */
#mainContent article {
    background: #f6f4f1 !important; /* 実際のコンテンツの背景色 */
    position: relative;
    z-index: 20;
}

/* 1920px以上の外側の背景 */
body {
    background-color: #333 !important;
}



/* --- アコーディオン展開時の隙間・干渉を完全防止 --- */

/* 1. ヘッダー自体の高さを固定し、中身が伸びても無視する */
#gHeader {
    height: 89px !important; /* 基本の高さを厳守 */
    overflow: visible !important; /* 子要素（dropDown）は外に見せる */
}

/* 2. ドロップダウンを「絶対配置」で浮かせる */
header .dropDown {
    display: none; /* JSで制御 */
    position: absolute !important;
    top: 89px !important; /* ヘッダーの高さ分、上から配置 */
    left: 0 !important;
    width: 100% !important;
    z-index: 1000000 !important;
    /* 下の要素を物理的に押さないようにする */
    pointer-events: auto !important;
}

/* 3. スクロール時のヘッダー縮小時にも対応 */
#gHeader.is-scrolled {
    height: 60px !important; /* 縮小後の高さ（※実測値に合わせて調整） */
}

#gHeader.is-scrolled header .dropDown {
    top: 60px !important; /* 縮小に合わせてメニュー位置も上げる */
}

/* 4. メインコンテンツの開始位置を固定 */
#container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* --- スクロール時のロゴサイズ連動設定 --- */

/* 1. 通常時のロゴサイズ（現状に合わせて微調整してください） */
#siteTitle img {
    width: 280px; /* 初期サイズ */
    height: auto;
    transition: width 0.3s ease-in-out !important; /* 動きを滑らかに */
}

/* 2. スクロール時（.is-scrolledが付与された時）のロゴサイズ */
#gHeader.is-scrolled #siteTitle img {
    width: 180px !important; /* 縮小後のサイズ（お好みで調整） */
}

/* 3. ヘッダー自体の高さをロゴに合わせて強制固定 */
#gHeader .wrap {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out !important;
}

/* 通常時 */
#gHeader:not(.is-scrolled) {
    height: 89px ;
}

/* PC時 */
@media screen and (min-width: 781px) {
#siteTitle img {
    position:relative;
    right:7px;
    
}
}


/* スマホ時 */
@media screen and (max-width: 780px) {
#gHeader:not(.is-scrolled) {
    height: 66px !important;
}
}

/* スクロール時 */
#gHeader.is-scrolled {
    height: 76px !important; /* ロゴが小さくなる分、ヘッダーも詰める */
    background: rgba(255, 255, 255, 0.95) !important; /* スクロール後は少し透けさせるのもアリ */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* 4. アコーディオンの位置も縮小後の高さに合わせる */
#gHeader.is-scrolled .dropDown {
    top: 76px !important;
}


/* 1. 外側の檻：高さを「画面の高さ(vh)」に絶対固定 */
.video-container-limit {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;        /* 100vwではなく100% */
    max-width: 1920px !important;
    height: 100vh !important;      /* ここを100vwにしていたら即アウトです */
    height: 100dvh !important;     /* スマホ用 */
    z-index: -10 !important;
    overflow: hidden !important;   /* 檻の外（下）へのはみ出しを物理的にカット */
    background: #000;
    clip-path: inset(0 0 0 0);    /* 描画範囲をこの長方形の中に強制監禁 */
}

/* 2. 中のビデオ：檻（100vh）からはみ出すことを許さない */
#mainImage,
.video-wrapper,
.video-wrapper video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;       /* 親(100vh)と同じ高さに強制 */
    max-height: 100vh !important;  /* 念押しで高さを制限 */
    max-width: 9000px ;
    transform: none !important;    /* 座標変換によるズレを防止 */
    object-fit: cover !important;  /* 縦横比を保ちつつ檻を埋める */
    
    /* スクロール追従（パララックスのバグ）を防止 */
    will-change: auto !important;
}

@media screen and (max-width: 740px){
#mainImage,
.video-wrapper,
.video-wrapper video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;       /* 親(100vh)と同じ高さに強制 */
    /*max-height: 32vh !important; */ /* 念押しで高さを制限 */
    
    transform: none !important;    /* 座標変換によるズレを防止 */
    object-fit: cover !important;  /* 縦横比を保ちつつ檻を埋める */
    
    /* スクロール追従（パララックスのバグ）を防止 */
    will-change: auto !important;
}
}



/* 3. コンテンツの開始位置をリセット */
#mainContent {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* --- 背景動画：サイズ暴走を止める最終定義 --- */
#bg-video {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 中央固定 */
    
    /* サイズを「1920px」に物理固定し、それ以上大きくさせない */
    width: 1920px !important; 
    height: 1080px !important; /* 16:9の比率を維持 */
    
    /* 画面が1920pxより小さい時だけ、画面に収める */
    max-width: 100% !important;
    max-height: 100vh !important;
    
    object-fit: cover !important; /* 枠内で綺麗に収める */
    z-index: -100 !important;
    pointer-events: none !important;
    
    /* スクロール時の再計算を物理的に禁止 */
    will-change: auto !important;
}



/* 1920px以上のモニターで、左右の余白を埋める色 */
body {
    background-color: #333 !important;
    margin: 0;
    padding: 0;
}

/* --- 最終手段：右端はみ出しを物理的に封鎖 --- */

html, body {
    overflow-x: hidden !important; /* 横スクロールを根底から絶つ */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#bg-video {
    position: fixed !important;
    /* center配置をやめ、左から「50%」置いてから自分の幅の半分戻す（より厳格な中央） */
    top: 0 !important;
    left: 50% !important;
    margin-left: -960px !important; /* 1920pxの半分をマイナス（これが最も正確な中央固定） */
    
    width: 1920px !important;
    height: 100vh !important;
    
    object-fit: cover !important;
    z-index: -100 !important;
    pointer-events: none !important;

    /* 右側にはみ出すピクセルを強制的に「描画しない」 */
    clip-path: inset(0 0 0 0) !important;
}

/* 画面が1920pxより小さい時（ノートPCなど）の設定 */
@media screen and (max-width: 1920px) {
    #bg-video {
        left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
    }
}


/* ==========================================================================
   FINAL INTEGRATION: 全機能正常化（動画・ホバー・フェード・重なり順）
   ========================================================================== */

/* 1. 動画を一番奥に固定し、マウスイベントを透過させる */
#bg-video {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important;
    max-width: 1920px !important;
    height: 100vh !important;
    object-fit: cover !important;
    z-index: -100 !important; 
    pointer-events: none !important; /* 動画がマウスを吸い取らないようにする */
}

/* 2. コンテンツエリアを前面に出し、マウスイベントを有効化 */
#mainContent {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    pointer-events: auto !important; /* マウスイベントを受け取れるようにする */
}

/* 実際の白い（グレー）背景を持つ土台 */
#mainContent article {
    background-color: #f6f4f1 !important;
    position: relative !important;
    z-index: 20 !important;
    padding-bottom: 100px;
}

/* 3. フェードインアニメーションの正常化（!importantの競合解除） */
.fade-up {
    opacity: 0; /* 最初は隠す（!importantは付けない） */
    transform: translateY(60px); 
    visibility: visible !important; /* 判定のために領域は確保 */
    transition: opacity 1.5s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* JSで .is-active が付いた時だけ表示 */
.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 4. 画像ホバー演出の完全復活 */
/* コンテンツの各要素にマウスが反応するように設定 */
.project-item, .record-item, .content-box, .kuwa {
    cursor: pointer;
    position: relative;
    z-index: 50; /* 前面化 */
}

/* 画像エリアの要素ははみ出しをカット */
.content-image {
    overflow: hidden;
}

/* 通常時の画像設定 */
.content-image img {
    transition: transform 0.5s ease;
    transform: scale(1);
    will-change: transform;
}

/* 画像に直接マウスが乗った時だけ拡大 */
.content-image img:hover {
    transform: scale(1.08) !important;
}

/* 親要素（カード）ホバーでの拡大指定が入っている場合は無効化 */
.content-box:hover .content-image img {
    transform: none;
}
.content-box:hover .content-image img:hover {
    transform: scale(1.08) !important;
}



/* --- セクション表示・スクロール復活の最終調整 --- */

/* コンテンツ全体をスクロール可能にする */
#mainContent {
    overflow: visible !important; /* hidden を解除してスクロールを検知させる */
    position: relative !important;
    z-index: 10 !important;
}

/* 白い背景エリア：ここがスクロールで上がってくる「床」です */
#mainContent article, 
article#mainContent {
    display: block !important;
    background-color: #f6f4f1 !important;
    position: relative !important;
    z-index: 20 !important;
    min-height: 100vh; /* 最低でも画面1杯分の高さを確保 */
}



/* フェードイン判定が死なないように初期値を微調整 */
.fade-up {
    opacity: 0;
    transform: translateY(60px);
    visibility: visible !important; /* hidden だと JS が要素を見失うことがあるため */
}

.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* フェードインの判定を少し甘くする（画面に入る前から準備させる） */
.fade-up {
    opacity: 0;
    transform: translateY(40px); /* 移動距離を短くして、出やすくする */
    visibility: visible !important; /* hiddenを完全に排除 */
}

/* 最初のセクション（約束）だけは、動画が終わったらすぐに見えるように強制 */
#laurel-promise .fade-up {
    opacity: 0.1; /* 完全に消さず、うっすら存在させることでJSを呼び込む */
}

#laurel-promise.is-active .fade-up,
.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}



/* ==========================================================================
   FINAL EMERGENCY FIX: 全表示 ＆ ボタン制御 ＆ スクロール復旧
   ========================================================================== */

/* 1. 動画を最背面に完全固定（これ以上触らない） */
.video-container-limit {
    position: fixed !important;
    top: 0 !important;
    left: 49.5% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1920px !important;
    height: 100vh !important;
    z-index: -100 !important; /* 圧倒的背面 */
    overflow: hidden !important;
    pointer-events: none !important; /* 下の要素へのクリックを邪魔しない */
}

/* 2. コンテンツ全体を動画の上に引きずり出す */
#container {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
}

/* 3. article自体を「不透明なグレーの床」にする */
/* これで、Laurel Brand以降のすべてのセクションが一枚の板に乗ります */
article#mainContent {
    display: block !important;
    position: relative !important;
    z-index: 20 !important;
    background-color: #f6f4f1 !important; /* コンテンツエリア全体の背景色 */
    margin-top: 0 !important;
}




/* 6. フェードイン（fade-up）の強制表示設定 */
/* いったん「出ない」を防ぐため、初期状態を甘くします */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    visibility: visible !important;
    transition: opacity 1.5s ease-out, transform 1.2s ease-out !important;
}

.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}





/* ★ここが最重要！中身の入った箱を「不透明」にして動画の上に被せる */
#mainContent {
    position: relative !important;
    z-index: 10 !important;
    background-color: #f6f4f1 !important; /* ここで「床」を敷く！ */
    margin-top: 0 !important; /* spacer の高さで調整されるので 0 */
    overflow: visible !important;
}

/* 中のセクションも見えない原因を排除 */
#mainContent section {
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important; /* 親の article の色を活かす */
}




/* --- 2. Laurel Brand（ステートメント）を救出する --- */
/* mainContentの背景色より、このセクション自体の透明度を優先させる */
#brand-statement {
    position: relative !important;
    z-index: 50 !important;
    background-color: transparent !important; /* 最初は動画を見せるために透明に */
    margin-top: 0 !important;
}

/* --- 3. フェードイン（fade-up）を「動く」設定に戻す --- */
.fade-up {
    opacity: 0 !important; /* 初期は消す */
    transform: translateY(50px) !important;
    visibility: visible !important;
    transition: opacity 1.2s ease-out, transform 1.0s ease-out !important;
}

/* クラスがついたら表示（!importantで強制） */
.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================================================
   全セクション救出：上から順番に表示させるための最終設定
   ========================================================================== */

/* 1. まず全セクションに「不透明なグレーの床」を強制的に敷く */
#brand-statement, 
#laurel-promise, 
#sustainable, 
#design, 
#lineup {
    display: block !important;
    position: relative !important;
    z-index: 20 !important; /* 動画(-100)より前に出す */
    background-color: #f6f4f1 !important; /* 背景色を強制 */
    width: 100% !important;
    min-height: 200px; /* 領域を確保 */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. 最初のセクション（Brand）だけは MVとの繋ぎなので特別に */
#brand-statement {
    margin-top: 0 !important;
    padding-top: 100px !important;
}

/* 3. 中身の fade-up を「見える」状態に調整 */
/* これが「出ない」原因なので、!important を外して JS の制御を待ちます */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease, transform 1.0s ease;
}

/* JSでクラスがついたら絶対に見せる */
.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}


/* =============================================================
   完成への最終調整：透明なセクションを見えるようにする
   ============================================================= */

/* 1. 最初の方のセクションが「出ない」のを防ぐ */
/* JSの判定（is-active）が届くように、少しだけ浮き上がらせる */
#brand-statement,
#laurel-promise {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. フェードインの「透明度0」を少しだけ解除し、JSを呼び込む */
#brand-statement .fade-up,
#laurel-promise .fade-up {
    opacity: 0.1; /* 完全に0にせず、0.1にしておくとJSが反応しやすくなります */
}

/* 3. クラスがついたら100%表示 */
.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}




/* 5. レイアウト崩れの微調整（念のため） */
.content-text {
    z-index: 100 !important; /* テキストが画像の下に潜り込まないように */
}

/* =============================================================
   1. 物理構造の確定（動画の上にグレーの床を敷く）
   ============================================================= */
#container {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
}

/* グレーの床をここで確定 */
#mainContent {
    display: block !important;
    position: relative !important;
    z-index: 100 !important;
    background-color: #f6f4f1 !important;
    margin-top: 0 !important;
}

/* 全セクション共通：表示保証 */
section {
    position: relative !important;
    z-index: 110 !important;
    background-color: #f6f4f1 !important;
    display: block !important;
    padding: 45px 0; /* 基本の上下余白 */
}

@media screen and (min-width: 381px) and (max-width: 740px){
 section {
    position: relative !important;
    z-index: 110 !important;
    background-color: #f6f4f1 !important;
    display: block !important;
    padding: 10px 0; /* 基本の上下余白 */
}
} 

@media screen and (max-width: 380px) {
  section {
    position: relative !important;
    z-index: 110 !important;
    background-color: #f6f4f1 !important;
    display: block !important;
    padding: 10px 0; /* 基本の上下余白 */
}
}





/* =============================================================
   2. フェードアップ設定（JSの.is-activeと連動）
   ============================================================= */

/* 初期状態：透明で下に配置 */
.fade-up {
    opacity: 0 !important;
    transform: translateY(60px) !important;
    visibility: visible !important;
    /* transitionはここで管理 */
    transition: opacity 1.5s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 活性化：JSで .is-active が付与された瞬間に動き出す */
.fade-up.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =============================================================
   3. 特定セクションの余白調整（約束〜ラインナップ間）
   ============================================================= */

/* ５つの約束セクション */
#laurel-promise {
    padding-bottom: 0 !important; /* 下の余白を消す */
}

/* ラインナップセクション */
#lineup {
    padding-top: 40px; /* 上の余白を詰めつつ、タイトルとのバランス調整 */
    margin-top: 0 ;
}

@media screen and (min-width: 381px) and (max-width: 740px){
#lineup {
    padding-top: 0px; /* 上の余白を詰めつつ、タイトルとのバランス調整 */
    
}
} 

@media screen and (max-width: 380px) {
#lineup {
    padding-top: 0px ; /* 上の余白を詰めつつ、タイトルとのバランス調整 */
   
}
}



/* セクション間の謎の隙間を排除 */
#mainContent > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =============================================================
   4. MOVIEボタン・パーツ（維持）
   ============================================================= */
/* MOVIEボタン：絶対配置にして動画と一緒に流す */


#movieBtn.hide {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* PC版アコーディオンの挙動を滑らかに */
@media screen and (min-width: 1025px) {
    header .dropDown {
        display: none; /* 初期は非表示 */
        opacity: 0;
        transition: opacity 0.4s ease !important;
        pointer-events: auto;
    }
}



.moviebtm {
    position: fixed;
    bottom: 0vh;
    left: 50%;
    transform: translateX(-50%);
    width: 105px;
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

@media screen and (max-width: 780px) {
    .moviebtm {
    	 position: fixed;
        width: 43px;
        bottom: 69vh;
        left: 55%;
         opacity: 0.8;
    }
}



/* ★ 下の hover 埋め（最重要） */
header .dropDown::after {
    content: "";
    position: absolute;
    bottom: -35px; /* ← ここが無いと絶対に消える */
    left: 0;
    width: 100%;
    height: 35px;
    background: transparent;
    pointer-events: auto;
    z-index: 1000001;
}

/* ▼ アコーディオンが透明レイヤーに負けないようにする */
header .dropDown,
header .dropDown * {
    pointer-events: auto !important;
}


/* ▼ dropDown の位置を完全に固定（最優先） */
header .dropDown {
    /*top: 90px !important;*/
}
#gHeader.is-scrolled header .dropDown {
    top: 60px !important;
}

#gHeader {
    position: fixed;
    z-index: 9999;
}


@media screen and (max-width: 1024px) {
    .whitebk {
        width: 90% !important;
        margin: 0 auto !important;
        padding: 20px !important;
        box-sizing: border-box;
    }
}


/**********************************************
 *  PC / SP 衝突ゼロの最終完全版 CSS
 **********************************************/

/* ▼ X ボタン（初期状態：PC では非表示） */
#navClose {
    position: absolute;
    right: 0;
    width: 52px;
    height: 52px;
    background: url(/laurel/common/imgs/sp/hdr-close.png) 50% 50% no-repeat;
    background-size: 24px auto;
    z-index: 99999;
    display: none;
}

/* ▼ SP のときだけ top:10px を適用して表示 */
@media screen and (max-width: 959px) {

    #navClose {
        top: 2px; /* ← SP のときだけ発動 */
    }

    #gNav.open ~ #navClose {
        display: block !important;
    }
}

 /*@media only screen and (max-width: 959px) {
   #siteTitle {
        width: 75px;
        padding: 0;
        position: relative;
        top: 6px;
    }
}*/

/* ▼ PC のときは hover を守るために完全非表示 */
@media screen and (min-width: 960px) {
    #navClose {
        display: none !important;
        top: auto !important; /* ← PC hover に干渉しない */
    }
}


/* ▼ SP のときだけ X ボタンを表示（PCには絶対に効かない） */
@media screen and (max-width: 959px) {
    #gNav.open ~ #navClose {
        display: block !important;
    }
}

/* ▼ PC hover を壊さないために、SP 用 gNav の強制指定は絶対に PC に効かせない */
@media screen and (max-width: 959px) {

    /* SP メニューの位置（main.css と同じ） */
    #gNav {
        position: fixed !important;
        top: 55px !important;
        right: 0;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        background: rgba(0,0,0,.9);
        display: none; /* main.css と同じ初期状態 */
    }

    /* SP メニュー open 時 */
    #gNav.open {
        display: block !important;
    }
}

/* ▼ PC（960px以上）は main.css の hover を完全に優先させる */
@media screen and (min-width: 960px) {

    /* PC hover が効かなくなる要因を完全排除 */
    #gNav {
        position: absolute !important;
        top: 0 !important;
        right: -5px !important;
        display: block !important;
        background: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* PC では X ボタンは絶対に表示しない */
    #navClose {
        display: none !important;
    }
}
	
	/* 事業実績動画を画面幅に合わせる */
	.gallery-main-img video{
    width: 100%;
    height: auto;
    display: block;
}
	
/* PCでのみ改行したい場合（スマホでは改行しない） */
@media screen and (max-width: 767px) {
  .br-pc { display: none; }
  .text-a{text-align: left ; margin-left: 9%; margin-bottom:40px;}
}

/* スマホでのみ改行したい場合（PCでは改行しない） */
@media screen and (min-width: 768px) {
  .br-sp { display: none; }
  .text-a{text-align: left ; margin-left: 20%; margin-bottom:40px;}
}


.section-ttl {
    color: #7b6311 !important;
}

@media screen and (max-width: 767px) {
    .section-ttl {
        font-size: 23px !important;
    }
}

/* 05セクション直下の余白のみ調整 */
#sustainable:last-of-type {
    padding-bottom: 56px !important; /* または margin-bottom を調整 */
}
	

html,
body,
input,
textarea,
select,
button {
    font-family:
        "Yu Mincho",
        "YuMincho",
        "游明朝",
        "游明朝体",
        serif !important;
}
	
	  .semi-transparent-image {
    opacity: 1.0; /* 通常時の不透明度（100%） */
    transition: filter 0.3s, transform 0.3s; /* マウスを乗せた時の変化時間（0.3秒） */
  }

  .semi-transparent-image:hover {
    filter: brightness(1.1); /* 明るくして白っぽく見せる */
    transform: translateY(-3px);
  }
	
.leadt{line-height:0.2em;}	
.wrap {
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
}
	
	/* 画像枠の設定（拡大時に枠外へはみ出るのを防ぐ） */
.gallery-img-box {
    overflow: hidden;
}

/* アニメーションのなめらかな変化設定 */
.gallery-img-box img {
    transition: transform 0.6s ease-out;
    will-change: transform;
}

/* マウスホバー時にふわっと1.08倍に拡大 */
.gallery-img-box:hover img {
    transform: scale(1.08);
}
/*#siteTitle {
   position:relative;
   right:7.5px;
}*/
	
	
	
	@media screen and (max-width: 767px) {
    /* 01〜05共通：テキストエリアを上の画像へ食い込ませる */
    .content-box .content-text {
        margin-top: -30px;    /* マイナス値で上に食い込みます（数値を調整可能） */
        position: relative;   /* 重なり順の制御 */
        z-index: 2;           /* 画像の上に重ねる */
    }

    /* 白背景ボックスの重なり・見やすさを保持 */
    .content-box .whitebk {
        background-color: #fff;
        position: relative;
    }
}
	
	/* 画像を囲む親要素に枠線と、はみ出し防止を指定 */
.creave-wl-bg {
    overflow: hidden;
    border: 1px solid #a78300;
    box-sizing: border-box;
}

/* ホバー時に「画像だけ」を拡大 */
.creave-wl-bg img {
    width: 100%;
    transition: transform 0.6s ease;
    display: block; /* 不要な余白防止 */
}

.creave-with-laurel-link:hover .creave-wl-bg img {
    transform: scale(1.1);
}
	
/* 通常時の画像に opacity のアニメーション設定を追加 */
.creave-wl-bg img {
    width: 100%;
    transition: opacity 0.5s ease, transform 0.6s ease !important; /* ← opacity の変化を追加 */
    display: block;
}

/* 1. リンク全体のホバー時の透明度変化を無効化（枠線は固定） */
.creave-with-laurel-link:hover {
    opacity: 1 !important;
}

/* 2. ホバー時に「中の画像だけ」をなめらかに薄くする */
.creave-with-laurel-link:hover .creave-wl-bg img {
    opacity: 0.7; /* 薄さの指定 */
    transform: scale(1.1); /* 拡大処理 */
}
	@media screen and (max-width: 1024px) {
    /* 画像とテキストの間隔 */
    .project-img {
        margin-bottom: 10px !important;
    }
    .project-img a {
        display: block !important;
        line-height: 0 !important;
    }
    .project-img img {
        display: block !important;
    }

    /* 各行の間隔を約半分に調整 */
    .project-en {
        margin-bottom: 3px !important;
        line-height: 1.2 !important;
    }
    .project-jp {
        margin-bottom: 8px !important; /* 12px → 6px */
        line-height: 1.2 !important;
    }
    .project-border {
        margin: 0 auto 8px !important; /* 12px → 6px */
    }
    .project-desc {
        line-height: 1.4 !important;    /* 1.6 → 1.4 に少し引き締め */
    }
}
	@media screen and (max-width: 1024px) {
    /* 20pxの60%のサイズ（12px）にする場合 */
    .project-en.is-small {
        font-size: 13px !important;
		line-height: 1.7 !important;
		margin-top: -3px !important;
    }
}

/* 1920px以上の画面で左右に出る黒帯をベージュに統一 */
body {
    background-color: #f6f4f1 !important;
}

/* コンテンツ表示エリアの幅固定を解除して全幅化 */
@media screen and (min-width: 769px) {
    #mainContent {
        max-width: none !important;
        width: 100% !important;
    }

    #sustainable, 
    #design {
        width: 100% !important;
        max-width: 100% !important;
        background-color: #f6f4f1 !important;
    }

    #sustainable .wrap,
    #design .wrap {
        max-width: 1920px !important;
        margin: 0 auto !important;
    }
}

@media screen and (max-width: 767px) {
  /* movie01-01.svg を指定して幅を変更し、起点を中央に設定 */
  img[src*="movie01-01.svg"] {
    width: 100px !important;
    transform-origin: center center;
  }
}

/* カード枠やテキスト・画像エリアはデフォルトカーソル（矢印）にする */
.content-box,
.content-image,
.content-text,
.whitebk,
.num,
.num2 {
    cursor: default !important;
}

/* 「詳しく見る」ボタン（.kuwa）だけ指マークにする */
a.kuwa {
    cursor: pointer !important;
}

/* ボタンは除外して、左側の画像エリアの画像のみホバー拡大を解除 */
#gallery .content-image img,
.gallery-box .content-image img,
.gallery-item .content-image img {
    transition: none !important;
    transform: none !important;
}

/* 左側の画像エリア（.content-image）内の画像のみ、拡大を強制解除 */
#gallery .content-image img,
.gallery-box .content-image img,
.gallery-item .content-image img {
    transform: scale(1) !important; /* 強制的に等倍固定 */
    transition: none !important;    /* アニメーションも完全に切る */
}

/* 竣工ギャラリーの左側画像（.gallery-img-box 内の img）のみホバー拡大を強制解除 */
.gallery-img-box img {
    transform: none !important;
    transition: none !important;
}

.gallery-img-box:hover img,
.gallery-border-box:hover .gallery-img-box img {
    transform: none !important;
}