/* =========================================
   全体
========================================= */

.toparea_FLOW_body{
  width:100%;
}

.toparea_FLOW_body > p{
  width:94%;
  margin:20px auto;
  color:#fff;
}


/* =========================================
 レイアウト
========================================= */

.flow_1024px{
  width:100%;
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:20px;
}

@media (min-width:900px){

  .flow_1024px{
      grid-template-columns:repeat(2,1fr);
  }

}


/* =========================================
 カード
========================================= */

.flow-card{
  background:#fff;
  border-radius:10px;
  padding:20px;
  text-align: left;
}

.flow-card ul{
  list-style:none;
  margin:0;
  padding:0;
}

.flow-card li{
  margin:15px 0;
  font-size: 14px;
}


/* =========================================
 ステップタイトル
========================================= */

.topix_title{
  display:flex;
  align-items:center;
  gap:10px;
}

.step-no{
  width:35px;
  height:35px;

  border-radius:50%;
  background:#E50012;

  color:#fff;
  font-size:1.5em;
  font-weight:bold;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.thema_top{
  margin:0;
  color:#0B79C4;
  font-size:clamp(1.2rem,1rem + .5vw,1.8rem);
  font-weight:500;
}

/*契約者　u_keiyaku　入居者 u_riyo　*/
div.u_keiyaku,
div.u_riyo{
  padding-top: 0;
}
.flow-card.u_keiyaku h4 {
  color: #1232a6;
}
.flow-card.u_riyo h4 {
  color: #f01b84;
}
div.u_keiyaku h4,
div.u_riyo h4 {
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 50px 50px;
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 60px 0 0;
  width: 100%;
}
.u_keiyaku ul li.topix_title span {
  background-color: #1232a6;
}
.u_riyo ul li.topix_title span {
  background-color: #f01b84;
}
div.u_keiyaku h4 {
  background-image: url(../images/flow004_ukeiyaku.png);
}
div.u_riyo h4 {
  background-image: url(../images/flow004_uriyo.png);
}


/* =========================================
 画像
========================================= */

.flow_img_area{
  background:#E6F4FD;
  padding:10px;
  text-align:center;
}

.flow_img_area img{
  max-width:100%;
  height:auto;
}

.img-large{
  width:90%;
}

.img-medium{
  width:60%;
}

.img-small{
  width:50%;
}


/* =========================================
 本文
========================================= */

.box_topic{
  font-size:15px;
  line-height:1.8;
}

.font_color_red{
  color:#B81C22;
  font-weight:600;
}

.font_color_blue{
  color:#0B79C4;
  font-weight:600;
}


/* =========================================
 注意事項
========================================= */

.notice-box{
  background:#ffffff;
  border-left:5px solid #E50012;
  border-radius:10px;
  text-align: left;

  padding:20px;
  margin:0 auto 20px;

  max-width:900px;
}

.notice-box h4{
  margin:0 0 10px;
}

.notice-box p{
  margin:0 0 10px;
  line-height:1.8;
}



/* =========================================
 上部タイトル
========================================= */

.TopBox{
  max-width:900px;
  margin:25px auto 10px;
}


/* =========================================
 黄色背景
========================================= */

li.box_yellow_topic {
  background-color: #FFFFE7;
  padding: 20px;
  line-height: 1.5em;
}

li.box_yellow_topic h5{
  font-weight: bold;
  margin-bottom: 5px;
}
li.box_yellow_topic p span{
  color: #af1717;
}

/* =========================================
 >リンク
========================================= */

.link_arrow {
  position: relative;
  display: inline-block;
  padding-left: 15px;
  font-family: "RoundedMgenplus-medium", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.link_arrow:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* =========================================
   アプリダウンロード
========================================= */

.app-download{
  max-width:900px;
  margin:40px auto;
  padding:24px;

  background:#fff;
  border-radius:10px;

  text-align:center;
}

.app-download__title{
  margin:0 0 24px;
  color:#1232A6;
  font-size:clamp(1.4rem,1.2rem + .5vw,2rem);
}

.app-download__stores{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.store-link img{
  display:block;
  height:auto;
  max-width:180px;
}

.app-download__comment{
  margin-top:20px;
  font-size:14px;
  line-height:1.8;
}