body{
    background-image: url(../imgs/haikei.jpg);
    background-repeat: repeat-y;
    background-position: center top;
}
    }

.wrap{max-width:1000px;}
#mainContent {
    padding: 90px 0 !important;
}


/* ----------------------------------------------------
   5つの約束：キービジュアル
---------------------------------------------------- */

#headline.mind-kv {
    width: 100%;
    height: 1000px;
    background-image: url("../imgs/bg_mind.jpg"); /* ←背景画像 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
}

#headline.mind-kv .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    margin-bottom:6%;
}

#headline.mind-kv h2,
#headline.mind-kv p {
   
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

#headline.mind-kv .lead {
    margin-top: 30px;
    line-height: 2.0;
    font-size: 18px;
}

#headline.mind-kv .lead-sub {
    margin-top: 25px;
    font-size: 17px;
    line-height: 1.9;
}


/* ----------------------------------------------------
   5つの約束：全体レイアウト
---------------------------------------------------- */

.promise-section {
    padding: 0;
   
}

.promise-section .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.search-block {
	padding-top:5%;
	color:#666;
    text-align: center;
    margin-bottom: 80px;
}

.search-title {
    font-size: 26px;
    letter-spacing: 0.1em;
}


/* ----------------------------------------------------
   5つの約束：グリッド
---------------------------------------------------- */
/*
.promise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 40px;
}

.promise-item {
    text-align: center;
}

*/


/* ===================================================
   ベースの設定（スマホ時：1列に並ぶ）
=================================================== */
.promise-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0; /* スマホ用の隙間（上下に30px、左右は0） */
}

.promise-item {
    width: 100%; /* 横幅いっぱいに広げて1個ずつにする */
}

/* ===================================================
   PC時の設定（画面横幅が768px以上のとき：3列＆中央揃え）
=================================================== */
@media screen and (min-width: 768px) {
    .promise-grid {
        justify-content: center; /* 2行目のアイテムも中央に寄せる */
        gap: 50px 40px;          /* PC用の隙間（上下50px、左右40px） */
    }
    
    .promise-item {
        /* PC時は横幅を3等分にする（隙間40px×2個分を引いた計算） */
        width: calc((100% - 80px) / 3); 
    }
}
.promise-link {
    display: block;
    text-decoration: none;
    color: #333;
}

.promise-thumb {
    position: relative;
    overflow: hidden;
}

.promise-thumb img {
    width: 100%;
    display: block;
    transition: opacity .4s ease;
}

.promise-thumb .img-color {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.promise-link:hover .img-color {
    opacity: 1;
}

.promise-link:hover .img-gray {
    opacity: 0;
}

.promise-text {
    margin-top: 20px;
}

.promise-num {
    font-size: 32px;
    font-weight: bold;
    color: #a78237;
    margin-bottom: 10px;
}

.promise-en {
    font-size: 18px;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.promise-ja {
    font-size: 15px;
    color: #555;
}


/* ----------------------------------------------------
   WITH LAUREL セクション
---------------------------------------------------- */

.with-laurel-section {
    padding: 120px 0;
    background: #f8f8f8;
}

.with-laurel-section .wrap {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.with-laurel-en {
    font-size: 28px;
    line-height: 1.6;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.with-laurel-ja {
    font-size: 16px;
    color: #555;
}


/* ----------------------------------------------------
   スマホ対応
---------------------------------------------------- */

@media screen and (max-width: 960px) {

    #headline.mind-kv {
        height: 600px;
        padding: 40px 0;
    }

    .promise-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }
}

@media screen and (max-width: 640px) {

    #headline.mind-kv {
        height: 480px;
    }

    #headline.mind-kv .wrap {
        padding: 0 20px;
    }

    .promise-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .promise-num {
        font-size: 28px;
    }

    .promise-en {
        font-size: 16px;
    }

    .with-laurel-en {
        font-size: 22px;
    }
}


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

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



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

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



@media screen and (min-width: 741px){
.gallery-main-img {
    width: 49%;
    line-height: 0; /* 画像下の隙間排除 */
    display:inline-block;
    vertical-align: middle;
}
/* 画像を右に20px移動 */
.gallery-img-box img {
    position: relative;
    left: 20px;
}
}
@media screen and (max-width: 740px){
.gallery-main-img {
    width: 100%;
    line-height: 0; /* 画像下の隙間排除 */
    overflow: hidden;
}
}


.gallery-main-img img {
    width: 93%;
    height: auto;

}

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

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


body,
input,
textarea,
select,
button {
    font-family:
        "Yu Mincho",
        "YuMincho",
        "游明朝",
        "游明朝体",
        serif !important;
}
	
/* 画像枠の設定（拡大時に枠外へはみ出るのを防ぐ） */
.gallery-img-box {
    overflow: hidden;
}

/* アニメーションのなめらかな変化設定 */
.gallery-img-box img {
    display: block;      /* ← 追加：インライン要素特有の余白や膨らみを解消 */
    width: 100%;          /* ← 追加：幅を親要素に固定 */
    height: auto;         /* ← 追加：アスペクト比を維持 */
    transition: transform 0.6s ease-out;
    will-change: transform;
}

/* マウスホバー時に拡大 */
.gallery-img-box:hover img {
    transform: scale(1);
}
	
	
/* 画像を囲む親要素に枠線と、はみ出し防止を指定 */
.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); /* 拡大処理 */
}
	


div.promise-text{display:none;}
	
	
	@media screen and (min-width: 768px) {
  .br-sp { display: none; }
}

	 .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);
  }
	
	
	@media screen and (max-width: 767px) {
  .search-title {
    font-size: 90%; /* タイトル全体を70%に縮小 */
  }
}
	
	@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 */
    }
    /* ▲ ここまで ▲ */
}
	
	

@media screen and (max-width: 740px) {
  .galbtm .semi-transparent-image {
    width: 100px !important; 
    margin-top: 8px; 
  }
}
@media screen and (max-width: 767px) {
  .num-sp-70 {
    font-size: 150% !important;
    display: inline-block !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
  }
}