@charset "UTF-8";
@media screen and (min-width: 768px),print {

main{ width: 100%!important; }

#con01{ width: 100%; max-width: 1920px; margin: 0 auto 122px; }
#con01 .ttl{ position: relative; overflow: hidden; height: 500px; margin-bottom: 60px; }
#con01 .ttl img{ position: absolute; top: 50%; left: 50%; width: 1920px; height: 500px; transform: translate(-50%, -50%); }
#con01 .txt{ text-align: center; font-size: 18px; font-weight: 700; line-height: 34px; letter-spacing: 0.9px;margin-bottom: 55px;}
#con01 .btn{ text-align: center; }

#con02{ width: 1100px; margin: 0 auto 215px; }
#con02 .box1{ position: relative; min-height: 336px; padding-right: 570px; margin-bottom: 105px;}
#con02 .box1 .ttl{ font-size: 26px; font-weight: 700; line-height: 40px; letter-spacing: 1.3px; padding-bottom: 14px; margin-bottom: 25px; border-bottom: 4px solid #FFF300;}
#con02 .box1 .pic{ position: absolute; top: -20px; right: 0; }
#con02 .box1 .txt{ font-size: 16px; line-height: 30px; letter-spacing: 0.8px;}
#con02 .box1 .mb1{ margin-bottom: 30px;}
#con02 .box2{ position: relative; min-height: 336px; padding-left: 570px; margin-bottom: 105px;}
#con02 .box2 .ttl{ font-size: 26px; font-weight: 700; line-height: 40px; letter-spacing: 1.3px; padding-bottom: 14px; margin-bottom: 25px; border-bottom: 4px solid #FFF300;}
#con02 .box2 .pic{ position: absolute; top: -20px; left: 0; }
#con02 .box2 .txt{ font-size: 16px; line-height: 30px; letter-spacing: 0.8px;}
#con02 .box2 .mb1{ margin-bottom: 30px;}

.bottom-contents{ width: 860px; margin: 80px auto 100px;}
.bottom-contents .list{ display: flex; justify-content: space-between; }


#iedukuri_project .bg-area{ padding: 100px 0; background-color: #E7E9EC; }

#iedukuri_project .project-wrapper { max-width: 1180px; margin: 0 auto; width: 100%; }
#iedukuri_project .tab-container { display: flex; justify-content: center; align-items: flex-end; }
#iedukuri_project .tab-item { cursor: pointer; flex: 1; transition: all 0.3s; }
#iedukuri_project .tab-icon { width: 580px; height: 166px; background-repeat: no-repeat; background-position: center; background-size: 100%; }

/* カテゴリ1：家づくり中 (OFF/ON) */
#iedukuri_project .icon-01 { background-image: url('../images/iedukuri_project/cate01-b.png'); margin-right: 20px; }
#iedukuri_project .tab-item.active .icon-01 { background-image: url('../images/iedukuri_project/cate01-a.png'); }

/* カテゴリ2：オーナーズ (OFF/ON) */
#iedukuri_project .icon-02 { background-image: url('../images/iedukuri_project/cate02-b.png'); }
#iedukuri_project .tab-item.active .icon-02 { background-image: url('../images/iedukuri_project/cate02-a.png'); }

#iedukuri_project .tab-content{ background-color: #fff; padding: 50px 42px; }
#iedukuri_project .tab-panel { display: none; }
#iedukuri_project .tab-panel.active { display: block; }
#iedukuri_project .record-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 35px; }
#iedukuri_project .record-card { width: 100%; }
#iedukuri_project .record-card .img-box { width: 100%; aspect-ratio: 342 / 220; overflow: hidden; }
#iedukuri_project .record-card img { width: 100%; height: 100%; object-fit: cover; }
#iedukuri_project .record-title { margin-top: 12px; font-size: 16px; line-height: 1.5; color: #333; }
    
#iedukuri_project .system-contents { background: #eeefef; padding: 80px 0px; margin-bottom: 30px; }
#iedukuri_project .system-contents-inner { background: #ffffff; padding: 40px; max-width: 1180px; margin: 0 auto; }
#iedukuri_project .system-category-set { margin-bottom: 20px; overflow: hidden; }
#iedukuri_project .system-category { font-size: 0.75em; color: #ffffff; text-align: center; padding: 8px 15px; display: inline-block; margin-right: 5px; margin-bottom: 0; }

/* カテゴリごとの色分け（お好みの色に調整してください） */
#iedukuri_project .system-category.icon01 { background-color: #2b548a; } /* 家づくり中 */
#iedukuri_project .system-category.icon02 { background-color: #1a8a5b; } /* オーナーズ（例として緑） */

#iedukuri_project .system-ttl { font-size: 1.75em; font-weight: bold; margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px #ccc solid; line-height: 1.4; color: #333; }
#iedukuri_project .system-i-pic { text-align: center; margin-bottom: 50px; }
#iedukuri_project .system-i-pic img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
#iedukuri_project .wysiwyg { font-size: 16px; line-height: 1.8; color: #333; }
#iedukuri_project .wysiwyg p { margin-bottom: 1.5em; }

#iedukuri_project .pagen{ width: 1200px; margin: 0 auto 20px; }

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

#con01{ margin: 0 auto 12vw; }
#con01 .ttl{ margin-bottom: 6vw; }
#con01 .txt{ text-align: center; font-size: 4vw; font-weight: 700; line-height: 1.8; letter-spacing: 0.2vw;margin-bottom: 8vw;}
#con01 .btn{ text-align: center; margin: 0 10vw; }

#con02{ margin: 0 5vw 15vw; }
#con02 .box1{ margin-bottom: 10vw;}
#con02 .box1 .ttl{ text-align: center; font-size: 6vw; font-weight: 700; line-height: 1.8; letter-spacing: 0.24vw; padding-bottom: 1.8vw; margin-bottom: 6vw; border-bottom: 4px solid #FFF300;}
#con02 .box1 .pic{ margin-bottom: 5vw; }
#con02 .box1 .txt{ font-size: 3.6vw; line-height: 1.8; letter-spacing: 0.24vw;}
#con02 .box1 .mb1{ margin-bottom: 5vw;}

#con02 .box2{ margin-bottom: 10vw;}
#con02 .box2 .ttl{ text-align: center; font-size: 6vw; font-weight: 700; line-height: 1.8; letter-spacing: 0.24vw; padding-bottom: 1.8vw; margin-bottom: 6vw; border-bottom: 4px solid #FFF300;}
#con02 .box2 .pic{ margin-bottom: 5vw; }
#con02 .box2 .txt{ font-size: 3.6vw; line-height: 1.8; letter-spacing: 0.24vw;}
#con02 .box2 .mb1{ margin-bottom: 5vw;}

.bottom-contents{ margin: 15vw 10vw 15vw;}
.bottom-contents .list li{ margin-bottom: 8vw; }

#iedukuri_project .bg-area{ padding: 12vw 0; background-color: #E7E9EC; }

#iedukuri_project .project-wrapper { margin: 0 auto; width: 100%; }
#iedukuri_project .tab-container { display: flex; justify-content: center; align-items: flex-end; }
#iedukuri_project .tab-item { cursor: pointer; flex: 1; transition: all 0.3s; }
#iedukuri_project .tab-icon { height: 49vw; background-repeat: no-repeat; background-position: center; background-size: 100%; }

/* カテゴリ1：家づくり中 (OFF/ON) */
#iedukuri_project .icon-01 { background-image: url('../images/iedukuri_project/sp-cate01-b.png'); }
#iedukuri_project .tab-item.active .icon-01 { background-image: url('../images/iedukuri_project/sp-cate01-a.png'); }

/* カテゴリ2：オーナーズ (OFF/ON) */
#iedukuri_project .icon-02 { background-image: url('../images/iedukuri_project/sp-cate02-b.png'); }
#iedukuri_project .tab-item.active .icon-02 { background-image: url('../images/iedukuri_project/sp-cate02-a.png'); }

#iedukuri_project .tab-content{ background-color: #fff; padding: 8vw 4vw; }
#iedukuri_project .tab-panel { display: none; }
#iedukuri_project .tab-panel.active { display: block; }
#iedukuri_project .record-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8vw 2%; }
#iedukuri_project .record-card { width: 100%; }
#iedukuri_project .record-card .img-box { width: 100%; aspect-ratio: 342 / 220; overflow: hidden; }
#iedukuri_project .record-card img { width: 100%; height: 100%; object-fit: cover; }
#iedukuri_project .record-title { margin-top: 2.1vw; font-size: 3.6vw; line-height: 1.5; color: #333; }

#iedukuri_project .system-contents { background: #eeefef; padding: 6vw 3vw; margin-bottom: 5vw; }
#iedukuri_project .system-contents-inner { background: #ffffff; padding: 5vw 4vw; margin: 0 auto; }
#iedukuri_project .system-category-set { margin-bottom: 20px; overflow: hidden; }
#iedukuri_project .system-category { font-size: 3.6vw; color: #ffffff; text-align: center; padding: 1.8vw 3vw; display: inline-block; margin-right: 2vw; margin-bottom: 0; }

/* カテゴリごとの色分け（お好みの色に調整してください） */
#iedukuri_project .system-category.icon01 { background-color: #2b548a; } /* 家づくり中 */
#iedukuri_project .system-category.icon02 { background-color: #1a8a5b; } /* オーナーズ（例として緑） */

#iedukuri_project .system-ttl { font-size: 4.4vw; font-weight: bold; margin-bottom: 6vw; padding-bottom: 5vw; border-bottom: 1px #ccc solid; line-height: 1.4; color: #333; }
#iedukuri_project .system-i-pic { text-align: center; margin-bottom: 6vw; }
#iedukuri_project .system-i-pic img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
#iedukuri_project .wysiwyg { font-size: 3.6vw; line-height: 1.8; color: #333; }
#iedukuri_project .wysiwyg p { margin-bottom: 1.5em; }

#iedukuri_project .pagen{ margin: 0 auto 4vw; }



}