@charset "UTF-8";
/* =====
* MAINTENANCE :: トップページ - S.I.C
=================================================================== */
#Main .block-index-01 .sic {position: relative;}
#Main .block-index-01 .sic h3 {
  font-family: var(--serif);
  text-align: center;
  letter-spacing: 0.2em;
  color: #3d667a;
  margin-bottom: 1.5em;
}
#Main .block-index-01 .sic h3 strong {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 175%;
  display: block;
  color: #00344e;
  margin-top: 0.5em;
}
#Main .block-index-01 .sic h3 small {
  font-size: 75%;
  line-height: 1;
  color: #00344e;
  display: block;
}
#Main .block-index-01 .sic div {
  border-radius: 5px;
  padding: 2em;
  background-color: #fafafa;
  margin-bottom: 2em;
  margin-right: 38%;
  mix-blend-mode: multiply;
}
#Main .block-index-01 .sic h4 {
  font-family: var(--serif);
  font-size: 125%;
  letter-spacing: 0.2em;
  color: #00344e;
  padding: 0 0 0.5em;
  margin: 0 0 0.75em;
  border-bottom: 1px solid #00344e;
}
#Main .block-index-01 .sic h4 span {
  background: rgb(252,215,69);
  background: -moz-linear-gradient(0deg, rgba(252,115,69,0) 20%, rgba(252,127,69,0.3) 20%, rgba(252,115,69,0.2) 50%, rgba(252,133,69,0) 50%, rgba(252,121,69,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(252,115,69,0) 20%, rgba(252,127,69,0.3) 20%, rgba(252,115,69,0.2) 50%, rgba(252,133,69,0) 50%, rgba(252,121,69,0) 100%);
  background: linear-gradient(0deg, rgba(252,115,69,0) 20%, rgba(252,127,69,0.3) 20%, rgba(252,115,69,0.2) 50%, rgba(252,133,69,0) 50%, rgba(252,121,69,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcd745",endColorstr="#fcdd45",GradientType=1);
}
#Main .block-index-01 .sic h4 + p {
  padding: 0;
  font-family: var(--serif);
  font-size: 93.75%;
  letter-spacing: 0.2em;
}
@media only screen and (min-width:769px) {
  #Main .block-index-01 .sic::after {
    content: "";
    display: block;
    background: transparent url(../img/index_img_12.png) no-repeat 100% 0;
    background-size: contain;
    position: absolute;
    top: 12em;
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}
@media only screen and (max-width:768px) {
  #Main .block-index-01 .sic::after {
    content: "";
    display: block;
    background: transparent url(../img/index_img_12.png) no-repeat 100% 0;
    background-size: contain;
    height: 15em;
  }
  #Main .block-index-01 .sic h3 {font-size: 125%;}
  #Main .block-index-01 .sic h3 strong {line-height: 1;}
  #Main .block-index-01 .sic h3 small {margin-top: 2em;line-height: 1.5;}
  #Main .block-index-01 .sic div {margin-right: 0;}
  #Main .block-index-01 .sic h4 + p {letter-spacing: 0;text-align: left;font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
  #Breadcrumb {display: none;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}
/* =====
* MAINTENANCE :: 販売代理項目を非掲載の場合のレイアウト調整用CSS
===================================================================
#Colophon address .seller {display: none;}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  #Colophon address .left {
    float: left;
    border-bottom: 0 none transparent;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #Colophon address .right {float: right;}
  #Colophon address .owner {max-width: 18em;}
  #Colophon address .seller {max-width: 20em;}
  #Colophon address .tel {text-align: left;}
}
@media only screen and (max-width:768px) {
  #Colophon address .owner {float: none;margin: 0 auto;text-align: center;}
  #Colophon address .owner p::before {background-position: 50% 100%;}
}
 */
/* =====
* MAINTENANCE :: 販売代理項目を拡張する場合のレイアウト調整用CSS - 3社
===================================================================
#Colophon address + .seller {padding: 1em 0;border-bottom: 1px solid rgb(106 136 156 / 10%);}
#Colophon address + .seller h3 {margin-bottom: 0.5em;font-weight: bold;font-size: 75%;line-height: 1;}
#Colophon address + .seller a {text-decoration: none;color: #00344e;}
#Colophon address + .seller p {font-size: 10px;line-height: 1.4;letter-spacing: 0;}
#Colophon address + .seller p span {white-space: nowrap;display: inline-block;}
#Colophon address + .seller .grid-list > div p a::before {content: "";display: block;height: 2em;background-repeat: no-repeat;background-size: contain;}
#Colophon address + .seller .grid-list > div:nth-child(1) p a::before {background-image: url("../img/common_logo_03.jpg");}
#Colophon address + .seller .grid-list > div:nth-child(2) p a::before {background-image: url("../img/common_logo_04.jpg");}
#Colophon address + .seller .grid-list > div:nth-child(3) p a::before {background-image: url("../img/common_logo_05.jpg");}
@media only screen and (min-width:769px) {
  #Colophon address .right {width: 30%;}
  #Colophon address + .seller .grid-list {margin: 0;justify-content: space-between;}
  #Colophon address + .seller .grid-list > div {position: relative;width: 30%;margin: 0;}
  #Colophon address + .seller .grid-list > div:nth-child(2) h3 {opacity: 0;}
}
@media only screen and (max-width: 768px) {
  #Colophon address + .seller .grid-list > div {text-align: center;}
  #Colophon address + .seller .grid-list > div p a::before {background-position: 50% 0;}
  #Colophon address + .seller .grid-list > div:nth-child(2) h3 {display: none;}
}
*/
/* =====
* MAINTENANCE :: 販売代理項目を拡張する場合のレイアウト調整用CSS - 2社
=================================================================== 
#Colophon address .right .seller:nth-of-type(2) p::before {background-image: url(../img/common_logo_03.png);}
#Colophon address .right .seller:nth-of-type(3) p::before {background-image: url(../img/common_logo_04.png);}
@media only screen and (min-width:769px) {
  #Colophon address .right {width: calc(100% - 20em);display: flex;justify-content: end;}
  #Colophon address .right .owner {float: none;max-width: 14em;}
  #Colophon address .right .owner p span {white-space: normal;}
  #Colophon address .right .seller {float: none;display: block;margin: 0;}
  #Colophon address .right .seller:nth-of-type(2) {max-width: 12em;}
  #Colophon address .right .seller:nth-of-type(3) {max-width: 15em;}
  #Colophon address .right .seller p span {white-space: normal;}
}
@media only screen and (max-width: 768px) {
  #Colophon address .owner {width: 100%;}
  #Colophon address .right .seller {width: 100%;float: none;display: block;text-align: center;}
}*/
/* =====
* MAINTENANCE :: 来場予約ボタン非公開
=================================================================== */
#Conversion ul > li.reserve,
#Colophon nav ul li.reserve {display: none;}
#GlobalNavigation ul.cv li.reserve a {cursor: default;pointer-events: none;opacity: 0.6;}
#GlobalNavigation ul.cv li.reserve a span {opacity: 0;}
#GlobalNavigation ul.cv li.reserve a::before {content: "- COMING SOON -";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 100%;color: #fff;white-space: nowrap;}
#GlobalNavigation ul.cv li.reserve a::after {display: none;}
@media only screen and (min-width:769px) {
  #GlobalHeader .container {padding-right: 12.5em}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  #GlobalHeader .container {padding-right: 10.5em}
}
@media only screen and (max-width:768px) {
  #Conversion {width: 80vw;}
  #Conversion ul > li {flex: 1;}
  #Conversion ul > li.reserve {display: none;}
}

/* =====
* MAINTENANCE :: 現地･マンションギャラリー - COMING SOON
=================================================================== */
#GlobalHeader nav > ul > li a[href^="map"],
#Colophon nav ul li a[href^="map"] {display: none;}

/* =====
* MAINTENANCE :: 資料請求者限定サイト ボタン設置 - COMING SOON
=================================================================== 
#Conversion ul > li.login a {cursor: default;pointer-events: none;opacity: 0.6;}
#Conversion ul > li.login a span {opacity: 0;}
#Conversion ul > li.login a::before {content: "COMING SOON";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 87.5%;color: #fff;white-space: nowrap;}
#GlobalNavigation ul.cv li.login a {cursor: default;pointer-events: none;opacity: 0.6;}
#GlobalNavigation ul.cv li.login a span {opacity: 0;}
#GlobalNavigation ul.cv li.login a::before {content: "- COMING SOON -";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 100%;color: #fff;white-space: nowrap;}
#GlobalNavigation ul.cv li.login a::after {display: none;}
#Main .block-index-03 .login a {cursor: default;pointer-events: none;opacity: 0.6;}
#Main .block-index-03 .login a span {display: block;transform: translateY(-8%);}
#Main .block-index-03 .login a::before {content: "- COMING SOON -";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -10%);font-size: 60%;color: #fff;white-space: nowrap;}
#Colophon nav ul li.login a {cursor: default;pointer-events: none;}
#Colophon nav ul li.login a span {opacity: 0;}
#Colophon nav ul li.login a::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: rgb(255 255 255 / 50%);}
#Colophon nav ul li.login a::after {content: "COMING SOON";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;font-size: 93.75%;white-space: nowrap;}
@media only screen and (max-width:768px) {
  #Conversion ul > li.login {display: none;}
}
*/
/* =====
* MAINTENANCE :: 2022.02.14 - Instagramバナー設置
=================================================================== */
#Colophon nav .container > .cf > .left {display: flex;align-items: center;gap: 1em;}
#Colophon nav .container > .cf > .left p {margin: 0;}
#Colophon nav .container > .cf > .left p a {position: relative;padding-left: 2em;font-size: 68.75%;font-weight: bold;line-height: 4.5;white-space: nowrap;color: #444;}
#Colophon nav .container > .cf > .left p a::before {content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1.5em;height: 1.5em;}
#Colophon nav .container > .cf > .left p a[href*="facebook"]::before {background: transparent url("../img/common/icon_facebook.svg") no-repeat 50% / contain;opacity: 0.8;/*filter: invert(29%) sepia(39%) saturate(4694%) hue-rotate(211deg) brightness(98%) contrast(111%);*/}
#Colophon nav .container > .cf > .left p a[href*="youtube"]::before {background: transparent url("../img/common/icon_youtube.svg") no-repeat 50% / contain;opacity: 0.8;/*filter: invert(18%) sepia(96%) saturate(4792%) hue-rotate(339deg) brightness(93%) contrast(124%);*/}
#Colophon nav .container > .cf > .left p a[href*="tiktok"]::before {background: transparent url("../img/common/icon_tiktok.svg") no-repeat 50% / contain;opacity: 0.8;/*filter: invert(29%) sepia(39%) saturate(4694%) hue-rotate(211deg) brightness(98%) contrast(111%);*/}
#Colophon nav .container > .cf > .left p a[href*="instagram"]::before {background: transparent url("../img/common/icon_instagram.svg") no-repeat 50% / contain;opacity: 0.8;/*filter: invert(18%) sepia(96%) saturate(4792%) hue-rotate(339deg) brightness(93%) contrast(124%);*/}
@media only screen and (max-width:768px) {
  #Colophon nav {display: block;}
  #Colophon nav .container > .cf > .left {margin: 0 auto;padding-top: 1em;overflow: hidden;text-align: center;justify-content: center;}
  #Colophon nav .container > .cf > .left p:nth-child(1),
  #Colophon nav .container > .cf > .left p:nth-child(2) {float: none;margin: 0;display: inline-block;}
  #Colophon nav .container > .cf > .right {display: none;}
}
/* =====
* MAINTENANCE :: 資料請求完了ページ - サンプレミアクラブバナー設置
=================================================================== */
@media only screen and (min-width:769px) {
  .common-sunpremier {border-top: 1px solid rgb(45 54 109 / 20%);margin-top: 3em;padding-top: 3em;}
  .common-sunpremier h4 {max-width: 400px;margin: 0 auto;}
  .common-sunpremier p {color: rgb(45 54 109);text-align: center;font-size: 112.5%;font-weight: bold;margin-top: 1em;}
  .common-sunpremier .grid-list {background-color: rgb(45 54 109);border-radius: 10px;max-width: 760px;margin: 0 auto;padding: 0 15px;position: relative;}
  .common-sunpremier .grid-list > div {width: calc(50% - 30px);margin: 20px 15px 30px;}
  .common-sunpremier .grid-list::after {content: "※上記特典はマンション契約時にクラブ会員登録を完了している必要があります。";position: absolute;bottom: 1em;right: 0;transform: scale(0.9);transform-origin: 0 0;font-size: 10px;color: #fff;}
}
@media only screen and (max-width:768px) {
  .common-sunpremier h4 {max-width: 90%;margin: 0 auto;}
  .common-sunpremier p {color: rgb(45 54 109);text-align: center;font-weight: bold;margin-top: 1em;}
  .common-sunpremier .grid-list {background-color: rgb(45 54 109);padding: 1em;border-radius: 10px;position: relative;}
  .common-sunpremier .grid-list::after {content: "※上記特典はマンション契約時にクラブ会員登録を完了している必要があります。";position: absolute;bottom: 0.5em;left: 50%;transform: scale(0.64) translateX(-50%);transform-origin: 0 0;font-size: 10px;color: #fff;white-space: nowrap;}
}

/* =====
* MAINTENANCE :: トップページ メインビジュアル固有演出
=================================================================== */
#Main .block-matterport {background: transparent url("../img/index_bg_04.webp") no-repeat 50% / cover;}
#Main .block-matterport .btn {background-color: rgba(19 19 48 / 60%);padding: 3em 0;text-align: center;line-height: 1.2;color: #fff;font-family: var(--serif);font-size: 200%;}
#Main .block-matterport .btn::before {content: "";display: block;width: 100%;height: 3em;margin-bottom: 0.5em;background: transparent url("../img/common_icon_360.svg") no-repeat 50% / contain;}
#Main .block-matterport .btn span {display: block;margin: 1em auto 0;width: 10em;border: 2px solid #fff;border-radius: 3em;padding: 0.5em;line-height: 1;text-indent: 2em;font-size: 50%;}
#Main .block-matterport .btn span::after {content: "〉";margin-left: 1em;}
body.pc .block-matterport .btn span {transition: background-color ease 200ms, color ease 200ms;}
body.pc .block-matterport .btn:hover span {background-color: #fff;color: #333;}

/* =====
* MAINTENANCE :: ZEHページ BELS
=================================================================== */
#Main .block-zehm-01 .bels {padding-top: 2em;}
#Main .block-zehm-01 .bels h5 {background: linear-gradient(90deg, rgba(12,121,53,1) 0%, rgba(3,158,64,1) 50%, rgba(12,121,53,1) 100%);margin-bottom: 0;padding: 0.5em 0;text-align: center;font-size: 112.5%;font-family: var(--serif);color: #fff;}
#Main .block-zehm-01 .bels .column-list {padding: 1em;background-color: #fff;}
#Main .block-zehm-01 .bels .column-list img {max-width: 400px;}
#Main .block-zehm-01 .bels .column-list p {padding: 0 1em;font-size: 87.5%;line-height: 1.5;}
#Main .block-zehm-01 .bels .column-list p small {display: block;font-size: 10px;}
@media only screen and (min-width:769px) {
  #Main .block-zehm-01 .bels .column-list {display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;}
}
@media only screen and (max-width:768px) {
  #Main .block-zehm-01 .bels .column-list img {margin-top: 1em;}
  #Main .block-zehm-01 .bels .column-list p small {margin-top: 1em;}
}
/* =====
* MAINTENANCE :: 周辺のサンパークマンション
=================================================================== */
#Main .block-recommended-01 {position: relative;z-index: 2;padding: 1.5em 0;background-color: #ddd;}
#Main .block-recommended-01 h3 {margin: 0;mix-blend-mode: screen;text-align: center;font-size: 360%;font-weight: normal;font-family: var(--serif);}
#Main .block-recommended-01 h3 span {display: inline-block;background: rgb(35,42,65);background: linear-gradient(89deg, rgba(142,134,115,0.3) 0%, rgba(142,134,115,0.1) 50%,rgba(142,134,115,0.3) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Main .block-recommended-01 h4 {margin-top: -2.2em;text-align: center;font-size: 125%;font-weight: normal;font-family: var(--serif);}
#Main .block-recommended-01 h4 span {display: inline-block;background: rgb(133, 146, 148);background: linear-gradient(90deg, rgba(133, 146, 148, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(133, 146, 148, 1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Main .block-recommended-01::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;mix-blend-mode: difference;background: url(https://sunpark-mansion.com/wp/wp-content/themes/sunpark/img/concept/img-01.jpg) no-repeat 50% cover;}
#Main .block-recommended-01::before {background-image: url(https://sunpark-mansion.com/wp/wp-content/themes/sunpark/img/concept/img-01.jpg);}
#Main .block-recommended-01 .swiper-slide {max-width: 450px;width: calc(80vw - 4em);padding: 1em;}
@media only screen and (max-width:768px) {
  #Main .block-recommended-01 h3 {font-size: 280%;}
}
/* =====
* MAINTENANCE :: ナビゲーション一部無効化
=================================================================== 
#GlobalHeader nav > ul > li.menu .toggle + ul li a[href^="plan"],
#GlobalHeader nav > ul > li.menu .toggle + ul li a[href^="equipment01"] {cursor: default;pointer-events: none;opacity: 0.3;}
*/
/* =====
* MAINTENANCE :: コンセプト
=================================================================== */
#Main .block-index-05 {background: #e8cfb9 url("https://sunpark-mansion.com/wp/wp-content/themes/sunpark/img/common/bg-02.webp") no-repeat 50% 50%;background-blend-mode: overlay;background-size: cover;padding: 4em 0;position: relative;}
#Main .block-index-05 .ttl-style-01 {color: var(--color-01);}
#Main .block-index-05 .slider-common-concept {overflow: hidden;}
#Main .block-index-05 .slider-common-concept .swiper-wrapper {transition-timing-function: linear;}
#Main .block-index-05 .slider-common-concept .swiper-slide {width: auto!important;}
#Main .block-index-05 .slider-common-concept .grid-list {margin: 0;width: calc(21.5625em + 6em + 21.5625em + 6em);}
#Main .block-index-05 .slider-common-concept .grid-list .btn-content-01,
#Main .block-index-05 .slider-common-concept .grid-list .btn-content-02 {margin: 1em;background-image: url("../img/common/icon-arrow-circle-next.webp");}

@media only screen and (max-width:768px) {
  #Main .block-index-05 .slider-common-concept .grid-list.pickup {width: calc(21.5625em + 6em);}
  #Main .block-index-05 .slider-common-concept .grid-list .btn-content-02 figure {overflow: hidden;max-height: 11.563em;}
  #Main .block-index-05 .slider-common-concept .grid-list .btn-content-02 figure + p {letter-spacing: 0;}
  #Main .block-index-05 .slider-common-concept .grid-list .btn-content-02 figure + p span {display: none;}
  #Main .block-index-05 .slider-common-concept .grid-list .btn-content-02 figure img {max-width: 21.5625em;margin: 0 auto;}
}
/* =====
* MAINTENANCE :: 予告広告
=================================================================== */
#Announcement {position: relative;z-index: 2;padding: 0.5em;line-height: 1.5;letter-spacing: 0.15em;text-align: center;font-family: var(--serif);color: #c97b60;opacity: 0;transition: opacity var(--easing) 800ms;}
#Announcement strong {border: 1px solid #c97b60;display: inline-block;padding: 0.5em 1em;transform-origin: 50% 50%;transform: scale(0.8);vertical-align: middle;font-weight: normal;}
#Announcement span {margin-left: 1em;color: #ff8331;}
#Announcement span .year {font-style: normal;font-size: 125%;}
#Announcement span .month {font-style: normal;font-size: 150%;}
#Announcement::before {content: "";position: absolute;top: 0;left: 0;right: 100%;bottom: 0;z-index: -1;background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0.25) 100%);transition: right var(--easing) 600ms 600ms;}
#Announcement::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 1px;background: linear-gradient(90deg, rgba(255,252,249,1) 0%, rgba(239,100,89,0.2) 50%, rgba(255,252,249,1) 100%);}
#Announcement.append {opacity: 1;}
#Announcement.append::before {right: 0;}
@media only screen and (max-width:768px) {
  #Announcement {padding: 1em 0;font-size: 75%;white-space: nowrap;}
  #Announcement strong {display: block;max-width: 10em;margin: 0 auto 0.5em;border-radius: 3em;text-align: center;line-height: 1;font-size: 125%;}
  #Announcement span {display: block;font-size: 137.5%;line-height: 1;}
}