/* *************************************************************************************************** 01. 基本設定（サイトの色） *************************************************************************************************** */ body { --site-themeColor : 145, 177, 186 ; --site-accentColor : 60, 60, 60 ; /* #3c3c3c */ --site-accentColorText : 255, 255, 255 ; /* #FFF wh */ } /* *************************************************************************************************** 02. 全体共通（ページ全体・リンク・文字） *************************************************************************************************** */ /* VenoBoxが開いている「瞬間」だけ html のスクロールを殺す ★二重スクロール修正 --------------------------------- */ html:has(body.vbox-open) { overflow-y: hidden; } /* main（全ページの文字色・背景） --------------------------------- */ main { color: #FFF; background: url("../img/share/bg_bk.jpg") top center / 100% auto repeat-y; } /* small, figcaption --------------------------------- */ small, figcaption { font-size: 1.2rem; } /* Link --------------------------------- */ a, a .inbl { /* ヘッダー、フッターに影響がでないように注意 */ color:inherit; text-decoration:none; } /* ----- 汎用：文字色・下線 ----- */ a.txtLink, .txtLink a { color:#00479d !important; text-decoration:underline !important; } a.txtLink:hover, .txtLink a:hover { text-decoration:none !important; } /* 注釈（symList-kome）内のリンクは白に（背景が黒のため） */ .symList-kome a, .symList-kome a.txtLink { color: #FFF !important; } /* ----- 汎用：hover時_透過フェード ----- */ .hover a, a.hover { transition:opacity 0.15s ease-out; } .hover a:hover, a.hover:hover { opacity:0.63; } /* Text --------------------------------- */ .txtSizeInherit { font-size: inherit;} .txtSizeLLLL { font-size: 1.8em;} .txtSizeLLL { font-size: 1.5em;} .txtSizeLL { font-size: 1.35em;} .txtSizeL { font-size: 1.15em;} .txtSizeMS { font-size: 0.95em;} .txtSizeS { font-size: 0.85em;} .txtSizeSS { font-size: 0.65em;} .txtSizeSSS { font-size: 0.475em;} .txtSize1rem { font-size: 1rem;} /* txtColor --------------------------------- */ .txtColorInherit { color: inherit;} .txtColorBk { color: #000 !important;} /*黒系*/ .txtColorWh { color: #fff !important;} /*白系*/ .txtColorWh02 { color: #ddd !important;} /*白系*/ .txtColorGr {color: #767676 !important;} /*灰系*/ .txtColor01 { color: #8e0c0c !important;} /*暗赤系*/ .txtColor02 { color: #c7000a !important;} /*明赤系*/ .txtColor03 { color: #8a8c2b !important;} /*明黄系*/ .txtColor04 { color: #aa9477 !important;} /*鈍い黄系*/ /* *************************************************************************************************** 03. ヘッダー *************************************************************************************************** */ /* ヘッダー背景（全ページ共通） --------------------------------- */ .tk_headerWrap { background: rgba(255, 255, 255, .7); } /* --------------------------------- stickyON --------------------------------- */ /* -- stickyON -- */ .stickyON .tk_headerWrap { background: rgba(255,255,255,0.9); } @media print, screen and (min-width: 1050px) { .tk_headerWrap { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } /* h1（物件名）は黒（全ページ共通） --------------------------------- */ .tk_bukkenNameWrap .tk_bukkenName, .tk_bukkenNameWrap .tk_bukkenName a { color: #000 !important; } @media screen and (min-width: 340px) and (max-width: 399px) { /*MinorBreakpoint*/ .tk_bukkenNameWrap .tk_bukkenName { font-size: 4.8vw; } } /* スマホ時　コンバージョンボタンにプチインフォ挿入 --------------------------------- */ .tk_hNavWrap .tk_hNav .reqNav a { position: relative; } /* 電話ボタンの背景 ヘッダーボタンの幅は共通CSSの145pxのまま（135pxにすると「物件エントリー」が折り返す） --------------------------------- */ /* 現地案内図・物件概要の余白を詰めて、その分グロナビの文字を大きくする */ @media print, screen and (min-width: 1050px) { .tk_hNav li.mapPopNav, .tk_hNav li.outNav { margin-right: 0; } .tk_hNav li.mapPopNav a, .tk_hNav li.outNav a { margin: 0 3px; } .tk_hNav li.outNav a { margin-right: 10px; } .tk_gNavWrap li[class*="Nav"] { font-size: min(1.2vw, 1.6rem); } /* 共通CSS：1.1vw／1320px以上 1.45rem */ } /* 1050〜1319px：共通CSSの文字（1.2vw）とボタン幅（145px固定）のままだと 「物件エントリー」が折り返し、グローバルナビも詰まるので、画面幅に合わせて縮める グロナビの上余白は共通CSSでは1320px以上だけなので、ここでも入れて下揃えにそろえる */ @media screen and (min-width: 1050px) and (max-width: 1319px) { /*MinorBreakpoint*/ .tk_gNavWrap { padding-top: 1.5em; } .tk_hNav li[class*="Nav"] { font-size: 1.1vw; } .tk_hNav li.reqNav a, .tk_hNav li.resNav a { width: calc(100px + 3.4vw); } /* 1050px：約136px／1319px：約145px */ } @media screen and (max-width: 1049px) { .tk_hNav li.reqNav + .telNav { background: rgba(var(--site-accentColor),1); } } /* *************************************************************************************************** 04. グローバルナビ *************************************************************************************************** */ @media screen and (max-width: 1049px) { .tk_gNav li.spBtn { grid-template-columns: repeat(1, 1fr); } } /* 今いるページのメニューの文字下に線（bodyのクラスで判定） */ @media print, screen and (min-width: 1050px) { .tk_gNav li > a > .label { padding-bottom: 0.3em; border-bottom: 1px solid transparent; } .indexP .tk_gNav li.topNav > a > .label, .locationP .tk_gNav li.posNav > a > .label, .kodateP .tk_gNav li.conNav > a > .label, .roomplanP .tk_gNav li.plaNav > a > .label { border-bottom-color: currentColor; } } /* *************************************************************************************************** 05. ボタン（汎用ボタン・光るボタン・物件エントリー／来場予約） *************************************************************************************************** */ /* generalItem_btn | 汎用ボタン ------------------------------------------------------- - クラス名に generalItem_btn を含む場合（a要素にクラスを付ける前提。） - 例： デフォルト ---------------------------------------------------- */ [class*="generalItem_btn"], [class*="generalItem_btn"] .inbl { text-decoration: none !important; } [class*="generalItem_btn"] { display: block; position: relative; width: 95%; max-width: none; line-height: 1.15; color: #fff; font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif; font-size: 1em; text-align: center; /*letter-spacing: 0;*/ background: linear-gradient(to bottom, #333 0%, #222 100%); margin: 0 auto; padding: 19px 5vw; /*border-radius: 3px;*/ } [class*="generalItem_btn"] .kana { letter-spacing: -0.08em; } /* hover */ [class*="generalItem_btn"][href] { opacity: 1; transition: opacity 0.3s ease-out; } [class*="generalItem_btn"][href]:hover { opacity: 0.65; } @media print, screen and (min-width: 340px) { /*{overSPl}*/ [class*="generalItem_btn"] { max-width: 360px; font-size: 1.15em; padding: 19px 15px; } } @media print, screen and (min-width: 600px) { /*{overTB}*/ [class*="generalItem_btn"] { font-size: 1em; } } /* shineLoopBtn | 光（ループ） --------------------------------- */ a.shineLoopBtn { position: relative; overflow: hidden; } a.shineLoopBtn::before { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 3; width: 200%; height: 110%; background: linear-gradient(-75deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 90%); transform: translateX(-100%) skewX(-45deg); animation: 4.5s ease 0s infinite both anime_shineLoopBtn; } a.shineLoopBtn > span.txt, a.shineLoopBtn > .label { position: relative; z-index: 5; } @keyframes anime_shineLoopBtn { 0% { transform: translateX(-100%) skewX(-45deg);} 75%,100% { transform: translateX(100%) skewX(-45deg);} } /* ヘッダーの来場予約は1049px以下では下部固定ボタンになり、::before がアイコンなので光らせない */ @media screen and (max-width: 1049px) { .tk_hNav li.resNav a.shineLoopBtn::before { position: static; width: 18px; height: 18px; transform: none; animation: none; background: url("../../_nre-tk_general/img/ico/nav_ico_res.svg") center center / contain no-repeat; } } /* 物件エントリー／来場予約ボタン（ヘッダー・インフォ共通） btn a::before はループ光用に使わない --------------------------------- */ .tk_hNavWrap .tk_hNav li.reqNav, .tk_hNavWrap .tk_hNav li.resNav, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav, .noticeWrap .noticeBtn { position: relative; background: none; border: 0; box-sizing: border-box; } .tk_hNavWrap .tk_hNav li.reqNav a, .tk_hNavWrap .tk_hNav li.resNav a, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a, .tk_gNav li.spBtn .resNav a, .noticeWrap .noticeBtn a.generalItem_btn { color: #FFF !important; } /* ホバー時は透明にせず、グラデの左右色の単色にする */ .tk_hNavWrap .tk_hNav li.reqNav a:hover, .tk_hNavWrap .tk_hNav li.resNav a:hover, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a:hover, .tk_gNav li.spBtn .resNav a:hover, .noticeWrap .noticeBtn a.generalItem_btn:hover { opacity: 1 !important; } /* ボタン本体は左右色の単色、グラデは ::after に重ねる ホバー時は ::after をフェードアウトして、なめらかに単色へ変える （グラデは直接アニメーションできないため） */ .tk_hNavWrap .tk_hNav li.reqNav a, .tk_hNavWrap .tk_hNav li.resNav a, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a, .tk_gNav li.spBtn .resNav a, .noticeWrap .noticeBtn a.generalItem_btn { position: relative; isolation: isolate; /* ::after(z-index:-1)を文字の下・背景色の上に置く */ background-image: none !important; transition: none !important; } .tk_hNavWrap .tk_hNav li.reqNav a::after, .tk_hNavWrap .tk_hNav li.resNav a::after, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a::after, .tk_gNav li.spBtn .resNav a::after, .noticeWrap .noticeBtn a.generalItem_btn::after { content: ""; pointer-events: none; position: absolute; z-index: -1; inset: 0; display: block; width: auto; height: auto; margin: 0; opacity: 1; scale: none !important; transition: opacity 0.4s ease; } .tk_hNavWrap .tk_hNav li.reqNav a:hover::after, .tk_hNavWrap .tk_hNav li.resNav a:hover::after, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a:hover::after, .tk_gNav li.spBtn .resNav a:hover::after, .noticeWrap .noticeBtn a.generalItem_btn:hover::after { opacity: 0; } /* 物件エントリー（ヘッダー／インフォ／間取りページ） */ .tk_hNavWrap .tk_hNav li.reqNav a, .noticeWrap .noticeBtn.req a.generalItem_btn { background-color: #6d542f !important; } .tk_hNavWrap .tk_hNav li.reqNav a::after, .noticeWrap .noticeBtn.req a.generalItem_btn::after { background: linear-gradient(90deg, #6d542f 0%, #947c59 50%, #6d542f 100%); } /* 来場予約（ヘッダー／インフォ） */ .tk_hNavWrap .tk_hNav li.resNav a, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a, .tk_gNav li.spBtn .resNav a, .noticeWrap .noticeBtn.res a.generalItem_btn { background-color: #590c06 !important; } .tk_hNavWrap .tk_hNav li.resNav a::after, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a::after, .tk_gNav li.spBtn .resNav a::after, .noticeWrap .noticeBtn.res a.generalItem_btn::after { background: linear-gradient(to right, #590c06 0%, #8a3e38 50%, #590c06 100%); } .tk_hNavWrap .tk_hNav li.reqNav a .label, .tk_hNavWrap .tk_hNav li.resNav a .label, .tk_hNavWrap .tk_hNav li.resNav.onlineResNav a .label, .noticeWrap .noticeBtn a.generalItem_btn .label { text-align: center; } /* *************************************************************************************************** 06. 下層ページのページヘッダー（ページタイトル） *************************************************************************************************** */ body:not(.indexP) .pageHeaderWrap .pageHeaderTxt { font-size: 2.0em; letter-spacing: 0.1em; } body:not(.indexP) .pageHeaderWrap .pageHeaderTxt::after { content: ""; display: block; width: 80px; height: 1px; background: currentColor; margin: 0.4em auto; } body:not(.indexP) .pageHeaderWrap .pageHeaderTxt .hWord { letter-spacing: 0.25em; margin-bottom: 0.2em; } @media screen and (max-width: 599px) { body:not(.indexP) .pageHeaderWrap .pageHeaderTxt { font-size: 7.3vw; line-height: 1.4; } } /* *************************************************************************************************** 07. コンテンツの枠（pageTheme・contbox） *************************************************************************************************** */ /* pageTheme --------------------------------- */ .pageTheme { margin-top: 5em; } .pageTheme + .pageTheme { margin-top: 8em; } section.pageTheme section { margin-top: 5em; } /* pageThemeHeader --------------------------------- */ .pageThemeHeader { /*margin-bottom: 1.5em;*/ } /* contbox --------------------------------- */ .contbox { max-width: 1260px; width: 90%; margin: 0 auto; } /* *************************************************************************************************** 08. 見出し（h2〜h6・ptHeading・ptTitle） *************************************************************************************************** */ /* ptHeading --------------------------------- */ .ptHeading { width: 96%; margin-right: auto; margin-left: auto; margin-bottom: 1.5em; } @media print, screen and (min-width: 1050px) { [class*="Col"] .ptHeading { text-align: left; } .ptHeading { width: auto; text-align: center; margin-right: 0; margin-left: 0; } } /* heading ---------------------------------------------------- */ .ptHeading .heading, [class*="headingSty"] { --M-fluidFontSize-max-fontsize: 23; --M-fluidFontSize-min-fontsize: 19; --M-fluidFontSize-max-viewport: 1400; --M-fluidFontSize-min-viewport: 430; --M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem ); display: block; min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */ line-height: 1.8; color: inherit; font-size: var(--M-fluidFontSize-fontSize); text-align: center; letter-spacing: 0.1em; padding: 0; } .ptTitle .hWord { color: #c1ad93; letter-spacing: 0.2em; font-family: var(--site-fontFamily); font-size: 0.6em; } h2.ptHeading .heading, .headingSty2 { --M-fluidFontSize-max-fontsize: 38; --M-fluidFontSize-min-fontsize: 28; margin-bottom: 1.2em; } h3.ptHeading .heading { --M-fluidFontSize-max-fontsize: 26; --M-fluidFontSize-min-fontsize: 19; margin-bottom: 1.2em; } /* h3の色はここでまとめて指定（各ページCSSには書かない） */ h3.ptHeading .heading, h3.posEn, h3.ptTitle .hWord { color: #c1ad93; } h4.ptHeading .heading, .headingSty4 { --M-fluidFontSize-max-fontsize: 24; --M-fluidFontSize-min-fontsize: 18; margin-bottom: 1em; } h5.ptHeading .heading { --M-fluidFontSize-max-fontsize: 22; --M-fluidFontSize-min-fontsize: 17; margin-bottom: 1em; } h6.ptHeading .heading { --M-fluidFontSize-max-fontsize: 20; --M-fluidFontSize-min-fontsize: 16; margin-bottom: 1em; } @media screen and (max-width: 599px) { /*{belowSP}*/ .ptHeading .heading, [class*="headingSty"] { line-height: 1.8; letter-spacing: .08em; margin-bottom: 0.9em; } } /* *************************************************************************************************** 09. 本文（txtBox） *************************************************************************************************** */ /* 本文の基本サイズ（各ページの .txtBox はこの変数を使う） */ .unique-main { /*--txtBox-fontSize: 1.5rem;*/ } @media print, screen and (min-width: 600px) { .unique-main { /*--txtBox-fontSize: 1.6rem;*/ } } @media print, screen and (min-width: 1050px) { .unique-main { /*--txtBox-fontSize: 1.7rem;*/ } } .txtBox:first-child { margin-top: 0; } .txtBox + .txtBox { margin-top: 1em; } @media print, screen and (min-width: 1050px) { .ptHeading + .txtBox { text-align: center; } [class*="Col"] .ptHeading + .txtBox { text-align: left; } .txtBox:last-child { margin-bottom: 0em; } } /* *************************************************************************************************** 10. 画像キャプション・注釈・凡例 *************************************************************************************************** */ /* Imgcap | 例:

xxxxx

/

xxxxx

*/ .imgcapParent { position:relative; } .imgcapkeep > span { display:inline-block; } .imgcapkeep.wh {color:#ffffff;text-shadow:0 0 3px rgba(0,0,0,0.3);} .imgcapkeep.bk {color:#202020;text-shadow:0 0 3px rgba(255,255,255,0.3);} .imgcapkeep.gr {color:#767676;text-shadow:0 0 3px rgba(255,255,255,0.3);} .imgcapkeep .wh {color:#ffffff;text-shadow:0 0 5px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1);} .imgcapkeep .bk {color:#202020;text-shadow:0 0 5px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.7), 0 0 3px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,0.9), 0 0 1px rgba(255,255,255,0.5), 1px 1px 0 rgba(255,255,255,0.5), -1px 1px 0 rgba(255,255,255,0.5), 1px -1px 0 rgba(255,255,255,0.5), -1px -1px 0 rgba(255,255,255,0.5);} .imgcapkeep .gr {color:#767676;text-shadow:0 0 5px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.7), 0 0 3px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,0.9), 0 0 1px rgba(255,255,255,0.5), 1px 1px 0 rgba(255,255,255,0.5), -1px 1px 0 rgba(255,255,255,0.5), 1px -1px 0 rgba(255,255,255,0.5), -1px -1px 0 rgba(255,255,255,0.5);} /* Symbol List（※の注釈） */ .symList-kome {display:block !important;} .symList-kome .symItem {display:table;width:100%;clear:both;} .symList-kome .sym {display:table-cell;white-space:nowrap;padding-right:0.25em;} .symList-kome .sym + span {display:table-cell;width:100%;} /* 注釈エリア（ページ下の注釈）の文字色 */ .bukkenCaptionWrap { color: #f4f4f4; padding: 2em 0; background: #000000; } /* Caption Legend Wrap | 例:
=収納
WIC
=ウォークインクローゼット
*/ .capLegendWrap { display:flex; flex-wrap: wrap; align-items:center; line-height:1.4; font-size:1rem; margin-top:0.75em; margin-bottom:0.75em; } .capLegendWrap .legUnit { display:flex; align-items:center; margin: 0.175em 1.25em 0.175em 0; } .capLegendWrap .legItem, .capLegendWrap .legCap { display: inline-block; line-height:inherit; font-size:inherit; } .capLegendWrap [class*="iro"] { width:2.25em; height:0.95em; margin-right: 0.2em; border:1px solid rgba(0,0,0,0.2); } .capLegendWrap .iro1 {background:#c9c2b6;} .capLegendWrap .iro2 {background:#dfd1cb;} .capLegendWrap .iro3 {background:#cbd5e8;} @media print, screen and (min-width: 600px) { /*{overTB}*/ .capLegendWrap { font-size: 1.1rem; } } /* *************************************************************************************************** 11. インフォメーション（noticeWrap）・お詫びと訂正 *************************************************************************************************** */ .noticeWrap .noticeBtn { max-width: 300px; } @media print, screen and (min-width: 600px) { .noticeWrap .btnBox { grid-template-columns: repeat(auto-fill, 245px); } .noticeWrap .btnBox .noticeBtn { width: 100%; } } /* お詫びと訂正 --------------------------------- */ .correctionBox { color: #fff; font-size: .8em!important; margin: 10px auto ; padding: 20px 30px; background: none; border: 1px solid rgba(255,255,255,0.5); } /* *************************************************************************************************** 12. コンテンツリンク（pt-contentsLink：各ページへのリンク） *************************************************************************************************** */ .pt-contentsLink li a { text-align: center; font-size: 1.8rem; background: none; } .pt-contentsLink li a strong::after { margin-right: auto; margin-left: auto; margin-bottom: 1em; } @media screen and (max-width: 800px) { /*MinorBreakpoint*/ /*.pt-contentsLink li a .txtBox { line-height: 1.6 !important; }*/ } @media screen and (max-width: 599px) { .pt-contentsLink li a { text-align: left; } /*.pt-contentsLink li a .txtBox { line-height: 1.6; }*/ .pt-contentsLink li a strong::after { margin-left: 0; } } .pt-contentsLink li.navLoc a::after { background-image: url("../img/index/nav_p_01.jpg");} .pt-contentsLink li.navLoc a::after { background-image: image-set(url("../img/index/nav_p_01.webp") type("image/webp"), url("../img/index/nav_p_01.jpg") type("image/jpeg"));} /* WebP対応ブラウザはWebP */ .pt-contentsLink li a::before { font-size: 0.55em; letter-spacing: 0;} .pt-contentsLink li.navLoc a::before { content: "蛇崩川緑道（最遠区画より徒歩4分／約260m）";} .pt-contentsLink li.navRoo a::after { background-image: url("../img/index/nav_p_03.jpg");} .pt-contentsLink li.navRoo a::after { background-image: image-set(url("../img/index/nav_p_03.webp") type("image/webp"), url("../img/index/nav_p_03.jpg") type("image/jpeg"));} /* WebP対応ブラウザはWebP */ .pt-contentsLink li.navRoo a::before { content: "外観完成予想図";} /* *************************************************************************************************** 13. 都心型戸建の4つのPOINT（tkConceptPoint） *************************************************************************************************** */ .tkConceptPoint ul small{ font-size: 0.85rem!important; text-align: right; } /* *************************************************************************************************** 14. フッター *************************************************************************************************** */ /* holidayBox | 休業告知のお知らせ ---------------------------------------------------- */ .tk_contact .holidayBox { width: 100%; } .tk_contact .holidayBox .holiday { display: block; width: 100%; line-height: 1.4; color: #900; font-size: 1.15rem; font-size: 0.8em; padding: 0.4em 0; }