@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;300;400;500;600;700;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=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Old+Mincho&display=swap");

html{--main_color: #4f444a;}
body{font-family: YakuHanMP, "Zen Old Mincho", serif;}
sup{vertical-align: 0.5em;font-size: 0.6em;}
sub{font-size: 0.6em;}
.goth{font-family: YakuHanJP, "Public Sans", "Noto Sans JP", sans-serif;}
.note{font-size: 0.65em;margin-top: 0.5em;}
p.copy{font-size: 0.8em;line-height: 1.7;}
.wow{animation-name: fadeInUp;}

.cap_into,.cap_out{font-size: 0.6em;}
.cap_into{color: #fff;position: absolute;right: 0.7em;bottom: 0.7em;line-height: 1.4;text-align: right;text-shadow: 0 0 0.5em rgba(0,0,0,0.9),0 0 0.5em rgba(0,0,0,0.9),0 0 0.5em rgba(0,0,0,0.9),0 0 0.5em rgba(0,0,0,0.9),0 0 0.5em rgba(0,0,0,0.9), 0 0 0.5em rgba(0,0,0,0.9),0 0 0.5em rgba(0,0,0,0.9);}
.cap_into.white{text-shadow: none;}
.cap_into.black{color: #000;}
.cap_into.black_sh{color: #000;text-shadow: 0 0 0.5em rgba(255,255,255,0.9),0 0 0.5em rgba(255,255, 55, 0.9),0 0 0.5em rgba(255,255,255,0.9),0 0 0.5em rgba(255,255,255,0.9),0 0 0.5em rgba(255,255,255,0.9),0 0 0.5em rgba(255,255,255,0.9);}
.cap_into.left{right: auto;left: 0.7em;text-align: left;}
.cap_out{margin-top: 0.5em;text-align: right;}
.cap_out.center{text-align: center;}

@media screen and (min-width: 769px){
body{font-size: 20px;line-height: 1.5;}
.sp,
[src*="_sp."]{display: none!important;}
.contents_wrap{max-width: 50em;margin-inline: auto;}
}
@media screen and (min-width: 769px) and (max-width: 1200px){
body{font-size: 1.7vw;}
}
@media screen and (max-width: 768px){
body{font-size: 4vw;}
.pc,
[src*="_pc."]{display: none !important;}
.contents_wrap{padding: 0 6vw;}
.note{font-size: 0.7em;margin-top: 0.5em;}
.cap_into,.cap_out{font-size: 0.7em;}
figure img{width: 100%;}
}

/*||||||||||||||||| ヘッダー＆メニュー |||||||||||||||||*/
/* ヘッダーベース */
header{position: fixed;width: 100%;top: 0;left: 0;z-index: 100000;padding: 10px 30px;background: rgba(255,255,255,0.9);height: 80px;}
.scroll_down header{box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.h_active header{box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
header .header_wrap{display: flex;justify-content: space-between;margin: 0 auto;align-items: center;height: 100%;}
header h1 img{width: 240px;}
header h1 a{pointer-events: painted;display: flex;align-items: center;}
header h1 a p{color: #000;font-size: 1.2em;margin-left: 1em;}
header h1 a p small{font-size: 0.75em;}
.header_right{display: flex;align-items: center;height: 100%;position: absolute;right: 85px;top: 0;}
.header_right a{width: 150px;height: 60%;display: flex;justify-content: center;align-items: center;color: #fff;letter-spacing: 0;font-size: 14px;margin-left: 7px;transition: 0.3s all;text-align: center;}
.header_right a.header_entry{background: linear-gradient(to right, #987942, #cca756);}

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

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

@media screen and (min-width: 769px) and (max-width: 1399px){
header{padding: 10px 15px;}
header .request_btn i{left: auto;right: -10px;}
}

@media only screen and (max-width: 768px){
header{height: 55px;padding: 5px 15px;}
header .header_wrap{width: 100%;height: 100%;}
header h1 img{width: 120px;}
header h1 a p{font-size: 0.65em;margin: 0 0 0.2em 0.7em;}
.header_right{right: 55px;}
.header_right a{width: 140px;line-height: 1.1;}
.header_right a.header_entry{width: 74px;font-size: 12px;margin-left: 2px;height: 70%;}
}

/* ハンバーガーボタン */
header .hb_menu{position: absolute;top: 0;bottom: 0;margin: auto 0;width: 30px;height: 32px;right: 10px;z-index: 990;transition: all 0.3s;cursor: pointer;display: block;pointer-events: painted;}
header .hb_menu span{display: block;height: 1px;width: 30px;position: absolute;top: 0;bottom: 0;left: 0;margin: auto 0;}
header .hb_menu span i{display: block;height: 1px;width: 100%;transition: all 0.3s;background: var(--main_color);border-radius: 3px;}
header .hb_menu span::before,
header .hb_menu span::after{content: "";position: absolute;left: 0;display: block;height: 1px;width: 100%;background: var(--main_color);transition: all 0.3s;border-radius: 3px;}
header .hb_menu span::before{top: -10px;}
header .hb_menu span::after{bottom: -10px;width: 100%;}
.h_active .hb_menu span::before{transform: rotate(-135deg);top: 0;right: 0;background: var(--main_color);}
.h_active .hb_menu span::after{transform: rotate(135deg);bottom: 0;right: 0;width: 100%;background: var(--main_color);}
.h_active .hb_menu span i{display: none;}

@media only screen and (max-width: 768px){
header .hb_menu{top: 0;right: 5px;}
}

/* メニュー */
.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% - 80px);top: 80px;}
.h_active .menu_wrap{pointer-events: painted;opacity: 1;}
.menu_wrap .menu{display: flex;flex-wrap: wrap;}
.menu_wrap .menu > *{width: 100%;display: flex;align-items: flex-end;border-bottom: solid 1px #ccc;padding: 0.7em 0.5em;}
.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;}
.menu_wrap .menu > * > *{line-height: 1.3;transition: 0.3s all;}
.menu_wrap .menu > * > i{font-size: 0.7em;color: #000;}
.menu_wrap .menu > * > span{font-size: 0.6em;color: #333;margin-left: 1em;}
.menu a.menu_entry{background: var(--main_color);justify-content: center;align-items: center;margin-top: 0.5em;padding: 0.4em 0.1em;border-bottom: none;height: 2.5em;}
.menu a.menu_entry::after{border-right-color: #fff;border-top-color: #fff;}
.menu a.menu_entry i{color: #fff;text-align: center;}
.menu a.menu_entry i::after{content: "間取りや、最新情報をお届けします。";display: block;font-size: 0.8em;margin-top: 0.2em;}
.menu a.menu_entry span{display: none;}
.menu a.menu_reserve{background: linear-gradient(to right, #e10011, #910001);justify-content: center;align-items: center;margin-top: 0.5em;padding: 0.4em 0.1em;height: 2.5em;}
.menu a.menu_reserve::after{border-right-color: #fff;border-top-color: #fff;}
.menu a.menu_reserve i{color: #fff;text-align: center;}
.menu a.menu_reserve i::after{content: "事前ご予約で、スムーズにご案内。";display: block;font-size: 0.8em;margin-top: 0.2em;}

@media only screen and (min-width: 769px){
.menu_wrap{transform: translateX(3%);}
.h_active .menu_wrap{transform: translateX(0%);}
}

@media screen and (min-width: 769px){
header + .menu_wrap .menu > *:hover > *{opacity: 0.3;}
}

@media only screen and (max-width: 768px){
.menu_wrap{width: 100%;font-size: 5.3vw;height: calc(100% - 55px);position: fixed;top: 55px;transform: translateY(-3%);}
.menu_wrap .menu{width: 100%;margin: 0 auto;}
.h_active .menu_wrap{transform: translateY(0%);}
}

/* 未公開ページ（フッターメニューも共通） */
.menu a[href$="evaluation"],
.menu a[href$="design/"]{pointer-events: none;}
.menu a[href$="evaluation"] *,
.menu a[href$="design/"] *{opacity: 0.2;}

/* NEW */
.menu_wrap .menu a[href$="area-guide"]::before,
.menu_wrap .menu a[href$="interview"]::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 .menu_wrap .menu a[href$="./"] > *,
#brand .menu_wrap .menu a[href$="brand/"] > *,
#position .menu_wrap .menu a[href$="position/"] > *,
#akashi_life .menu_wrap .menu a[href$="akashi_life/"] > *,
#design .menu_wrap .menu a[href$="design/"] > *,
#map .menu_wrap .menu a[href$="map/"] > *,
#outline .menu_wrap .menu a[href$="outline/"] > *,
.menu_wrap .menu a.active > *
{color: #750000;pointer-events: none;}

/* 物件エントリー */
.entry_area{padding: 2em 0 2.5em;}
.entry_area p{text-align: center;font-size: 2em;letter-spacing: 0.08em;}
.entry_area p big{font-size: 1.15em;}
.entry_area p big small{font-size: 0.8em;}
.entry_area p span{font-size: 0.8em;color:#b20000;}
.entry_btn{width: 18em;height: 4em;display: flex;justify-content: center;align-items: center;margin: 1.5em auto 0;background: linear-gradient(168deg,#4e4449 50%,#60575c 50%);overflow: hidden;}
.entry_btn::after{content: "";display: block;width: calc(100% - 0.6em);height: calc(100% - 0.6em);position: absolute;inset: 0;border: 1px solid #fff;margin: auto;pointer-events: none;}
.entry_btn::before{content: "Request";font-family: "EB Garamond", serif;font-size: 2.5em;font-style: italic;position: absolute;right: 0.7em;top: 0.3em;color: rgba(255,255,255,0.1);line-height: 1;letter-spacing: 0.1em;transition: 0.3s all;}
.entry_btn span{font-size: 0.9em;color: #fff;letter-spacing: 0.1em;display: flex;justify-content: center;align-items: center;width: calc(100% - 2px);height: calc(100% - 2px);transition: 0.3s all;}

@media only screen and (min-width: 769px){
.entry_btn:hover span{background: rgba(255,255,255,0.8);color: var(--main_color);}
.entry_btn:hover::before{color: rgba(0,0,0,0.8);}
}

@media only screen and (max-width: 768px){
.entry_area p{font-size: 1.45em;}
}

/* スマホ用スライド画像 */
.img_list{display: flex;justify-content: space-between;margin-top: 3em;}
.img_list figure img{width: 100%;}

@media only screen and (min-width: 769px){
.img_list figure:nth-of-type(2){animation-delay: 0.2s;}
.img_list figure:nth-of-type(3){animation-delay: 0.4s;}
}

@media only screen and (max-width: 768px){
.sp_slide{display: block!important;margin: 2em -6vw 0;width: 100vw!important;}
.sp_slide .slick-track > *{margin: 0 1em;width: 75vw!important;animation-name: fadeIn;}
.sp_slide .slick-disabled{opacity: 0;transition: 0.3s;pointer-events:none;}
.sp_slide .slick-arrow{width: 2.5em;height: 4.1em;position: absolute;top: 20vw;font-size: 1.5vw;z-index: 1;}
.sp_slide .slide_prev{left: 7vw;}
.sp_slide .slide_next{right: 7vw;}
.sp_slide .slick-dots{bottom: -6vw;}
.sp_slide .slick-dots li{width: 2em;height: 0.4em;background: #bab8ba;border: 1px solid #b8964a;}
.sp_slide .slick-dots li.slick-active{background: #896a23;}
.sp_slide .slick-dots li button{width: 100%;height: 100%;}
.sp_slide .slick-dots li button::before{display: none;}
}

/* 明石エリアガイドバナー */
.akashi_area_guide{margin-top: 2.25em;display: block;}
.akashi_area_guide[href=""]{pointer-events: none;}
.akashi_area_guide img{transition: 0.3s all;}

@media only screen and (min-width: 769px){
.akashi_area_guide:hover img{opacity: 0.6;}
}

@media only screen and (max-width: 768px){
.akashi_area_guide{margin-top: 4em;}
}


/* エントリー後の流れ */
#flow{margin-top: 1.5em;}
.flow_tit{width: 56.5em;margin-inline: auto;animation-name: fadeInLeft;}
.flow_tit span{font-size: 1.8em;letter-spacing: 0.05em;}
.flow_item{background: url("../img/flow_bk.webp") no-repeat right bottom/cover;margin-top: 1em;}
.flow_item dl{width: 56.5em;margin-inline: auto;display: flex;}
.flow_item dl > *{animation-name: fadeInLeft;animation-duration: 0.7s;}
.flow_item dl dt{padding: 3em 0;flex: 1;}
.flow_item .entry_btn{width: 15em;height: 3em;margin: 1em 0 0 0;}
.flow_step_tit{font-size: 1.2em;letter-spacing: 0.05em;}
.flow_step_tit small{font-size: 0.67em;display: block;margin-bottom: 0.3em;}
.flow_step_tit + p{font-size: 0.7em;line-height: 1.8;margin-top: 2em;}
.flow_item dl dd{width: 4.5em;overflow: hidden;}
.flow_item dl dd::before,
.flow_item dl dd::after{content: "";position: absolute;top: calc(50% - 0.075em);right: 20%;width: 10em;height: 0.15em;background-color: #ccc;transform-origin: calc(100% - 0.075em) 50%;}
.flow_item dl dd::before{transform: rotate(68deg);}
.flow_item dl dd::after{transform: rotate(-68deg);}

@media only screen and (min-width: 769px){
.flow_item dl > *:nth-child(2){animation-delay: 0.1s;}
.flow_item dl > *:nth-child(3){animation-delay: 0.2s;}
.flow_item dl > *:nth-child(4){animation-delay: 0.3s;}
.flow_item dl > *:nth-child(5){animation-delay: 0.4s;}
}

@media only screen and (max-width: 768px){
#flow{margin-top: 0.5em;}
.flow_tit{width: 100%;padding-left: 3vw;animation-name: fadeInDown;}
.flow_tit span{font-size: 1.3em;}
.flow_item{margin-top: 1em;}
.flow_item dl{width: 100%;flex-wrap: wrap;padding: 1.5em}
.flow_item dl > *{animation-name: fadeInDown;}
.flow_item dl dt{padding: 0;flex: auto;width: 100%;}
.flow_step_tit{font-size: 1.0em;}
.flow_step_tit + p{font-size: 0.75em;margin-top: 1em;}
.flow_item dl dd{width: 100%;height: 3em;}
.flow_item dl dd::before,
.flow_item dl dd::after{top: auto;bottom: 10%;right: auto;left: calc(50% - 0.075em);width: 0.15em;height: 5em;transform-origin: 50% calc(100% - 0.075em);}
.flow_item dl dd::before{transform: rotate(75deg);}
.flow_item dl dd::after{transform: rotate(-75deg);}
}

/*||||||||||||||||| 注釈 |||||||||||||||||*/
.foot_note{background: #f7f7f7;padding: 4em 0;}
.foot_note p{text-align: justify;}

@media only screen and (max-width: 768px){
.foot_note{padding: 2em 0;}
}

/*||||||||||||||||| フッター |||||||||||||||||*/
footer{padding-top: 3.5em;}
footer .contact{text-align: center;}
footer .contact > p{font-size: 0.65em;text-align: center;}
footer .contact .tel{font-size: 3em;letter-spacing: 0.05em;display: inline-block;line-height: 1;}
footer .contact .tel i{vertical-align: 0.1em;}
footer .contact .tel::before{content: "";width: 1.44em;height: 0.8em;background: url("../img/freedial.svg") no-repeat center center/contain;display: inline-block;vertical-align: -0.05em;margin-right: 0.2em;}
footer .contact .tel small{font-size: 0.22em;display: block;text-align: right;margin-top: 0.7em;letter-spacing: 0.03em;}
footer .owner_logo{display: flex;justify-content: center;flex-wrap: wrap;gap: 1em 3.5em;margin-top: 2.5em;}
footer .owner_logo a{display: flex;align-items: center;gap: 0 0.5em;transition: 0.3s all;}
footer .owner_logo a img{width: 100%;}
footer .owner_logo a p{font-size: 0.65em;color: #000;}
footer .owner_logo a.sanyo_logo figure{width: 14em;}
footer .owner_logo a.aclass_logo figure{width: 15.3em;}
footer .copyright{background: var(--main_color);color: #fff;font-size: 0.7em;padding: 0.5em;text-align: center;margin-top: 5em;font-family: "EB Garamond", serif;}

@media only screen and (min-width: 769px){
footer .owner_logo a:hover{opacity: 0.6;}
}

@media only screen and (max-width: 768px){
footer{padding-top: 2.5em;}
footer .contact > p{font-size: 0.7em;}
footer .contact .tel{font-size: 2.5em;}
footer .contact .tel small{font-size: 0.28em;}
footer .owner_logo{font-size: 0.9em;}
footer .copyright{margin-top: 3.5em;}
}

/* トップへ戻るボタン */
a#page_top{background: var(--main_color);width: 30px;height: 30px;position: fixed;right: 30px;bottom: 50px;display: none;z-index: 1000;}
a#page_top::before{content: "";width: 10px;height: 10px;display: block;position: absolute;margin: auto;top: 25%;bottom: 0;left: 0;right: 0;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(-45deg);}

@media only screen and (max-width: 768px){
a#page_top{right: 10px;bottom: 25px;}
}

/*||||||||||||||||| 下層ページ共通 |||||||||||||||||*/
article{margin-top: 80px;}
.layer_main{overflow: hidden;}
.layer_main figure::after{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(120deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5))}
.layer_main figure img{object-fit: cover;width: 100%;height: 100%;}
.layer_main_tit{font-size: 8.3vw;color: #fff;position: absolute;right: 0.3em;bottom: -0.32em;}
.layer_main_tit i:first-child{font-size: 1.5em;line-height: 1;margin-right: -0.05em;}
.layer_main_tit i{display: inline-block;opacity: 0;}
.layer_main_tit i.text_ani{animation: 1s fadeInRight 0s forwards;}
.layer_main_lead{font-size: 1.875vw;position: absolute;left: 1.2em;top: 1.2em;color: #fff;text-shadow: 0 0 0.2em #000,0 0 0.2em #000,0 0 0.2em #000,0 0 0.2em #000;opacity: 0;animation: 3s fadeIn 0.5s forwards;}

.layer #outro{padding-bottom: 0;}
.layer section{padding: 3.5em 0;}

/* 濃いアルファベットタイトル */
.contents_title{font-size: 2.4em;text-align: center;line-height: 1;color: #584d10;font-family: "Roboto", sans-serif;font-weight: 100;}
/* 薄いアルファベットタイトル */
.item_title{text-align: center;color: rgba(88,77,16,0.2);font-family: "Roboto", sans-serif;line-height: 1;font-size: 5em;font-weight: 100;letter-spacing: -0.05em;}
/* 薄いアルファベットタイトルに重なるタイトル */
.item_sub_title{font-size: 1.4em;text-align: center;letter-spacing: 0.1em;margin-top: 2.5em;}
.item_sub_title small{font-size: 0.65em;}
.item_title + .item_sub_title{margin-top: -1.5em;}

.border_frame{background: #efede2;padding: 1.25em;display: flex;justify-content: space-between;margin-top: 2.5em;}
.border_frame::after{content: "";display: block;width: calc(100% - 0.5em);height: calc(100% - 0.5em);position: absolute;left: 0.25em;top: 0.25em;pointer-events: none;border: 1px solid #a58734;}

@media only screen and (max-width: 768px){
article{margin-top: 55px;}
.layer_main figure{height: 80vw;}
.layer_main figure::after{background: linear-gradient(120deg,rgba(0,0,0,0) 20%,rgba(0,0,0,0.5))}
.layer_main_tit{font-size: 13vw;}
.layer_main_lead{font-size: 5vw;left: 1em;top: 1em;}

.border_frame{flex-wrap: wrap;}
}

/* キャプション類 */
.cap_w,
.cap_wb,
.cap_b,
.cap_bw,
.cap_l {
  font-size: 0.6em;
  position: absolute;
  right: 0.7em;
  bottom: 0.7em;
  z-index: 1;
  line-height: 1.4;
  text-align: right;
}
.cap_w {
  color: #fff;
}
.cap_wb {
  color: #fff;
  text-shadow: 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7);
  text-align: right;
}
.cap_b {
  color: #000;
}
.cap_bw {
  text-shadow: 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9);
}
.cap_o {
  font-size: 0.6em;
  margin-top: 7px;
  text-align: right;
  position: static;
}
.cap_ol {
  font-size: 0.6em;
  margin-top: 7px;
  position: static;
}
.cap_oc {
  font-size: 0.6em;
  margin-top: 7px;
  position: static;
  text-align: center;
}
.cap_l {
  right: auto;
  left: 1em;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .wrap1024 {
    max-width: 100%;
    padding: 0 4vw;
  }
  .wrap1280 {
    max-width: 100%;
    padding: 0 4vw;
  }
  .note {
    font-size: 2.8vw;
  }
  {
    /* キャプション類 */
  }
  .cap_w,
  .cap_wb,
  .cap_b,
  .cap_bw,
  .cap_l,
  .cap_o,
  .cap_ol,
  .cap_oc,
  .cap_l {
    font-size: 2.8vw;
  }
}