@charset "utf-8";

@import "https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,600,700,900|Roboto&display=swap";
@import "https://use.fontawesome.com/releases/v5.6.3/css/all.css";


/* =========================================================== */
/*  grid.css                                                    */
/* =========================================================== */

/* =========================================================== */
/*  grid
    .gred       基本 SP時縦並び した余白あり
    .gred-sl    SP時 縦並び 下余白なし
    .gred-r     SP時 縦並び 下余白あり PC時逆順
    .gred-kp    SP時 横並びを維持                              */
/* =========================================================== */

[class *='grid'] { width:100%; display:flex; }
[class *='grid'].md { align-items:center; }
[class *='grid'] > [class *='col-']:not(:last-child) { margin-right:2%; }

[class *='grid'] .col-1  { width: 6.5%; }
[class *='grid'] .col-2  { width:15.0%; }
[class *='grid'] .col-3  { width:23.5%; }
[class *='grid'] .col-4  { width:32.0%; }
[class *='grid'] .col-5  { width:40.5%; }
[class *='grid'] .col-6  { width:49.0%; }
[class *='grid'] .col-7  { width:57.5%; }
[class *='grid'] .col-8  { width:66.0%; }
[class *='grid'] .col-9  { width:74.5%; }
[class *='grid'] .col-10 { width:83.0%; }
[class *='grid'] .col-11 { width:91.5%; }

/* PCで逆順 */
.grid-r { flex-direction:row-reverse; }
.grid-r > [class *='col-']                  { margin-right:0 !important; }
.grid-r > [class *='col-']:not(:last-child) { margin-left:2%; }

/* =========================================================== */
/*  responsive                                                 */
/* =========================================================== */

@media only screen and (max-width:640px) {
  /* SP時 横並び */
  .grid-kp { flex-direction:row; }

  /* SP時 縦並び */
  .grid, .grid-sl, .grid-r { flex-direction:column; }
  .grid > [class *='col-'],
  .grid-sl > [class *='col-'],
  .grid-r > [class *='col-'] { width:100%; margin-right:0 !important; margin-left:0 !important; }
  .grid > [class *='col-'],
  .grid-r > [class *='col-'] { margin-bottom:1.5em !important; }
  .grid-sl > [class *='col-']{ margin-bottom:0 !important; } 
}



/* =========================================================== */
/*  mod.css                                                    */
/* =========================================================== */

/* 共通
-------------------------------------------------------------- */
[class ^= 'wrap-'].c, section.c, [class *= 'section'].c { text-align:center; }
.wrap-01 { background-color:#fff; }

.section{ margin-top: 0 !important; margin-bottom: 0 !important; }
.section .section{margin-top: 3em !important;}

/* ttl
-------------------------------------------------------------- */
.ttl-01 { font-size:150%; margin-bottom:1em; font-weight:bold; text-align: left; }
.ttl-03 { height: 52px; font-size:115%; margin-bottom:1em; font-weight:bold;  padding: 0; background-color: transparent; color: #030303; }

/* 文字装飾 */
.pgh-emp-03 { font-size:130%; }

/* btn
-------------------------------------------------------------- */

/* 共通 */
[class *='btn-'] { display:inline-block; text-align:center; }
[class *='btn-'] a, a[class *='btn-']{ text-decoration:none; }

[class *='btn-'].md { width:30%; min-width:250px; }

/* 基本のボタン */
[class *='btn-0']        { padding:.8em 1.6em; font-weight:bold; border-radius:500px; -webkit-border-radius:500px; -moz-border-radius:500px; }
[class *='btn-0']:before { content:"\f054"; font-size:80%; margin-right:.5em; }

/* table
-------------------------------------------------------------- */

[class *= 'tbl-']{ width:100%; border-collapse:separate; border-spacing:2px; }

.tbl-01         { border: none; background-color: transparent; }
.tbl-01 th, .tbl-01 td { padding:.8em; vertical-align:top; border: none; }
.tbl-01 th      { background-color:#444; color:#fff; font-weight: normal; }
.tbl-01 th.emp  { background-color:#fed900; color:#333; }
.tbl-01 th.sub  { background-color:#3fbfee; color:#333; }
.tbl-01 td      { background-color:#f2f2f2; }
.tbl-01 td.emp  { background-color:#fcf4c7; }
.tbl-01 td.sub  { background-color:#b2e5f8; }
.tbl-01 caption { padding:.4em; }

[class *= 'tbl-'].price td { text-align:right; }


/* =========================================================== */
/*  responsive                                                 */
/* =========================================================== */
@media only screen and (max-width:1000px) {
}

/* =========================================================== */
/*  asset補正                                                  */
/* =========================================================== */

main { font-size:1.1rem; line-height:1.78; color: #030303;background:#fff; }

#realtor .wrap-02 { padding: 1em 2em;}

h1 { font-size: 2.5rem; font-weight: 600; text-align: left; }
h2 { padding-bottom: .5em; border-bottom: 1px solid #ccc; margin-bottom:1em; font-size:2rem; font-weight:bold;color: #030303;line-height:1.6; text-align: left; }
h2 span {display: block;color: #aaa;font-size: 60%;font-weight:normal;}
h2 a{ text-decoration:none !important;}
h3 {margin-bottom: 1em; text-align: left; }
h3 strong{ font-size:1.5rem; padding:0 .1em; background:linear-gradient(transparent 75%, #ffd900 75%);}

sup { font-size:60% !important; }

[class ^= 'wrap-0']   { padding:60px 0; }

.btn-02  {  font-size:1.3rem; background-color:#ffd900; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
.btn-03   { font-size:1rem; background-color:#ffd900; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; color: #000 !important;}

#realtor .btnArea{background: #2b64af; padding: 4em 0;}
#realtor .ttl-01 {font-size: 1.25rem;line-height:2.023;}
.list-a01 { font-size:80%; }
.list-a02 { font-size:80%; }


/* =========================================================== */
/*  固有                                                       */
/* =========================================================== */

.slider div img { display:block; margin:0 auto; }
.slider-wrap,  .slider-cont-wrap { position:relative; }
.slick-next:before,  .slick-prev:before { content:""; display:none; }
.slick-next { position:absolute; top:48%; right:1%; text-align:right; }
.slick-prev { position:absolute; top:48%; left :1%; }
.slick-dots li button:before { color:#0852a0 !important; }
button.slick-next, #top button.slick-prev { z-index:10000; height:100%; }

/* フェード */
.fade_off { opacity: 0;-webkit-transition: all 2s;-moz-transition: all 2s;-o-transition: all 2s;-ms-transition: all 2s;transition: all 2s;transform : translate(0, 100px);}
.fade_on {opacity: 1;transform : translate(0, 0);}

#topv {min-height: 100px; padding:20px 0;background-color: #292a2a; text-align: center;}
#topv .grid { margin-bottom: 0 !important; }
#topv .tov-middle{background-color:#fff;padding: 2em 0; position: relative;}
#topv .titlebox{display: flex; justify-content: center; align-items: center;}
#topv .h1box{padding-left: 8%; text-align: left;}
#topv h1 img{}
#topv p { font-size:140%; }
#topv .title { font-size: 1.6rem; font-weight: 600; line-height: 1.61; }
.img-wd-02 { width:auto !important; max-width: none !important; }

.topv_img{right: 0;overflow: hidden;}

[class *='ttl-'] br { display: block!important; }

#what{ padding-bottom: 30px; }
#what .list-r02>li  { font-weight: bold; padding: 0.5em 1em 0.5em 2em;margin: 2em 0;;background: white;border-top: solid 5px #173879;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); position: relative;}

#what .list-r02 li:before {content:'\f058';font-family:'Font Awesome 5 Free';font-weight:900; padding-right: 1em ; color: #173879; position: absolute; left: 10px;}

#what [class *= "col"] { padding:1em; border:1px solid #aaa;text-align: center; } 
#what .sec-1 [class *= "col"] {margin: 1em 0; border:none; } 
#what .sec-1  img {width: 100%;} 

#what [class *= "col"] p{font-weight: bold;}
#what p span {color: #fff;}
#what .title-c {height: 100%;display: flex;align-items: center;}

#quick { border-bottom:solid 1px #DEE1E6; }
#quick .quick-img{margin-bottom: 3em;}
#quick .flex, #quick .col-2 { margin-bottom: 0 !important; display: flex; position: relative;}
#quick strong { font-size:160%; padding:0 .1em; background:linear-gradient(transparent 75%, #ff543e 75%);color: #202124;}
#quick .before { background-color:rgba(255,255,255,.6) }
#quick .arrow       { position:relative; padding-bottom:4em; }
#quick .arrow:after { position:absolute; display:block; width:100%; bottom:0; text-align:center; content:url(../images/flow_arrow_01.webp); }
#quick .point-box {padding: 2em;margin: 4em 0 2em;background: #fff;border-top: solid 10px #535353; font-size: 94%;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);}
#quick .point-box div {overflow: hidden;}
#quick .point-box p {margin: 0; padding: 0;}
#quick .point-box .ttl-01{font-size: 1.5rem; line-height: 1.4; margin-bottom: 10px; text-align: left;}
#quick .point-icon{float: left; margin-right: 20px;}
#quick .point-title{animation: bound .8s ease-in;color: #202124; font-size: 100%; position: absolute; top: 10px; left: 40%;}

#dl { background:url(../images/dl.webp) no-repeat center top;color: #fff;}
#dl td {text-align: center; margin: 0 auto; }
#dl tr th {width: 65%;}
#dl .list-a01{color:#fff;}
#dl a{ color: #fff;}
#att { background:#f2f2f2; }
#contact { background:#f2f2f2; padding-top: 0;}
#contact p{ font-size: 1.5rem;}

/*メンテナンスなどのお知らせ用枠 */

#info .pgh-blk ,#info a{color: #030303; }

/* グローバルナビ */
#realtor .headerNav-btns .login,
#realtor #globalNav .gnavi-sp a[href="https://my.sbiaruhi.co.jp/startlogin"] {
  display: none;
}

.cv-button{
  position: absolute;
  left: 4%;
  bottom: 130px;
  z-index: 100;
}
.cv-button a{
  border-radius: 50px;
  padding-left: 2.7em;
  padding-right: 3em;
}

.cv-button a::before {
  content: "\f023";
  margin-right: 0.8em;
}

/* キャンペーン */
.campaign-text{
  font-weight: bold;
}

/* CTA */
#cta.wrap-01 {
  padding-bottom: 0;
}

/* =========================================================== */
/*  responsive                                                 */
/* =========================================================== */

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

@media only screen and (max-width:1000px) {
  #anx .balloons{margin:0 0 4em 0;}
}

@media only screen and (max-width:960px) {
  .nav-2110 #globalNav .gnavi-sp-login{
    display: none;
  }
}

@media only screen and (max-width:768px) {
  main {font-size: 1rem; }
}

@media only screen and (max-width:640px) {
  h1 { font-size: 1.8rem; font-weight: 700; text-align: center; }
  h2 { padding-bottom: .5em; border-bottom: 1px solid #ccc; margin-bottom:1em; font-size:1.7rem; font-weight:bold;color: #030303;line-height:1.6; }
  h2 span {display: block;color: #aaa;font-size: 60%;font-weight:normal;}
  h3 {margin-bottom: 1em;text-align: center;}
  h3 strong{font-size: 1.25rem; line-height: 2.023; padding:0 .1em; background:linear-gradient(transparent 75%, #ffd900 75%);}
  #realtor .ttl-01, .ttl-03{text-align: center; }
  #dl tr th {width: 100%;}

  #topv {height: 100%; padding:20px 0;background-color: #292a2a; text-align: center;}
  #topv .tov-middle{background-color:#fff;padding: .5em 0;}
  #topv .h1box{padding:8%;}
  #topv h1 img{ text-align: center; }
  #topv p { font-size:100%; }
  .img-wd-02 { width:70% !important; }
	#topv .title { font-size: 1.2rem; font-weight: 700; text-align: center; }

  #att #att_rt {padding-top:110px;margin-top:-110px;}
	
  .cv-button{
    position:static;
    margin-bottom:20px;
  }
  .cv-button a{
    font-size: 1rem;
  }
}