@charset "UTF-8";
/* ========================================================================

  /csr/css/example.css

======================================================================== */
/************************************************************************
  header
************************************************************************/
body#example header::before { padding-top:calc(110/1440*100%); width:calc(577/1440*100%); background-image:url('../images/example/main_image_text.svg'); top:calc(310/810*100%); bottom:auto; left:calc(170/1440*100%); }
body#example header::after { background-image:url('../images/example/main_image.jpg'); }

body#two-family-house header::before { padding-top:calc(110/1440*100%); width:calc(658/1440*100%); background-image:url('../images/example/two_family_house/main_image_text.svg'); top:calc(310/810*100%); bottom:auto; left:calc(170/1440*100%); }
body#two-family-house header::after { background-image:url('../images/example/two_family_house/main_image.jpg'); }

body#second-hand-housing header::before { padding-top:calc(110/1440*100%); width:calc(574/1440*100%); background-image:url('../images/example/second_hand_housing/main_image_text.svg'); top:calc(310/810*100%); bottom:auto; left:calc(170/1440*100%); }
body#second-hand-housing header::after { background-image:url('../images/example/second_hand_housing/main_image.jpg'); }

body#apartment header::before { padding-top:calc(110/1440*100%); width:calc(505/1440*100%); background-image:url('../images/example/apartment/main_image_text.svg'); top:calc(310/810*100%); bottom:auto; left:calc(170/1440*100%); }
body#apartment header::after { background-image:url('../images/example/apartment/main_image.jpg'); }

body#reduction header::before { padding-top:calc(110/1440*100%); width:calc(623/1440*100%); background-image:url('../images/example/reduction/main_image_text.svg'); top:calc(310/810*100%); bottom:auto; left:calc(170/1440*100%); }
body#reduction header::after { background-image:url('../images/example/reduction/main_image.jpg'); }

body#old header::before { padding-top:calc(110/1440*100%); width:calc(832/1440*100%); background-image:url('../images/example/old/main_image_text.svg'); top:calc(310/810*100%); bottom:auto; left:calc(170/1440*100%); }
body#old header::after { background-image:url('../images/example/old/main_image.jpg'); }

/* ============ tablet ============ */
@media(max-width:768px){
body.example header::before { padding-top:0 !important; top:auto !important; bottom:calc(50/1024*100vh) !important; left:calc(40/768*100vw) !important; }

body#example header::before { width:calc(604/768*100vw); height:calc(252/768*100vw); background-image:url('../images/example/main_image_text_sp.svg'); }
body#example header::after { background-image:url('../images/example/main_image_sp.jpg'); }

body#two-family-house header::before { width:calc(584/768*100vw); height:calc(343/768*100vw); background-image:url('../images/example/two_family_house/main_image_text_sp.svg'); }
body#two-family-house header::after { background-image:url('../images/example/two_family_house/main_image_sp.jpg'); }

body#second-hand-housing header::before { width:calc(594/768*100vw); height:calc(352/768*100vw); background-image:url('../images/example/second_hand_housing/main_image_text_sp.svg'); }
body#second-hand-housing header::after { background-image:url('../images/example/second_hand_housing/main_image_sp.jpg'); }

body#reduction header::before { width:calc(594/768*100vw); height:calc(343/768*100vw); background-image:url('../images/example/reduction/main_image_text_sp.svg'); }
body#reduction header::after { background-image:url('../images/example/reduction/main_image_sp.jpg'); }

body#apartment header::before { width:calc(562/768*100vw); height:calc(252/768*100vw); background-image:url('../images/example/apartment/main_image_text_sp.svg'); }
body#apartment header::after { background-image:url('../images/example/apartment/main_image_sp.jpg'); }

body#old header::before { width:calc(503/768*100vw); height:calc(431/768*100vw); background-image:url('../images/example/old/main_image_text_sp.svg'); top:auto; bottom:calc(160/1200*100vh); left:calc(40/750*100vw); }
body#old header::after { background-image:url('../images/example/old/main_image_sp.jpg'); }

}

/* ============ smart phone ============ */
@media(max-width:750px){
body.example header::before { padding-top:0 !important; height:calc(110/750*100vw); top:auto !important; bottom:calc(160/1200*100vh) !important; left:calc(40/750*100vw) !important; }
body#example header::after { padding-top:0 !important; width:100%; height:100%; background-position:center; }

body#example header::before { width:calc(672/750*100vw); height:calc(280/750*100vw); background-image:url('../images/example/main_image_text_sp.svg'); }
body#example header::after { background-image:url('../images/example/main_image_sp.jpg'); }

body#two-family-house header::before { width:calc(649/750*100vw); height:calc(382/750*100vw); background-image:url('../images/example/two_family_house/main_image_text_sp.svg'); }
body#two-family-house header::after { background-image:url('../images/example/two_family_house/main_image_sp.jpg'); }

body#second-hand-housing header::before { width:calc(661/750*100vw); height:calc(392/750*100vw); background-image:url('../images/example/second_hand_housing/main_image_text_sp.svg'); }
body#second-hand-housing header::after { background-image:url('../images/example/second_hand_housing/main_image_sp.jpg'); }

body#reduction header::before { width:calc(661/750*100vw); height:calc(382/750*100vw); background-image:url('../images/example/reduction/main_image_text_sp.svg'); }
body#reduction header::after { background-image:url('../images/example/reduction/main_image_sp.jpg'); }

body#apartment header::before { width:calc(625/750*100vw); height:calc(280/750*100vw); background-image:url('../images/example/apartment/main_image_text_sp.svg'); }
body#apartment header::after { background-image:url('../images/example/apartment/main_image_sp.jpg'); }

body#old header::before { width:calc(559/750*100vw); height:calc(479/750*100vw); background-image:url('../images/example/old/main_image_text_sp.svg'); top:auto; bottom:calc(160/1200*100vh); left:calc(40/750*100vw); }
body#old header::after { background-image:url('../images/example/old/main_image_sp.jpg'); }

}
/************************************************************************
  #nav-example
************************************************************************/
#nav-example { margin:auto; max-width:1100px; font-size:1.4rem; }
#nav-example ul { display:flex; justify-content:center;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x;
}
#nav-example ul li { margin-right:calc(10/1100*100%); padding:calc(40/1180*100%) 0; }
#nav-example ul li:last-child { margin-right:0; } 
#nav-example ul li a {  }
#nav-example ul li a span { padding:0 1em; display:inline-block; white-space:nowrap; }
#nav-example ul li a span:hover { border-bottom:1px solid #232323; }

body#example #nav-example ul li.nav-example a { pointer-events:none; }
body#example #nav-example ul li.nav-example a span { border-bottom:1px solid #232323; pointer-events:none; }

body#two-family-house #nav-example ul li.nav-two-family-house a { pointer-events:none; }
body#two-family-house #nav-example ul li.nav-two-family-house a span { border-bottom:1px solid #232323; pointer-events:none; }

body#second-hand-housing #nav-example ul li.nav-second-hand-housing a { pointer-events:none; }
body#second-hand-housing #nav-example ul li.nav-second-hand-housing a span { border-bottom:1px solid #232323; pointer-events:none; }

body#apartment #nav-example ul li.nav-apartment a { pointer-events:none; }
body#apartment #nav-example ul li.nav-apartment a span { border-bottom:1px solid #232323; pointer-events:none; }

body#reduction #nav-example ul li.nav-reduction a { pointer-events:none; }
body#reduction #nav-example ul li.nav-reduction a span { border-bottom:1px solid #232323; pointer-events:none; }

body#old #nav-example ul li.nav-old a { pointer-events:none; }
body#old #nav-example ul li.nav-old a span { border-bottom:1px solid #232323; pointer-events:none; }

a#nav-example-sp { display:none; }

/* ============ tablet ============ */
@media(max-width:768px){

}
/* ============ smart phone ============ */
@media(max-width:768px){
#nav-example ul { flex-direction:column; display:none; }
#nav-example ul li { border-bottom:1px solid #eeeeee; text-align:center; }
#nav-example ul li:last-child { border-bottom:0; }

a#nav-example-sp { padding:calc(40/1180*100%) 0; text-align:center; display:block; position:relative;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x;
}
a#nav-example-sp::after { content:''; margin:auto; width:calc((20*1.5)/750*100vw); height:calc((20*1.5)/750*100vw); background:url('../images/icon_plus.svg') no-repeat; background-size:100% auto; display:inline-block; position:absolute; top:0; bottom:0; right:calc(40/750*100vw); }
.active a#nav-example-sp::after { background-image:url('../images/icon_minus.svg'); background-position:center; }
}
/************************************************************************
  #introduction
************************************************************************/
#introduction { padding-top:calc(85/1440*100%) }
#introduction .contents { padding:calc(260/1440*100%) 0 calc(80/1440*100%); width:calc(880/1440*100%); max-width:880px; }

#introduction h2 { margin-bottom:calc(30/1280*100%); text-align:center; line-height:1; font-size:2.8rem; }
#introduction h3 { margin-bottom:calc(20/1280*100%); text-align:center; line-height:calc(13/8); font-weight:normal; }
#introduction h4 { margin-bottom:calc(30/1280*100%); text-align:center; font-size:2rem; }

#introduction .col2 { margin-bottom:calc(80/880*100%); justify-content:space-between; }
#introduction .col2 .text { width:calc(410/880*100%); }
#introduction .col2 .text h4 { margin-bottom:calc(30/880*100%); }
#introduction .col2 .photo { width:calc(410/880*100%); font-size:0; }
#introduction .col2 .photo p { font-size:0; }

/* ============ smart phone ============ */
@media(max-width:750px){
#introduction { padding-top:calc(85/750*100vw) }
#introduction h2 { margin-bottom:calc(30/750*100vw); font-size:calc(48/750*100vw); }
#introduction h3 { margin-bottom:calc(60/1280*100%); font-size:calc(28/750*100vw); }
#introduction h4 { margin-bottom:calc(30/1280*100%); font-size:calc(36/750*100vw); }
#introduction .contents { padding:calc(260/750*100vw) 0 calc(80/750*100vw); width:calc(640/750*100vw) }

#introduction .col2 { margin-bottom:calc(80/750*100vw); justify-content:space-between; }
#introduction .col2 .text { width:100%; }
#introduction .col2 .text h4 { margin-bottom:calc(30/880*100%); }
#introduction .col2 .photo { margin-bottom:calc(30/750*100vw); width:100%; }
}
#introduction .col2 .photo a {  }
#introduction .col2 .photo a:hover {  }
#introduction .col2 .photo a[data-lity="data-lity"] { border:1px solid transparent; display:block; position:relative; }
#introduction .col2 .photo a[data-lity="data-lity"]::after { content:''; width:50px; height:50px; background:url('../images/icon_zoom.svg') no-repeat; position:absolute; bottom:0; right:0; pointer-events:none; z-index:0; }
#introduction .col2 .photo a[data-lity="data-lity"]:hover { border:1px solid #cccccc; transition:0.5s; }

#introduction .col2 .photo a { border:1px solid transparent; display:block; position:relative; cursor:pointer; }
#introduction .col2 .photo a::after { content:''; width:50px; height:50px; background:url('../images/icon_zoom.svg') no-repeat; position:absolute; bottom:0; right:0; pointer-events:none; z-index:0; }
#introduction .col2 .photo a:hover { border:1px solid #cccccc; transition:0.5s; }


/* #column-001 ==================================== */
#introduction #column-001.col2 {  }
#introduction #column-001.col2 .text { order:2; }
#introduction #column-001.col2 .photo { order:1; }

/* ============ smart phone ============ */
@media(max-width:750px){
#introduction #column-001.col2 .text { order:1; margin-bottom:calc(30/880*100%); }
#introduction #column-001.col2 .photo { order:2; margin-bottom:0; }
}

/* #request ==================================== */
#introduction #request { margin-bottom:calc(30/880*100%); padding:calc(40/880*100%) calc(50/880*100%); background-color:#ffffff;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px),
linear-gradient(to bottom, transparent, transparent 0, transparent 0, transparent 0),
linear-gradient(to left, #000, #000 1px, transparent 1px, transparent 8px),
linear-gradient(to top, transparent, transparent 0, transparent 0, transparent 0);
background-size:8px 1px,0,8px 1px,0;
background-position:left top,right top,right bottom,left bottom;
background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;
}
/* ol */
#introduction #request ol { list-style:none; }
#introduction #request ol li { margin:0 0 1em 1.5em; text-indent:-1.5em; }
#introduction #request ol li:last-child { margin-bottom:0; }
#introduction #request ol li::before { content:''; margin:0 0.5em 0 auto; width:1em; height:14px; background-repeat:no-repeat; background-position:right center; background-size:auto 100%; display:inline-block; }
#introduction #request ol li:nth-child(1)::before { background-image:url('../images/no1.svg'); }
#introduction #request ol li:nth-child(2)::before { background-image:url('../images/no2.svg'); }
#introduction #request ol li:nth-child(3)::before { background-image:url('../images/no3.svg'); }
#introduction #request ol li:nth-child(4)::before { background-image:url('../images/no4.svg'); }

/* ============ smart phone ============ */
@media(max-width:750px){
#introduction #request { margin-bottom:calc(30/750*100vw); padding:calc(40/750*100vw) calc(30/750*100vw); }
}

/* #realize ==================================== */
#realize { margin:0 auto; padding:calc(45/880*100%) 0 0; }
#realize h4 { margin-bottom:calc(40/880*100%); color:#411000; font-size:2.4rem; position:relative; z-index:1; }
#realize h4::before { content:''; margin:auto; width:0; position:absolute; top:-35px; right:0; left:0; z-index:-1;
border-top:100px solid #eeeeee;
border-bottom:0 solid transparent;
border-right:50px solid transparent;
border-left:50px solid transparent; }

#realize h4 span { padding:0 0.8em; border-bottom:1px solid #411000; display:inline-block; }

/* ============ smart phone ============ */
@media(max-width:750px){
#realize h4 { margin-bottom:calc(40/750*100vw); font-size:calc(32/750*100vw); }
#realize h4::before { top:calc(-30/750*100vw);
border-top:calc(100/750*100vw) solid #eeeeee;
border-bottom:0 solid transparent;
border-right:calc(50/750*100vw) solid transparent;
border-left:calc(50/750*100vw) solid transparent;
}
}

/* #column-002 */
#introduction #column-002.col2 { width:100%; }
#introduction #column-002.col2 .text { order:1; }
#introduction #column-002.col2 .photo { order:2; }
/* ============ smart phone ============ */
@media(max-width:750px){
#introduction #column-002.col2 .text { margin-bottom:calc(30/750*100vw); }
}

/* #column-003 */
#introduction #column-003.col2 { width:100%; }
#introduction #column-003.col2 .text { order:2; }
#introduction #column-003.col2 .photo { order:1; }
/* ============ smart phone ============ */
@media(max-width:750px){
#introduction #column-003.col2 .text { order:1; margin-bottom:calc(30/750*100vw); }
#introduction #column-003.col2 .photo { order:2; }
}
/************************************************************************
  .gallery
************************************************************************/
ul.gallery { display:flex; }
ul.gallery li { margin-right:calc(20/880*100%); width:430px; }
ul.gallery li:last-child { margin-right:0; }
/* ============ smart phone ============ */
@media(max-width:750px){
ul.gallery { flex-direction:column; }
ul.gallery li { margin-bottom:calc(30/750*100vw); margin-right:0; width:100%; }
ul.gallery li:last-child { margin-bottom:0; }
}
/************************************************************************
  #voice
************************************************************************/
#voice { padding:calc(80/1280*100%) 0 0; }
#voice .contents { padding:calc(40/880*100%); }
#voice h4 { text-align:left; }
#voice h4::before { content:''; margin-right:0.5em; width:32px; height:28px; background:url('../images/fukidashi.svg') no-repeat; background-size:100% auto; vertical-align:middle; display:inline-block; }

/* ============ smart phone ============ */
@media(max-width:750px){
#voice .contents { padding:calc(40/750*100vw); }
}
/************************************************************************
  #introduction #slider
************************************************************************/
#introduction #slider { margin:auto auto calc(-180/1440*100%); width:calc(880/1440*100%); max-width:880px; }
#introduction #slider .slick-arrow { padding-top:calc(67/880*100%); width:calc(35/880*100%); }
#introduction #slider .slick-prev { top:0; bottom:0; }
#introduction #slider .slick-next { top:0; bottom:0; }

/* ============ smart phone ============ */
@media(max-width:750px){
#introduction #slider { margin:auto auto calc(-180/750*100vw); width:calc(640/750*100vw); max-width:initial; }
#introduction #slider ul { width:100%; }
#introduction #slider ul li { margin-right:0; }
#introduction #slider ul li img { width:100%; }
#introduction #slider .slick-arrow { padding-top:0; }
#introduction #slider .slick-prev { left:calc(-40/750*100vw); }
#introduction #slider .slick-next { right:calc(-40/750*100vw); }
}
/************************************************************************
  #summary
************************************************************************/
#summary {  }
#summary .contents { padding:calc(80/880*100%) 0 0; }
#summary h4 { margin-bottom:calc(40/880*100%); color:#411000; font-size:2.4rem; position:relative; z-index:1; }
#summary h4 span { padding:0 0.8em; border-bottom:1px solid #411000; display:inline-block; }

#summary ul {
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left top;
background-repeat:repeat-x;
}
#summary ul li { padding:1em; text-align:center;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x;
}
#summary ul li span { padding:0 0.5em; background:linear-gradient(transparent 0%, #fff000 0%); display:inline-block; }

/* ============ smart phone ============ */
@media(max-width:750px){
#summary h4 { margin-bottom:calc(40/750*100vw); font-size:calc(32/750*100vw); }
#summary ul li span { background:linear-gradient(transparent 60%, #fff000 60%); display:inline; }
}
/************************************************************************
  #two-family-house
************************************************************************/
body#two-family-house #introduction #column-003.col2 { margin-bottom:calc(50/880*100%); flex-wrap:wrap; }
body#two-family-house #introduction #column-003.col2 .photo { order:1; margin-bottom:calc(50/880*100%); width:100%; }
body#two-family-house #introduction #column-003.col2 .text { order:2; width:100%; }
/************************************************************************
  #second-hand-housing
************************************************************************/
body#second-hand-housing #introduction #column-003.col2 { margin-bottom:calc(50/880*100%); flex-wrap:wrap; }
body#second-hand-housing #introduction #column-003.col2 .photo { order:1; margin-bottom:calc(50/880*100%); width:100%; }
body#second-hand-housing #introduction #column-003.col2 .text { order:2; width:100%; }