/*羽曳が丘5丁目*/
html {
color: #000 !important;
}
.link {
width: 100%;
display: block;
padding: 5px 0;
}
.link._01 {
color: #f8b551;
}
.link._02 {
color: #44bee7;
}
.link:hover {
opacity: .7;
}
p {
font-feature-settings: "palt";
}
.text_white {
color: #fff;
}
/*----------------------------------------
フレーム
----------------------------------------*/
.main_frame{
width:100%;
max-width: 1350px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
}
.main_frame_s{
width:100%;
max-width: 1150px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
}
.frame1200 {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.frame1170 {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
.inner_frame{
width:100%;
max-width: 1090px;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
}
.inner_frame_s{
width:100%;
max-width: 840px;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
}
.inner_bg_white {
background: #fff;
padding-right: 2.5%;
padding-left: 2.5%;
}
.box_r47,
.box_l47 {
width: 47%;
box-sizing: border-box;
}
.box_r47 {
float: right;
}
.box_l47 {
float: left;
}
@media print, screen and (max-width: 1349px) {
.frame{
width:auto;
padding-right: 4.5%;
padding-left: 4.5%;
}
}
@media screen and (max-width: 1240px) {
.frame1200 {
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width: 1210px) {
.frame1170 {
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width: 1040px) {
.inner_frame {
padding-left: 20px;
padding-right: 20px;
}
}
@media print, screen and (min-width: 769px) {
.main_frame_s{
padding-right: 1.72%;
padding-left: 1.72%;
}
.inner_frame_s{
padding-right: 1.72%;
padding-left: 1.72%;
}
}/*END*/
@media screen and (max-width: 768px){
.inner_frame_s.frame{
width:auto;
padding-right: 4.5%;
padding-left: 4.5%;
}
.main_frame_s{
width:auto;
padding-right: 4.5%;
padding-left: 4.5%;
}
.frame1200,.frame1170,.inner_frame {
padding-right: 4.5%;
padding-left: 4.5%;
}
}/*END*/
@media screen and (max-width: 599px){
.box_r47{
float: none;
width: 100%;
box-sizing: border-box;
}
.box_l47{
float: none;
width: 100%;
box-sizing: border-box;
}
}
@media screen and (max-width: 479px){
.inner_bg_white{
width: 96%;
margin:0 auto;
}
}/*END*/
.box_l{
float: left;
width: 48.11%;
}
.box_r{
float: right;
width: 48.11%;
}
@media screen and (max-width: 599px){
.box_l{
float: none;
width: 100%;
}
.box_r{
float: none;
width: 100%;
}
}
@media screen and (min-width: 600px) {
.frame1170 .box_l {
width: 45.30%;
}
.frame1170 .box_r {
width: 48.72%;
}
}
/*----------------------------------------
mv
----------------------------------------*/
.obi {
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
padding: 25px 3%;
}
.obi,
.obi_frame {
background: #747474;
}
.obi ul {
display: flex;
justify-content: center;
align-items: center;
gap: 2em;
}
.obi li {
padding-left: 16px;
padding-right: 16px;
}
.obi_img {
display: block;
margin: 0 auto;
}
.obi_img._01 {
max-width: 438px;
width: 80%;
}
.obi_img._02 {
max-width: 566px;
width: 80%;
}
.obi_img._03 {
max-width: 626px;
width: 80%;
}
.obi_line {
display: block;
}
@media screen and (max-width: 479px) {
.obi {
padding-top: 30px;
padding-bottom: 30px;
}
.obi ul {
flex-direction: column;
gap: 1em;
}
.obi li {
width: 70%;
margin: 0 auto;
padding: 0;
}
.obi_line {
display: none;
}
.obi_img._02,
.obi_img._03 {
width: 100%;
}
}
/*---------------------------END---------------------------*/
/*----------------------------------------
見出し
----------------------------------------*/
.ttl {
max-width: 510px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.max500 {
max-width: 500px;
}
.max510 {
max-width: 510px;
}
.max450 {
max-width: 450px;
}
.p_lr70 {
padding-left: clamp(10px, 6.36%, 70px);
padding-right: clamp(10px, 6.36%, 70px);
}
.p_lr30 {
padding-left: clamp(10px, 2.7%, 70px);
padding-right: clamp(10px, 2.7%, 70px);
}
@media screen and (max-width: 599px) {
.sp_p_lr0 {
padding-left: 0;
padding-right: 0;
}
.sp_w_90 {
width: 90%;
}
.sp_w_80 {
width: 80%;
}
.sp_w_50 {
width: 50%;
}
}
@media screen and (min-width: 600px) {
.text_center {
text-align: center;
}
}
.p_ttl {
padding-top: 80px !important;
}
@media screen and (max-width: 2300px) {
.p_ttl {
padding-top: 60px !important;
}
}
@media screen and (max-width: 2000px) {
.p_ttl {
padding-top: 45px !important;
}
}
@media screen and (max-width: 1800px) {
.p_ttl {
padding-top: 30px !important;
}
}
@media screen and (max-width: 1600px) {
.p_ttl {
padding-top: 10px !important;
}
}
@media screen and (max-width: 1350px) {
.p_ttl {
padding-top: 0 !important;
}
}
@media screen and (max-width: 780px){
.ttl{
max-width: 320px;
}
}
@media screen and (max-width: 860px){
.m_ttl{
max-width: 340px;
}
}
@media screen and (max-width: 760px){
.m_ttl{
max-width: 320px;
}
}
@media screen and (max-width: 680px){
.m_ttl{
max-width: 300px;
}
}
@media screen and (max-width: 600px){
.m_ttl{
max-width: 270px;
}
}
@media screen and (max-width: 500px){
.m_ttl{
max-width: 260px;
}
}
@media screen and (max-width: 480px){
.m_ttl{
max-width: 250px;
}
}
@media screen and (max-width: 430px){
.m_ttl{
max-width: 235px;
}
}
@media screen and (max-width: 380px){
.m_ttl{
max-width: 210px;
}
}
.rela{
position: relative;
}
.ttl1{
display: block;
width: calc((617/800)*100%);
position: absolute;
top: 2.6%;
left: 50%;
transform: translateX(-50%);
}
/*----------------------------------------
bg
----------------------------------------*/
.bg_color01 {
background: #f2f9e4;
}
.bg_color02 {
background: #dfe7ea;
}
.bk_white {
background: #fff;
}
.bg_orange01 {
background: #edb67c;
}
.bg_orange02 {
background: #fee3c5;
}
.bg_check {
background: #fff;
background-image: repeating-linear-gradient(
0deg,
#f2f2f2 0px 1px,
transparent 1px 15px
),
repeating-linear-gradient(
90deg,
#f2f2f2 0px 1px,
transparent 1px 15px
);
}
/*----------------------------------------
concept
----------------------------------------*/
/*----------------------------------------
区画図
----------------------------------------*/
/*----------------------------------------
参考間取り図
----------------------------------------*/
/*----------------------------------------
仕様
----------------------------------------*/
/*----------------------------------------
周辺環境
----------------------------------------*/
.location_frame table {
line-height: 1.8;
font-size: 1.4rem;
width: 95%;
margin: 0 auto;
}
.location_frame th,
.location_frame td {
border-bottom: 1px solid #838383;
text-align: left;
font-weight: 500;
font-feature-settings: "palt";
padding: 10px;
}
.location_frame th {
text-align: left;
}
.location_frame td {
text-align: right;
}
.location_frame h3 {
height: 25px;
}
.location_gap{
column-gap: 10% !important;
}
@media screen and (max-width: 768px) {
.location_frame th {
width: 55%;
}
} /*END*/
@media screen and (max-width: 479px) {
.location_frame table {
font-size: 1.2rem;
}
.location_frame th {
padding-left: 0;
}
.location_frame td {
padding-right: 0;
}
} /*END*/
/*----------------------------------------
アクセス
----------------------------------------*/
/*----------------------------------------
物件概要テーブル
----------------------------------------*/
.tb_style_outline {
border-top: 1px solid #dcdcdc;
background: #d7e3e8;
width: 100%;
}
table.tb_style_outline {
word-break: break-all;
}
.tb_style_outline th,
.tb_style_outline td {
vertical-align: top;
line-height: 1.6;
text-align: left;
font-weight: normal;
color: #000;
overflow-wrap: break-word;
padding: 10px 15px;
}
.tb_style_outline th {
background: #e6e6e6;
border-bottom: 1px solid #dcdcdc;
font-weight: bold;
box-sizing: border-box;
}
.tb_style_outline td {
background: #fff;
border-bottom: 1px solid #dcdcdc;
color: #000;
padding-left: 15px;
}
.tb_style_outline .td_wide th {
width: 40%;
}
@media print, screen and (min-width: 769px) {
.tb_style_outline th {
width: 30%;
max-width: 155px;
}
} /*END*/
@media screen and (max-width: 768px) {
table.tb_style_outline {
border-spacing: 0 0;
}
.tb_style_outline th,
.tb_style_outline td {
/* border: none;
display: block; スマホテーブル幅いっぱい*/
font-size: 1.4rem;
}
.tb_style_outline th,
.tb_style_outline td {
padding: 8px 5px 8px 8px;
}
.th2 th.tb_bg_brown {
background: none;
font-weight: bold;
}
.tb_style_outline th {
/*width:100%; スマホテーブル幅いっぱい*/
width: 34%;
}
} /*END*/
@media screen and (max-width: 479px) {
.border_t0 {
border-top: none;
}
} /*END*/
@media screen and (min-width: 600px) {
.point_copy {
margin-left: -8%;
}
.location_point_copy {
margin-left: -6%;
}
}
/* ----------- 背景設定 ----------- */
/* コンセプト */
.bg01 {
background: #fff;
background-image: url(../images/realestate/habikigaoka5_02/concept_bg_top.png);
background-size: 100% auto;
background-repeat: no-repeat;
box-sizing: border-box;
}
/* 区画図 */
.bg02 {
background: #fff;
}
/* 間取りプラン */
.bg03 {
background: #262626;
background-image: url(../images/realestate/habikigaoka5_02/plan_bg_top.png);
background-size: 100% auto;
background-repeat: no-repeat;
box-sizing: border-box;
}
/* 設備仕様 */
.bg04 {
background: #fff;
background-image: url(../images/realestate/habikigaoka5_02/specification_bg_top.png);
background-size: 100% auto;
background-repeat: no-repeat;
box-sizing: border-box;
}
/* 周辺環境 */
.bg05 {
background: #e6e6e6;
background-image: url(../images/realestate/habikigaoka5_02/location_bg_top.png);
background-size: 100% auto;
background-repeat: no-repeat;
box-sizing: border-box;
}
/* アクセス */
.bg06 {
background: #fff;
}
/* 物件概要 */
.bg07 {
background: #262626;
background-image: url(../images/realestate/habikigaoka5_02/outline_bg_top.png);
background-size: 100% auto;
background-repeat: no-repeat;
box-sizing: border-box;
}
@media screen and (max-width: 1199px) {
.bg01,
.bg02,
.bg03,
.bg04,
.bg05,
.bg06,
.bg07 {
background-size: 125%;
}
}
@media screen and (max-width: 899px) {
.bg01,
.bg02,
.bg03,
.bg04,
.bg05,
.bg06,
.bg07 {
background-size: 150%;
}
}
@media screen and (max-width: 599px) {
.bg01,
.bg02,
.bg03,
.bg04,
.bg05,
.bg06,
.bg07 {
background-size: 200%;
}
}
@media screen and (max-width: 1040px) {
.bg03{
margin-top: 3em;
}
}
.plan_img_box {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 2%;
row-gap: 15px;
max-width: 865px;
margin-inline: auto;
}
.land_plan_deco01,
.land_plan_deco02,
.plan_deco01,
.location_deco01,
.location_deco02{
position: absolute;
}
.land_plan_deco01 {
top: 3%;
right: 0;
max-width: 266px;
width: 19.7037%;
}
.land_plan_deco02 {
left: 0;
bottom: 3%;
max-width: 117px;
width: 8.6666%;
}
.plan_deco01 {
right: 7%;
top: -60%;
max-width: 300px;
width: 19.326%;
}
.location_deco01 {
top: 3.5%;
left: 0;
max-width: 241px;
width: 17.851%;
}
.location_deco02 {
bottom: 3%;
right: 0;
max-width: 117px;
width: 8.6666%;
}
@media screen and (max-width: 820px) {
.plan_deco01 {
right: 0%;
top: -80%;
}
.plan_img_box {
display: block;
}
.plan_img_box div {
margin-bottom: 15px;
}
}
.grid_02,
.grid_03,
.grid_04 {
display: grid;
row-gap: 30px;
column-gap: 3.5%;
}
.grid_02.al_center,
.grid_03.al_center,
.grid_04.al_center {
align-items: center;
}
.grid_02 {
grid-template-columns: repeat(2, 1fr);
}
.grid_03 {
grid-template-columns: repeat(3, 1fr);
}
.grid_04 {
grid-template-columns: repeat(4, 1fr);
}
.al_center {
align-items: center;
}
@media screen and (max-width: 599px) {
.grid_02 {
grid-template-columns: repeat(1, 1fr);
}
.grid_03 {
grid-template-columns: repeat(1, 1fr);
}
.grid_04 {
grid-template-columns: repeat(2, 1fr);
}
}
/*----------------------------------------
tuika
----------------------------------------*/
.max1160 {
max-width: 1160px;
}
.concept_ttl02{
display: block;
margin: 0 auto;
}
.flexbox{
display: flex;
justify-content: center;
gap: 3em;
}
.location_ttl01 img{
width: 60%;
}
.location_ttl02 img{
width: 55%;
}
.outline_ttl img{
width: 70%;
}
.padding {
padding: 5em;
}
@media screen and (max-width: 599px) {
.flexbox{
flex-direction: column;
}
}
@media screen and (max-width: 820px) {
.padding{
padding: 2em 1em 1em;
}
.outline_ttl img{
width: 90%;
}
.box_r .outline_ttl{
margin-top: 2em;
}
}
.access_rosen {
max-width: 1000px;
width: 100%;
}
.access_copy {
max-width: 440px;
width: 100%;
}
.concept_copy01 {
max-width: 440px;
width: 100%;
}
.concept_copy02 {
display: block;
max-width: 350px;
width: 100%;
margin: 0 auto;
}
.specification_img01 {
max-width: 1004px;
width: 100%;
}
.specification_img02 {
max-width: 1000px;
width: 100%;
}
.specification_copy01 {
max-width: 880px;
width: 88%;
}
.specification_copy02 {
max-width: 1020px;
width: 100%;
}
.plan1_ttl {
max-width: 664px;
width: 100%;
}
.concept_img {
max-width: 450px;
width: 50%;
}
@media screen and (max-width: 599px){
.concept_img {
display: block;
width: 100%;
margin: 0 auto;
}
.concept_copy02 {
width: 80%;
}
}