@charset "utf-8";

/* ==============================================================
　　初期化
============================================================== */

#contents #main_wrapper { display: block; width: 920px; margin: 35px 0; position: relative;}
#contents { width: 920px; margin: 0 auto; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 13px;}
#contents img { border: none; vertical-align: bottom;}


/* ==============================================================
　　clearfix
============================================================== */

#contents .clearfix:after { content: ""; 	display: block; clear: both;}
#contents .clearfix:before { content: ""; display: block; 	clear: both;}
#contents .clearfix { display: block;}


/* ==============================================================
　　基本パーツ
============================================================== */

#contents .mb10 { margin-bottom: 10px !important;}
#contents .mb20 { margin-bottom: 20px !important;}
#contents .mb30 { margin-bottom: 30px !important;}
#contents .mb40 { margin-bottom: 40px !important;}
#contents .mb50 { margin-bottom: 50px !important;}
#contents .mb60 { margin-bottom: 60px !important;}
#contents .mb80 { margin-bottom: 80px !important;}


/* ==============================================================
　　コンテンツトップページ
============================================================== */

/* メインヘッダー */
#contents #main_head { margin-bottom: 50px;}
#contents #main_wrapper a#head_btn { position: absolute; top: 0; right: 0; transition: all 0.5s ease-Out;}
#contents #main_wrapper a#head_btn.scroll { position: sticky; top: 30px; left: 100%; z-index: 10;}

#contents #main_wrapper a#backtop { position: absolute; top: 0; right: 0;}

/* メインビジュアル */
#contents #main_visual { margin-bottom: 100px; position: relative;}
#contents #main_visual h1 { width: 660px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 70px;}

/* ラインナップ */
#contents .main_lineup { margin: 0 auto; width: 920px; list-style: none; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; padding-left: 0; margin-bottom: 60px;}
#contents .main_lineup li a img{ height: 40px;}

/* h2タイトル */
#contents h2.main_h2_title { width: 430px; margin: 0 auto 35px auto;}

/* カルーセル */
#contents #slide_wrapper { width: 920px; height: 250px; margin: 0 auto 70px auto; overflow: hidden; position: relative;}
#contents ul.bxslider { margin: 0; padding: 0; list-style-type: none;}
#contents ul.bxslider li { width: 304px !important; height: auto;}
#contents ul.bxslider li img { width: 100%;}

#contents .bx-wrapper .bx-viewport { width: 920px; -webkit-box-shadow: none; box-shadow: none; border: none; left: 2px; overflow: hidden;}

#contents .slide_cover { width: 304px; height: 206px; background: rgba(255,255,255,0.6); position : absolute; pointer-events: none;}

#contents .slide_cover#left { top: 0; left: 2px;}
#contents .slide_cover#right { top: 0; right: 0;}

#contents #slide_wrapper .note { position: absolute; right: 0; bottom: 0;}

/* ライフスタイル動画 */
#contents ul.lifestyle { margin: 0 0 80px 0; padding: 0; list-style-type: none;}
#contents ul.lifestyle li { width: 450px;}
#contents ul.lifestyle li:first-child { float: left;}
#contents ul.lifestyle li:last-child { float: right;}
#contents ul.lifestyle li h3 { margin-top: 12px;}
#contents ul.lifestyle li img { cursor: pointer;}

#contents ul.lifestyle li:last-child img { cursor: pointer;}

/* オーナーズヴォイス */
#contents ul.owners_thumb_wrapper { margin: 0 0 90px 0; padding: 0; list-style-type: none; width: 100%; text-align: center;}
#contents ul.owners_thumb_wrapper li:first-child { float: left;}
#contents ul.owners_thumb_wrapper li:last-child { float: right;}
#contents .owners_thumb_wrapper img:hover { cursor: pointer;}

/* 大きいボタン */
#contents a.list_lg_btn { display: block; width: 580px; margin: 0 auto 80px auto; background: #fff;}

/* 武蔵野 */
#contents a.btn_musashino { display: block; width: 920px; height: 360px; background: url("../images/btn_musashino.jpg") no-repeat; background-size: 100%; position: relative;}
#contents a.btn_musashino .title { width: 520px; height: 140px; margin-top: auto; margin-bottom: auto; left: 40px; top: 0; bottom: 0; position: absolute; transition: all 0.5s ease-out;}
#contents a.btn_musashino .title img { width: 100%; height: auto;}

/* hover */
#contents a.btn_musashino .title.lg { width: 546px; height: 147px;}


/* ==============================================================
　　コンテンツ武蔵野エリア
============================================================== */

#contents .musashino_wrapper { padding-bottom: 1px; margin-bottom: 90px; background: url("../images/bg_musashino.jpg") repeat-y;}
#contents .musashino_wrapper .message { text-align: center; margin-bottom: 65px;}
#contents .musashino_wrapper .message h1 { margin-bottom: 40px; text-align: center !important;}
#contents .musashino_wrapper .message p { margin-bottom: 65px; text-align: center !important;}

#contents .musashino_wrapper img#thumb_movie04:hover { cursor: pointer;}

#contents .musashino_wrapper .paragraph01 { padding-top: 115px; width: 100%; position: relative;}
#contents .musashino_wrapper .paragraph01 h2 { display: inline; position: absolute; top: 0; left: 40px;}

#contents .musashino_wrapper .paragraph02 { padding-top: 180px; width: 100%; position: relative;}
#contents .musashino_wrapper .paragraph02 h2 { display: inline; position: absolute; top: 60px; left: 280px;}

#contents .musashino_wrapper .paragraph03 { padding-top: 300px; padding-bottom: 90px; width: 100%; position: relative;}
#contents .musashino_wrapper .paragraph03 h2 { display: inline-block; position: absolute; top: 70px; left: 100px; text-align: left;}
#contents .musashino_wrapper .paragraph03 .concept_room { margin-left: 240px;}

#contents .map_wrapper { width: 720px; margin: 0 auto 170px auto;}

#contents .foot_musashino { padding-top: 40px; border-top: 1px solid #808a8b; position: relative;}
#contents .foot_musashino a { display: block; width: 300px; margin: 0 auto; position: absolute; left: 0; right: 0; top: -90px;}


/* ==============================================================
　　コンテンツ駒沢エリア
============================================================== */
#contents .komazawa_wrapper {
    font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    color: var(--color_black);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.1em;
    -webkit-text-size-adjust: 100%;
    background: #F4F4F2;
}
#contents .komazawa_wrapper .en { font-family: "Cormorant Garamond", serif; font-style: normal;}
#contents .komazawa_inner { padding: 30px;}
#contents .komazawa_wrapper h1 { text-align: center; margin: 30px auto;}
#contents .komazawa_wrapper h1 img { width: 700px;}
#contents .komazawa_wrapper img{ width: 100%; }
#contents .komazawa_wrapper .komazawa_message p{ margin: 30px auto; line-height: 2.2; font-size: 0.9rem; text-align: center;    line-height: 2.2; }

#contents .komazawa_wrapper .movie { background-color: #CBD4CC; color:#18301A }
#contents .komazawa_wrapper .movie .movie-thmb { text-align: center;}
#contents .komazawa_wrapper .movie h2{ font-size: 3rem; text-align: center;}
#contents .komazawa_wrapper .movie h3{ color:#18301A; margin-bottom:40px;font-size: 0.9rem; text-align: center;}
#contents .komazawa_wrapper #thumb_koma_movie01 { width: 100%; margin: 0 auto 30px;}
#contents .komazawa_wrapper #thumb_koma_movie01:hover { opacity: 0.7; transition: 0.3s; cursor: pointer;}

#contents .komazawa_wrapper .townscape { background-color: #18301A; color:#fff}
#contents .komazawa_wrapper .townscape h2 { color: #fff; margin-bottom: 80px;}
#contents .komazawa_wrapper .townscape .ts-flex { display: flex; justify-content: space-between;}
#contents .komazawa_wrapper .townscape .ts-flex .l-area { width: 47%;}
#contents .komazawa_wrapper .townscape .ts-flex .l-area h3 { margin-bottom: 50px;}
#contents .komazawa_wrapper .townscape .ts-flex .l-area p {
    line-height: 2.5;
    font-size: 0.9rem;
    margin-bottom: 50px;
}
#contents .komazawa_wrapper .townscape .ts-flex .r-area { 
    background-image: url(../images/komazawa_town_01.png);
    width: 50%;
    background-size: cover;
    background-position: right;
}


#contents .komazawa_wrapper .luxury { background-color: #18301A; color:#ffffff}
#contents .komazawa_wrapper .luxury .lead { color: #ffffff}
#contents .komazawa_wrapper h2  { 
    font-size: 4.6rem; 
    line-height: 1.5; 
    margin-bottom: 0.5em;
	background: unset;
	margin-bottom: 0;}
#contents .komazawa_wrapper .luxury h2 { color: #ffffff;}
#contents .komazawa_wrapper h3 {font-size: 1.6em; line-height: 1.9; color: #ffffff;}
#contents .img-area { display: flex; justify-content: space-between; margin-top: 80px;}
#contents .img-area img { width: 44%; height: 100%;}
#contents .img-area p { width: 53%; line-height: 2.5; font-size: 0.9rem;}
#contents .philosophy .lead img { width: 600px;}
#contents .philosophy ol {
    padding-inline-start: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
    margin-top: 80px;
}
#contents .philosophy ol li {
    width: 37.9%;
    background: #fff;
    padding: 3em;
    box-shadow: var(--box_shadow);
    display: flex;
    align-items: center;
    gap: 2em;
    --color_green: #18301A;
    --color_black: #171717;
    --text_shadow: 0px 0.02em 0.04em rgba(0, 0, 0, 0.4);
    --box_shadow: 7px 7px 15px -7px rgba(0, 0, 0, 0.15);
}
#contents .philosophy ol li .num {font-size: 5em;}
#contents .philosophy ol li .desc { flex: 1;}
#contents .philosophy ol li .desc .tit_s { font-size: 1.5em; margin-bottom: 0.5em;}

#contents .features { background-color: #fff;}
#contents .features p{ font-size: 0.9rem; line-height: 2.2; margin-top: 0;}
#contents .features .point{ margin: 50px auto; border-bottom: 2px solid #000;}
#contents .features .point h2{ padding: 20px 0;}
#contents .features .point .hr1 { border-top: 2px solid #000;}
#contents .features .point .hr1::after { content: '4つのポイント'; position: relative; top: -20px; left: 0; padding: 0 15px 0 0; background: #fff; color: #000000; font-size: 25px; }
#contents .features .point .box-flex { display: flex; justify-content: space-between; margin-bottom: 50px;}
#contents .features .point .box-flex .box-cont { background-color: #f4f4f2; width: 23%; height: 170px; text-align: center; position: relative;}
#contents .features .point .num { position: absolute; top:-8px; left: 0; font-size: 5rem; color: #CFD1C3; line-height: 1;    margin-top: 0;}
#contents .features .point .lead { font-size: 1.1rem; text-align: left; margin: 0 auto; position: absolute; top: 55%; right: 0; transform: translate(-30%, -39%);  line-height: 1.5;}
#contents .features .point .lead span { color: #A99320;}
#contents .features .point .lead-02 { right: -10px; line-height: 1.5;}
#contents .features .point .lead-03 { right: -28px; line-height: 1.5;}
#contents .features .features-01 { margin: 100px auto 50px; font-size: 0.9rem; line-height:1.8rem;}
#contents .features .features-inner { position: relative; background-color: #f4f4f2; padding: 50px 40px 20px 40px; border-radius: 20px;}
#contents .features .num-ttl { position: absolute; top: -3px; left: 58px; font-size: 7rem; color: #CFD1C3; line-height: 0;}
#contents .features .future-cont-ttl { position: absolute; top: -25px; left: 230px; background-color: #000; color: #fff; font-size: 1.2rem; font-weight: normal; text-align: center; padding: 10px 30px; width: 350px; }
#contents .features .lead p { text-align: center; margin: 20px auto 0;}
#contents .features .lead p img{ height: 90px; width: auto !important;}
#contents .features .img-area { margin-top: 30px; flex-wrap: wrap; }
#contents .features .img-area .img-cont { width: 48%; height: auto; }
#contents .features .img-area .img-cont img{ width: 100%; height: auto;}
#contents .features .img-area .img-cont p { width: 100%; font-size: 0.9rem; line-height:1.8rem; margin-bottom: 20px;}
#contents .features .img-area .img-cont .caption { font-size: 9px; text-align: right; margin-top: -5px;}
#contents .features .img-area .img-cont .lead { font-size: 18px; text-align: center;}
#contents .features .caution { margin-top: 30px; display: flex; justify-content: flex-end;}
#contents .features .caution p { text-align:left; font-size: 9px; line-height: 1rem;}

#contents .imagine{ background-color: #CBD4CC; color:#fff; text-align: center; padding: 60px 0;}
#contents .imagine img{ width: 90%;}

#contents .floor-map { position: relative; margin: 50px 30px;}
#contents .floor-map figure { margin-inline-start: 0; margin-inline-end: 0; margin-block-start: 0; margin-block-end: 0; width: 100%; }
#contents .floor-map a { position: absolute; width: 6.6%; top: 0; left: 0; transition: opacity 0.2s linear;}
#contents .floor-map a:nth-child(1) { top: 28%; left: 61%;}
#contents .floor-map a:nth-child(2) { top: 47%; left: 47.7%;}
#contents .floor-map a:nth-child(3) { top: 10%; left: 49%;}
#contents .floor-map a:nth-child(4) { top: 23%; left: 43%;}
#contents .floor-map a:nth-child(5) { top: 32%; left: 24%;}
#contents .floor-map a:nth-child(6) { top: 48%; left: 38%;}
#contents .map_cont { display: flex; gap: 12.8%; align-items: center;}
#contents .map_cont .data { width: 45%;}
#contents .map_cont img { width: 40%;}
#contents .map_cont .num { font-size: 5em; line-height: 1; font-family: "Cormorant Garamond", serif; font-style: normal; margin-bottom: 30px;}
#contents .map_cont .tit { font-size: 1.5em; margin: 1em 0; }
#contents .map_cont .desc { font-size: 1em;}

#contents .btn-area { text-align: center;}
#contents .btn-area a img { width: 350px;}

#contents .access { padding-bottom: 150px;}
#contents .access .access-inner { display: flex; }
#contents .access .access-inner .text{ width: 50%;}
#contents .access .access-inner img{ width: 50%;}
#contents .access h4 { font-size: 1.2rem;}
#contents .access p { font-size: 0.9rem; margin-bottom: 0;}
#contents .access .access-inner .text .map { margin-bottom: 10px;}
#contents .access .access-receive { display: flex; margin-bottom: 40px; }
#contents .access .access-receive .l-text { width: 48%; margin-right: 20px;}
#contents .access .access-receive .r-text { width: 50%;}
#contents .access .access-receive .r-text span { font-size: 1.2rem;}
#contents .access .access-receive .r-text .tel { font-size: 1.1rem;}

#contents .foot_komazawa { background-color: #fff; padding-top: 40px; position: relative;}
#contents .foot_komazawa a { display: block; width: 300px; margin: 0 auto; position: absolute; left: 0; right: 0; top: -90px;}
#contents .foot_komazawa .footer { width: 420px;}



/* ==============================================================
　　コンテンツ物件一覧
============================================================== */

#contents dl.area_lineup { margin: 0; padding: 0; min-height: 100px; position: relative;}
#contents dl.area_lineup dt { margin: 0; padding: 0; display: inline-block; width: 180px; height: 52px; border-top: 2px solid #2b3c3e; position: absolute; top: 0; cursor: pointer;}
#contents dl.area_lineup dt:nth-of-type(1) { left: 0;}
#contents dl.area_lineup dt:nth-of-type(2) { left: 185px;}
#contents dl.area_lineup dt:nth-of-type(3) { left: 370px;}
#contents dl.area_lineup dt:nth-of-type(4) { left: 555px;}
#contents dl.area_lineup dt:nth-of-type(5) { right: 0;}

#contents dl.area_lineup dt.active { border-top: 2px solid #d09e04; pointer-events: none;}

#contents dl.area_lineup dd { margin: 0 0 40px 0; padding: 0 0 0 0; display: none;}

#contents dl.area_lineup dd h3 { margin: 30px auto 60px auto; text-align: center;}

/* 物件自動抽出一括資料請求 */
.requst_all { margin: 50px 0; text-align: center;}


/* ==============================================================
　　動画モーダル
============================================================== */

#contents .modal_cover { width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; z-index: 10; overflow-y: hidden; pointer-events: none; display: none;}

#contents .video_wrapper { display: block; width: 980px; height: 551px; background: #fff; margin: auto; padding: 10px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: auto;}

#contents .video_wrapper .btn_modal_close { position: absolute; right: 0; top: -40px; cursor: pointer; width: 30px;}

#contents .modal_map { width: 100%; height: 100%; background: #fffffff2; position: fixed; top: 0; left: 0; z-index: 10; overflow-y: hidden; pointer-events: none; display: none;}

#contents .komazawa_map_wrapper { display: block; width: 800px; height: 400px;  margin: auto; padding: 10px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: auto;}

#contents .komazawa_map_wrapper .btn_modal_close { position: absolute; right: 0; top: -40px; cursor: pointer;}

#contents .komazawa_map_wrapper .modal_cover .btn_modal_close { width: 30px;}