body{
    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: 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;
}
}


.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;
}

/* 「5」の基本サイズ（PC表示時） */
.search-title .num-large {
    font-size: 2.2em;
    vertical-align: middle;
}

/* スマホ表示時（画面幅767px以下）のサイズ設定 */
@media screen and (max-width: 767px) {
    .search-title .num-large {
        font-size: 20px !important; /* ← pxで直接指定するか、1.0emなどに設定 */
    }
}