@charset "UTF-8";

@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&family=Noto+Serif+JP:wght@200..900&family=EB+Garamond:wght@400;500;600;700;800&family=Public+Sans:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;400;500;600&family=Allura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=M+PLUS+1p&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url("../font/Nexus_Font.css");

.pre-inc{font-family: YakuHanMP, "Noto Serif JP", serif;}
.pre-inc .goth{font-family: YakuHanJP, 'Public Sans', 'Noto Sans JP', sans-serif;}
.pre-inc{scroll-behavior: smooth;}
.pre-inc img{-ms-interpolation-mode:bicubic;}
.pre-inc .note{font-size: 0.65em;line-height: 1.5;}


@media screen and (min-width: 769px) {
.pre-inc {font-size: 20px;line-height: 1.6;}
.pre-inc .wrap1024{max-width: 51.2em;margin: 0 auto;}
.pre-inc .sp{display: none!important;}
}

@media screen and (min-width: 769px) and (max-width: 1640px) {
.pre-inc{font-size: 1.2vw;}
}

/* @media screen and (min-width: 769px) and (max-width: 1360px) {
html,body{font-size: 1.45vw;}
} */

@media screen and (max-width: 768px) {
.pre-inc{font-size: 3.5vw;line-height: 1.5;}
.pre-inc .pc{display: none!important;}
.pre-inc .wrap1024{padding: 0 4vw;}
}


/*||||||||||||||||| フッター（全ページ共通） |||||||||||||||||*/
.pre-inc footer{padding:0 0 6em;}

/* バナー */
.pre-inc .bannerArea{margin: 80px auto 0;max-width: 1024px;}
.pre-inc .bannerArea a{display: block;transition: 0.3s all;}
.pre-inc .bannerArea a:nth-of-type(n+2){margin-top: 30px;}

@media screen and (min-width: 769px){
.pre-inc .bannerArea a:hover{opacity: 0.6;}
}

@media screen and (max-width: 768px){
.pre-inc .bannerArea{width: 90%;margin: 30px auto 0;}
.pre-inc .bannerArea a:nth-of-type(n+2){margin-top: 20px;}
}

/*||||||||||||||||| ヘッダー＆メニュー |||||||||||||||||*/

.pre-inc header{position: fixed;width: 100%; top: 0;left: 0;z-index: 100000;padding: 18px 15px 18px 35px;background: rgba(255,255,255,0.9);height: 85px;font-family: YakuHanJP, "Noto Sans JP", sans-serif;}
.layer .pre-inc .scroll_down header,.h_active header{box-shadow: 0 0 5px rgba(0,0,0,0.3);}
.pre-inc header .header_wrap{display: flex;justify-content: space-between;margin: 0 auto;align-items: center;max-width: 1920px;}
.pre-inc header h1{margin-right: 10px;}
.pre-inc header h1 img{width: 270px;}
.pre-inc header h1 a{pointer-events: painted;}
.pre-inc header h1 a span{display: inline-block;}

.pre-inc .header_right{display: flex;align-items: center; height: calc(100% + 20px);position: absolute;right: 100px;top: -10px;}
.pre-inc .header_right a{transition: 0.3s all;}
.pre-inc .header_right .hr_om{display: flex;flex-direction: column;justify-content: center;margin-right: 15px;}
.pre-inc .header_right .hr_om a{font-size: 14px;color: #fff;padding: 3px 0;}
.pre-inc .header_right .hb{width: 120px;height: 60%;display: flex;justify-content: center;align-items: center;color: #fff;letter-spacing: 0;font-size: 15px;margin-left: 9px;border-radius: 7px;}
.pre-inc .header_right .hb i{z-index: 1;text-align: center;line-height: 1;}
.pre-inc .header_right .hb_reservation{background: #b28184;order: 2;}
.pre-inc .header_right .hb_request{background: #7b680b;order: 1;}
.pre-inc .header_right .hb:hover{opacity: 0.6;}
.pre-inc .header_right .hr_om a:hover{opacity: 0.6;}


@keyframes purun {
  0%   { transform:translate(0%, 0%); }
  10%  { transform:translate(4%,0%); }
  20%  { transform:translate(8%,0%); }
  40%  { transform:translate(-8%,0%); }
  60%  { transform:translate(4%,0%); }
  80% { transform:translate(0%, 0%); }
100% { transform:translate(0%, 0%); }
}
@keyframes purun_sp {
  0%   { transform:translate(0%, 0%); }
  10%  { transform:translate(0%,6%); }
  20%  { transform:translate(0%,12%); }
  40%  { transform:translate(0%,-12%); }
  60%  { transform:translate(0%,6%); }
  80% { transform:translate(0%, 0%); }
100% { transform:translate(0%, 0%); }
}

@media only screen and (min-width: 769px){
.pre-inc .header_right a .fukidashi{width: 8.3em;height: 3.2em;background: url("../img/request_f.svg") no-repeat center center/contain;position: absolute;left: -8.5em;margin: auto 0;top: 0;bottom: 0;animation: purun 2s linear 0s 1;animation-iteration-count: infinite;font-size: 20px;}
}

@media only screen and (min-width: 1920px) {
.pre-inc header .header_wrap{padding:0 20px;}
.pre-inc header .hb_menu{right: 25px !important;pointer-events: painted;}
}

@media only screen  and (max-width: 768px){
.pre-inc .header_right{right: 62px;}
.pre-inc .header_right .hr_om a{font-size: 12px;}
.pre-inc .header_right .hb{width: 140px;height: 60%;}
.pre-inc .header_right .hb i{line-height: 1.2;}
.pre-inc .header_right .hb_reservation{width: 67px;font-size: 12px;letter-spacing: 0;padding-left: 0;margin-left: 4px;}
.pre-inc .header_right .hb_request{width: 67px;font-size: 12px;margin-left: 2px;letter-spacing: 0;padding-left: 0;}
.pre-inc header .hb_menu{right: 12px!important;}
.pre-inc .header_right a .fukidashi{width: 7.8em;height: 2.5em;background: url("../img/request_f_sp.svg") no-repeat center center/contain;position: absolute;left: -1.3em;bottom: -2.2em;animation: purun_sp 2s linear 0s 1;animation-iteration-count: infinite;font-size: 14px!important;}
}

@media only screen and (max-width: 380px) {
.pre-inc header h1 img{width: 40vw;}
.pre-inc .header_right .hb_reservation{width: 16vw;font-size: 3vw;margin-left: 1vw;}
.pre-inc .header_right .hb_request{width: 16vw;font-size: 3vw;}
}

/*ハンバーガーメニュー*/
.pre-inc header .hb_menu{position: absolute;top: 0;bottom: 0;margin: auto 0; width: 30px;height: 32px;right: 25px;z-index: 990;transition: all 0.3s;cursor: pointer;display: block;pointer-events: painted;}
.pre-inc header .hb_menu span{display: block;height: 1px;width: 30px;position: absolute;top:0;bottom: 0;left: 0;margin: auto 0;}
.pre-inc header .hb_menu span i{display: block;height: 1px;width: 100%;transition: all 0.3s;background: #333;border-radius: 3px;}
.pre-inc header .hb_menu span::before,
.pre-inc header .hb_menu span::after{content:"";position: absolute;left: 0; display: block;height: 1px;width: 100%;background: #333;transition: all 0.3s;border-radius: 3px;}
.pre-inc header .hb_menu span::before{top:-10px;}
.pre-inc header .hb_menu span::after{bottom:-10px;width: 100%;}

.pre-inc.h_active header .hb_menu span::before{transform:rotate(-135deg);top:0;right:0;background: #333;}
.pre-inc.h_active header .hb_menu span::after{transform:rotate(135deg);bottom:0;right:0;width: 100%;background: #000;}
.pre-inc.h_active header .hb_menu span i{display: none;}

/* メニュー */
.pre-inc .menu_wrap{width: 400px;font-size: 20px;opacity: 0;pointer-events: none;background: rgba(255,255,255,0.95);position: fixed;right: 0;transition: 0.3s all;z-index: 11000;overflow-y: auto;box-shadow: 0 0 5px rgba(0,0,0,0.3);padding: 0 1em 0.5em;height: calc(100% - 85px);top: 85px;font-family: YakuHanJP, "Noto Sans JP", sans-serif;}
.pre-inc.h_active .menu_wrap{pointer-events: painted;opacity: 1;}
.pre-inc .menu_wrap .menu{display: flex;flex-wrap: wrap;}
.pre-inc .menu_wrap .menu > *{width: 100%;display: flex;align-items: flex-end; border-bottom: solid 1px #ccc;padding: 0.7em 0.5em;}
.pre-inc .menu_wrap .menu > *::after{content: "";width: 0.3em;height: 0.3em;display: block;border-right: 2px solid #555;border-top: 2px solid #555;transform: rotate(45deg);position: absolute;right: 1em;top: 0;bottom: 0;margin: auto 0;}
.pre-inc .menu_wrap .menu > * > *{line-height: 1.3;transition: 0.3s all;}
.pre-inc .menu_wrap .menu > * > i{font-size: 0.7em;color: #000;}
.pre-inc .menu_wrap .menu > * > i.link::after{content: "";display: block;height: 0.9em;width: 2.2em;position: absolute;right: -2.7em;top: 0.3em;background: url(../img/menu_link.svg) no-repeat center center / contain;}
.pre-inc .menu_wrap .menu > * > span{font-size: 0.6em;color: #333;margin-left: 1em;}
.pre-inc .menu a[href*="request_pl2"]{background: #7b680b;justify-content: center;margin-top: 0.5em;padding: 0.4em 0.1em;border-radius: 7px;}
.pre-inc .menu a[href*="request_pl2"]::after{border-right-color: #fff;border-top-color: #fff;}
.pre-inc .menu a[href*="request_pl2"] i{color: #fff;text-align: center;}
.pre-inc .menu a[href*="request_pl2"] i::after{content: "資料請求いただいた方に、最新情報をお届けします。";display: block;font-size: 0.8em;margin-top: 0.2em;}
.pre-inc .menu a[href*="request_pl2"] span{display: none;}

.pre-inc .menu a[href*="reservation_pl3"]{background: #b28184;justify-content: center;margin-top: 0.5em;padding: 0.4em 0.1em;border-bottom: none;border-radius: 7px;}
.pre-inc .menu a[href*="reservation_pl3"]::after{border-right-color: #fff;border-top-color: #fff;}
.pre-inc .menu a[href*="reservation_pl3"] i{color: #fff;text-align: center;}
.pre-inc .menu a[href*="reservation_pl3"] i::after{content: "スタイルギャラリーにて、ご案内いたします。";display: block;font-size: 0.8em;margin-top: 0.2em;}
.pre-inc .menu a[href*="reservation_pl3"] span{display: none;}

/* NEW */
.pre-inc .menu_wrap .menu a[href="family"]::before,
.pre-inc .menu_wrap .menu a[href="life-stage"]::before,
.pre-inc .menu_wrap .menu a[href="interview"]::before,
.pre-inc .menu_wrap .menu a[href="yodogawa_style"]::before
{content:"NEW";display:block;font-size: 0.45em;line-height:1;position: absolute;color: #750000;top: 0.5em;left: 0.5em;text-align: center;}

/* セレクトページ（フッターメニューも共通） */
#top.pre-inc .menu_wrap .menu a[href=""] > *,
#concept.pre-inc .menu_wrap .menu a[href="concept"] > *,
#access.pre-inc .menu_wrap .menu a[href="access"] > *,
#location.pre-inc .menu_wrap .menu a[href="location"] > *,
#life-style.pre-inc .menu_wrap .menu a[href="life-style"] > *,
#family.pre-inc .menu_wrap .menu a[href="family"] > *,
#design.pre-inc .menu_wrap .menu a[href="design"] > *,
#room_plan.pre-inc .menu_wrap .menu a[href="room_plan"] > *,[id^="plan"] .menu_wrap .menu a[href="/sp-mkn32/room_plan"] > *,
#equipment.pre-inc .menu_wrap .menu a[href="equipment"] > *,
#evaluation.pre-inc .menu_wrap .menu a[href="evaluation"] > *,
#life-stage.pre-inc .menu_wrap .menu a[href="life-stage"] > *,
#interview.pre-inc .menu_wrap .menu a[href="interview"] > *,
#yodogawa_style.pre-inc .menu_wrap .menu a[href="yodogawa_style"] > *,
#outline.pre-inc .menu_wrap .menu a[href="outline"] > *,
#map.pre-inc .menu_wrap .menu a[href="map"] > *
{color: #750000;pointer-events: none;}

@media only screen and (min-width: 769px){
.pre-inc .menu_wrap{transform: translateX(3%);}
.pre-inc.h_active .menu_wrap{transform: translateX(0%);}
.pre-inc header + .menu_wrap .menu > *:hover > *{opacity: 0.5;}
}



/*||||||||||||||||| スマホ版メニュー（全ページ共通） |||||||||||||||||*/
/* 固定メニュー */
@media only screen and (max-width: 768px) {
.pre-inc header{padding: 7px 12px;height: 55px;}
.pre-inc header .header_wrap{width: 100%;height: 100%;}
.pre-inc header h1 img{width: 150px;}
.pre-inc.h_active{overflow: hidden;}

.pre-inc .menu_wrap{width: 100%;font-size: 5.3vw;height: calc(100% - 110px);position: fixed;top: 55px;transform: translateY(-3%);}
.pre-inc .menu_wrap .menu{width: 100%;margin: 0 auto;}
.pre-inc.h_active .menu_wrap{transform: translateY(0%);}
}

@media only screen and (max-width: 380px) {
.pre-inc header h1 img{width: 40vw;}
}


/* NEW */
.pre-inc .menu_wrap .menu a[href="/sp-mkn32/family"]::before,
.pre-inc .menu_wrap .menu a[href="/sp-mkn32/interview"]::before,
.pre-inc .menu_wrap .menu a[href="/sp-mkn32/life-stage"]::before,
.pre-inc .menu_wrap .menu a[href="/sp-mkn32/yodogawa_style"]::before
{content:"NEW";display:block;font-size: 0.45em;line-height:1;position: absolute;color: #750000;top: 0.5em;left: 0.5em;text-align: center;}

/* セレクトページ（フッターメニューも共通） */
#top.pre-inc .menu_wrap .menu a[href="/sp-mkn32"] > *,
#concept.pre-inc .menu_wrap .menu a[href="/sp-mkn32/concept"] > *,
#access.pre-inc .menu_wrap .menu a[href="/sp-mkn32/access"] > *,
#location.pre-inc .menu_wrap .menu a[href="/sp-mkn32/location"] > *,
#life-style.pre-inc .menu_wrap .menu a[href="/sp-mkn32/life-style"] > *,
#family.pre-inc .menu_wrap .menu a[href="/sp-mkn32/family"] > *,
#design.pre-inc .menu_wrap .menu a[href="/sp-mkn32/design"] > *,
#room_plan.pre-inc .menu_wrap .menu a[href="/sp-mkn32/room_plan"] > *,[id^="plan"] .menu_wrap .menu a[href="/sp-mkn32/room_plan"] > *,
#equipment.pre-inc .menu_wrap .menu a[href="/sp-mkn32/equipment"] > *,
#evaluation.pre-inc .menu_wrap .menu a[href="/sp-mkn32/evaluation"] > *,
#life-stage.pre-inc .menu_wrap .menu a[href="/sp-mkn32/life-stage"] > *,
#interview.pre-inc .menu_wrap .menu a[href="/sp-mkn32/interview"] > *,
#yodogawa_style.pre-inc .menu_wrap .menu a[href="/sp-mkn32/yodogawa_style"] > *,
#outline.pre-inc .menu_wrap .menu a[href="/sp-mkn32/outline"] > *,
#map.pre-inc .menu_wrap .menu a[href="/sp-mkn32/map"] > *
{color: #750000;pointer-events: none;}

@media only screen and (min-width: 769px){
.pre-inc .menu_wrap{transform: translateX(3%);}
.pre-inc.h_active .menu_wrap{transform: translateX(0%);}
.pre-inc header + .menu_wrap .menu > *:hover > *{opacity: 0.5;}
}