@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&display=swap');

html {
font-size: 62.5%;
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
  --main-color:#053657;
  --sub-color:#F28C00;
  --highlight-color:#F0EB47;
  --bg-color:#F9F5E3;
  --line-color:#06C755;
}
img{
    display:block;
    height:auto;
    max-width:100%;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--main-color);
    overflow-x: hidden;
}
.pconly { display: block; }
.sponly { display: none; }

li{
    list-style: none;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

@media screen and (max-width:768px) {
.pconly { display: none; }
.sponly { display: block; }
}

/*----------------------------------------------------
 fade up animation
----------------------------------------------------*/

.fadeup {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.fadeup:nth-of-type(2) {
  transition-delay: 0.3s;
}
.fadeup:nth-of-type(3) {
  transition-delay: 0.6s;
}
.fadeup.is-active {
  transform: translateY(0);
  opacity: 1;
}

/*----------------------------------------------------
common
----------------------------------------------------*/
.flex{
  display:flex;
}
.bigger{
  font-size: 150%;
}
/* 共通レイアウト */
.flex {
  display: flex;
}

.flex-between { justify-content: space-between; align-items: center; }
.flex-center  { justify-content: center; align-items: center; }

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

/* ボタン共通 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  text-decoration: none;     /* aタグの下線を消す */
  border-radius: 9999px;     /* 角丸（カプセル型） */
  padding: 2rem;
  transition: opacity 0.3s;  /* ホバー時のアニメーション */
  cursor: pointer;
  font-size: 2.4rem;
  min-width: 32rem;
  position:relative;
  overflow:hidden;
  z-index:0;
}
.btn:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);   /* 重ねる色（要調整） */
  transform: translateX(-100%);     /* 普段は左の外に隠す */
  transition: transform 0.4s ease;  /* スライドの速さ */
  z-index: -1;
}
.btn:hover::before {
  transform: translateX(0); 
}

/* ボタン色（個別指定） */
.navy-btn {
  background: var(--main-color);
  color: #fff;
}
.navy-btn:before{
  background: rgba(255, 255, 255, 0.2);
}
.orange-btn {
  background: var(--sub-color);
  color: #fff;
}
.line-btn {
  background: var(--line-color);
  color: #fff;
}

/**************-768px***************/
@media screen and (max-width: 768px) {
  .btn {
  padding: 1rem 2rem;
  min-width: 24rem;
  }
}
/**************640px***************/
@media screen and (max-width:640px) {
	.btn{
	font-size:1.6rem;
	width: calc((100% - 1.6rem) / 2);
	}
}

/*----------------------------------------------------
header
----------------------------------------------------*/
/* ===== ヘッダー ===== */
header {
  width: 100%;
  background: #fff;
  padding: 1.2rem 1rem;       /* 上下・左右の余白 */
  box-shadow: 0 3px 10px rgba(0,0,0,15%);
  position: fixed;
  z-index: 2;
  transition: background-color 0.3s ease;
}
header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.8);   /* 白の80%（要調整） */
  backdrop-filter: blur(8px);                    /* 背景をぼかす（おしゃれ） */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);     /* 影で浮かせる */
}
/* ロゴ画像のサイズ調整 */
.logo {
  width: 95px;
}
.logo img {
  width: 100%;
}
/* 右側ブロック全体 */
.header-right {
  align-items: center;
  gap: 3rem;                  /* ナビ・電話・ボタンの間隔 */
}

/* グローバルナビ */
.global-nav {
  gap: 2.4rem;                /* メニュー項目どうしの間隔 */
}
.global-nav a {
  color: var(--main-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
  font-size: 1.6rem;
}
.global-nav a:hover {
  color: var(--sub-color);    /* ホバーでオレンジに */
}
/* 電話番号エリア */
.contact-info {
  text-align: center;
}
.number {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;                /* アイコンと番号の間隔 */
  text-decoration: none;
  color: var(--sub-color);    /* オレンジ */
  font-size: 3rem;
  font-weight: 700;
}
.number svg {
  width: 1.8rem; 
  height: auto;
}
.contact-info p {
  font-size: 1.8rem;          /* 「平日受付」の小さい文字 */
  text-align: right;
  line-height: 1;
}

/* ヘッダー内ボタン */
.info-cta {
  align-items: center;
  gap: 1.6rem;
}
.cta-flex {
  gap: 1.2rem;                /* ボタン2つの間隔 */
}
/* ヘッダーのボタンは少し小さめに上書き */
.header-right .btn {
  padding: 1.2rem;
  font-size: 1.8rem;
  min-width: 16rem;
}


/**************-1280px***************/
@media screen and (max-width:1280px){
	.global-nav,
	.header-right{
	gap: 1rem; 
	}
	.number {
	font-size:2.4rem;
	}
	.header-right .btn {
	font-size: 1.4rem;
	min-width:unset;
	}
	.global-nav a,
	.contact-info p{
	font-size: 1.4rem;
	}
}
/**************-1024px***************/
@media screen and (max-width:1024px){
	nav,
	.global-nav{
	display:none;
	}
}
/* スマホ（768px以下）では間隔を狭く */
@media screen and (max-width:768px) {
	.global-nav {
	gap: 1.2rem;   /* 24px → 12px に縮める */
	}
	.number svg {
	width: 1rem; 
	height: auto;
	}
}
/**************640px***************/
@media screen and (max-width:640px) {
	header{
	position: static;
	}
	header.is-scrolled {
		backdrop-filter: none; 
	}
	.logo {
	width:70px;
	}
	.header-right{
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background: #fff;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -3px 10px #24242447;
    padding: 8px 4px;
	}
	.header-right .cta-flex{
	width: 39%;
	flex-wrap: wrap;
	gap: 4px;
	}
	.header-right .btn {
	width: 100%;
	padding: 8px;
	}
	.info-cta{
	width:100%;
	justify-content: center;
	}
	.number {
	}
	.contact-info p{
	font-size: 1.4rem;
	}
}




/*----------------------------------------
                  fv
-------------------------------------------*/

.fv {
  position: relative;
  background: url(./images/fv-bg.png)center top / contain no-repeat;
  overflow: hidden;
}

.fv-inner {
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-end;
  justify-content: center;
  padding: 18rem 2rem 10rem;          /* 要調整 */
  gap: 4rem;
}

/* --- 左：テキスト --- */
.fv-text {
  flex-shrink: 0;              /* 縮まないように */
  width: 45%;
  padding-bottom: 12rem;
}

.fv-title {
  font-size: 4.85rem;             /* 要調整 */
  font-weight: 900;
  line-height: 1.4;
  animation: textReveal 0.4s ease 1s forwards;
  clip-path: inset(0 100% 0 0);	
}

.fv-lead {
  margin-top: 2rem;
  font-size: 2.8rem;
  line-height: 1.3;
  animation: textReveal 0.4s ease 1.4s forwards;
  clip-path: inset(0 100% 0 0);
}

@keyframes textReveal {
  from {
    clip-path: inset(0 100% 0 0);   /* 右側を100%隠す（最初は何も見えない） */
  }
  to {
    clip-path: inset(0 0 0 0);      /* 隠さない（全部見える） */
  }
}

.fv-cta {
  margin-top: 10rem;
  gap: 1.6rem;
}
.fv-cta .btn{
  min-width: 24rem;
}
/* --- 右：ビジュアル＋吹き出し --- */
.fv-visual {
  position: relative;         /* 吹き出しの基準点 */
  flex-shrink: 1;
}
.fv-pc {
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
}

/* 吹き出し共通 */
.fv-balloon {
  -webkit-animation: floatUp_15 1.4s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
 animation: floatUp_15 1.4s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  position: absolute;         /* fv-visual を基準に配置 */
  aspect-ratio: 1;            /* 正円（縦横同じ） */
}

/* 各吹き出しの位置・大きさ（すべて要調整） */
.balloon01 {   /* HTML/CSS編集可能な… 左上 */
  width: 23rem;
  top: -5%;
  left: -15%;
}
.balloon02 {   /* 不動産専用の機能が満載 右上 */
  top: -8%;
  right: 8%;
  -webkit-animation: floatUp_15 2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  animation: floatUp_15 2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}
.balloon03 {   /* 使いやすい見やすい 右 */
  top: 8%;
  right: -18%;
}
.balloon04 {   /* 安心の運用サポート 右下 */
  top: 47%;
  right: -28%;
   -webkit-animation: floatUp_15 2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  animation: floatUp_15 2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

/* --- 下：利用実績バー --- */

.fv-results {
  background: var(--main-color);   /* ネイビー */
  color: #fff;
  padding: 2.4rem 2rem 4.4rem;             /* 要調整 */
  z-index: -1;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.fv-results-inner{
  max-width: 1300px;
  margin: 0 auto;
}
.fv-results .bigger{
  font-weight:900;
  margin-right:10px;
  font-size:7.2rem;
  display: inline-block;
  text-align: right;
  min-width: 2.6rem;
}
.results-num {
  font-size: 3.6rem; 
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
}
.results-lead {
  font-size: 2.4rem;
  margin-top: 0.5rem;
}
  
  /**************-1280px***************/
  @media screen and (max-width:1280px){
      /* 各吹き出しの位置・大きさ（すべて要調整） */
      .balloon01 { 
      width: 23rem;
      top: -53%;
      left: -15%;
      }
      .balloon02 {
      top: -40%;
      right: 30%;
      }
      .balloon03 {
      top: -15%;
      right: 2%;
      }
      .balloon04 {
      top: 65%;
      right: 0%;
      background: #Fff;
      border-radius: 50%;
      }
    
      .fv-title {
      font-size:3.6rem;
      }
      .fv-lead {
      font-size: 2rem;
      }
      .fv-pc {
      width: 80%;
      }
      .fv-visual {
      padding-left:2rem;
      }
  }
  /**************-1024px***************/
  @media screen and (max-width:1024px){
      .fv-inner {
      flex-direction:column-reverse;
      align-items: center;
      }
      .fv-visual {
      padding-left:0;
      }
      .fv-text {
      width:80%;
      }
      .fv-pc {
      width: 60%;
      }
	  .fv-title {
      text-align:center;
      }
      .balloon01 {
      width: 18rem;
      top: -19%;
      left: -5%;
      }
      .balloon02 {
      top: -23%;
      right: 23%;
      width: 14rem;
      }
      .balloon03 {
      top: 0%;
      width: 13rem;
      }
      .balloon04 {
      right: -5%;
      width: 14rem;
      top: 50%;
      }
	  .fv-results {
      text-align:center;
      }
	  .fv-cta {
      margin-top: 2rem;
      justify-content:center;
      }
	   .fv-lead {
      text-align:center;
      }
  }
  /**************-768px***************/
  @media screen and (max-width: 768px) {
	  .fv {
	  background-position-y:50px;
	  }
      .balloon01 {
      width: 16rem;
      top:-25%;
      left: 0%;
      }
      .balloon04 {
      right: 0%;
      top: 60%;
      }
      .fv-text {
      width:100%;
      padding-bottom: 0;
      }
      
      
      .fv-results {
      position:unset;
      padding: 2rem 1rem;
      }
      .fv-inner {
      padding: 20rem 2rem 4rem;
      }
      .results-num {
      font-size: 2.4rem;  
      }
      .fv-results .bigger{
      font-size:150%;
      margin-right: 0;
      }
      .results-lead {
      font-size:1.8em;
      }
  }
  /**************640px***************/
  @media screen and (max-width:640px) {
	   .fv {
	  background-position-y:0;
	  background-size: auto 50%;
	  }
      .fv-inner {
      padding: 12rem 1rem 4rem;
      gap: 3rem 0;
      } 
      .balloon03 {
      top: -8%;
      width: 9rem;
      right: 0;
      background: #Fff;
      border-radius: 50%;
      }
      .balloon04 {
      right: 5%;
      top: 65%;
      width: 10rem;
      }
      .fv-title {
      font-size:2.4rem;
      }
      .fv-lead {
      font-size:1.6rem;
      margin-top: 1rem;
      text-align: center;
      }
      .fv-cta .btn{
      min-width:unset;
      }
      .results-num {
      font-size: 1.8rem;  
      }
      .results-lead {
      font-size:1.4em;
      }
  }

 /**************640px***************/
  @media screen and (max-width:560px) {
	  .balloon01 {
      width: 12rem;
      top: -25%;
      left: 0%;
      }
      .balloon02 {
      top: -37%;
      right: 24%;
      width:9.5rem;
      }
  }
 /**************640px***************/
  @media screen and (max-width:360px) {
	  .balloon01 {
      top: -65%;
      }
      .balloon02 {
      top: -50%;
      }
  }


@keyframes floatUp_15 {
		0% {
				-webkit-transform: translateY(0);
				        transform: translateY(0);
		}
		100% {
				-webkit-transform: translateY(-15px);
				        transform: translateY(-15px);
		}
}


/*----------------------------------------
               logo-slider
-------------------------------------------*/
/* ===== ロゴスライダー ===== */
.logo-slider {
  overflow: hidden;            /* はみ出した部分を隠す（重要） */
  padding: 4rem 0;            /* 要調整 */
  background: #fff;
}

/* 流れるトラック */
.slider-track {
  width: fit-content;         /* 中身の幅にぴったり合わせる */
  display: flex;
  width: fit-content;
}

.logo-list {
  flex-wrap: nowrap;
  align-items: center;
  gap: 4rem;                  /* ロゴ同士の間隔：要調整 */
  animation: logoLoop 40s linear infinite;  /* 60秒で1周：要調整 */
}

/* 各ロゴ */
.logo-list li {
  flex-shrink: 0;             /* 縮まないように（重要） */
}
.logo-list img {
  width: auto;                /* 横幅は元のまま */
  height: 10rem;              /* 高さを揃える：要調整 */
}

/* 無限ループのアニメーション */
@keyframes logoLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* 1セット分（半分）移動 */
}

/* ホバーで一時停止（任意） */
.logo-slider:hover .logo-list {
  animation-play-state: paused;
}

/**************640px***************/
@media screen and (max-width:640px) {
	.logo-slider {
	padding:2rem 0;  
	}
	.logo-list img {
	height: 8rem;  
	}
	.logo-list {
	gap: 2rem; 
	}
}

/*----------------------------------------
h2.title 
-------------------------------------------*/
	h2.title{
	font-size:3.6rem;
	text-align:center;
	margin-bottom:8rem;
	font-weight: 900;
	}
	.highlight {
	background: linear-gradient(180deg,rgba(255, 245, 0, 0) 0%, rgba(255, 245, 0, 0) 70%, rgba(255, 245, 0, 1) 70%, rgba(255, 245, 0, 1) 100%);
	}

/**************-768px***************/
@media screen and (max-width: 768px) {
	h2.title{
	font-size:2.8rem;
	}
}
/**************640px***************/
@media screen and (max-width:640px) {
	h2.title{
	font-size:2.4rem;
	margin-bottom: 6rem;
	}
}

/*----------------------------------------
problem-sec
-------------------------------------------*/
section.problem-sec {
  padding: 8rem 2rem 30rem;
  position: relative;
  background:url(./images/problem-wave.png)bottom / contain no-repeat;
  overflow: hidden;
}
/* 配置の基準 */
.problem-top {
  position: relative;          /* 吹き出しの基準点 */
  max-width: 1000px;
  margin: 0 auto;
  padding: 18rem 0 0;
}

/* 中央の人物イラスト */
.problem-illust {
  width: 30%;                  /* 要調整 */
  margin: 0 auto;             /* 中央寄せ */
}

/* 吹き出し共通 */
.problem-bubble {
  position: absolute; 
  /* 要調整：枠線の色 */
  border-radius: 1.6rem;
  padding: 2rem;
  font-size: 1.8rem;
  line-height: 1.7;
  font-weight: 600;
}

/* ラベル（ツールの問題 など） */
.bubble-label {
  position: absolute;          /* 吹き出しの左上に飛び出す */
  top: 3rem;
  left: 6rem;
  background: #574705;   /* 要調整 */
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  padding: 0.8rem;
  border-radius: 50%;          /* 丸いラベル */
  width: 10rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 各吹き出しの位置（すべて要調整） */
.bubble01 {   /* 左上 */
  top: 0;
  left: -10%;
}
.bubble01 p{
   width: 40rem;
   height:30rem;
   background: url(./images/problem-bubble.png)center / 100% no-repeat;
   padding: 12rem 2rem 0;
   text-align: center;
}
.bubble02 {   /* 右上 */
  top: -10%;
  right: -10%;
}
.bubble02 p{
   width: 42rem;
   height: 32rem;
   background: url(./images/problem-bubble-right.png)center / 100% no-repeat;
   padding: 13rem 2rem 0;
   text-align: center;
   margin: 0 auto;
}
.bubble02 .bubble-label{
  left:unset;
  right:10%;
  background:var(--main-color);
}

.bubble03 {   /* 右下 */
  bottom: 0;
  right: -10%;
}
.bubble03 p{
   width: 33rem;
   height: 24rem;
   background: url(./images/problem-bubble-under.png)center / 100% no-repeat;
   padding: 9rem 1rem 0;
   text-align: center;
}
.bubble03 .bubble-label{
  left:unset;
  right:10%;
  background:#055157;
  top: 1%;
}
/* ===== 悩みセクション下部 ===== */
.problem-bottom {
  position: relative;          /* 人物イラストの基準点 */
  max-width: 1000px;
  margin: 4rem auto 0;        /* 上に余白：要調整 */
  padding: 0 2rem;
}

/* 左右2分割 */
.problem-bottom-inner {
  align-items: flex-end;
  justify-content: center;
  gap: 4rem;                  /* 要調整 */
}

/* --- 左：吹き出し＋チェックリスト --- */
.cms-info {
  flex-shrink: 0;
}

/* 吹き出し */
.cms-bubble {
  position: relative;          /* 尻尾の基準 */
  display: inline-block;
  background: url(./images/round-bubble.png)center / contain no-repeat;   /* ネイビー：要調整 */
  font-size:2.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  padding: 7rem 1rem 2rem;
  border-radius: 1.6rem;
  margin-bottom: 2.4rem;
  width:33rem;
  height:26rem;
  transform: translateX(-40%);
}


/* チェックリスト */
.cms-list{
	width:fit-content;
	margin: 0 auto;
}
.cms-list li {
  display: flex;
  align-items: center;
  font-size: 2.4rem;          /* 要調整 */
  font-weight: 700;
  margin-bottom: 1.6rem;
}
/* チェックアイコン（緑丸＋✓） */
.cms-list .check {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--main-color);   /* 緑：要調整 */
  border-radius: 50%;
  position: relative;
  margin-right: 8px;
}
.cms-list .check::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0.5rem;
  height: 1rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);   /* ✓の形 */
}

/* --- 右：CMS画面 --- */
.cms-screen {
  flex-shrink: 1;
  max-width: 500px;
  width: 50%;
}

/* --- 左右の人物イラスト --- */
.problem-man {
  position: absolute;
  left: 15%;
  bottom: 0;
  width: 25%;                 /* 要調整 */
  max-width: 232px;
}
.problem-lady {
  position: absolute;
  right: 22%;
  bottom: 0;
  width: 15%;                 /* 要調整 */
  max-width: 140px;
}

/**************-1400px***************/
@media screen and (max-width:1400px){
	.problem-man {
	left: 1%;
	width: 20%;
	}
	.problem-lady {
	right: 2%;
	width: 10%; 
	}
}
/**************-1280px***************/
@media screen and (max-width:1280px){
	.bubble01 { 
	top: 0;
	left: -2%;
	}
	.bubble02 {
	right: -2%;
	}
	.bubble03 {
	right: 0%;
	}
	.cms-bubble {
	transform: translateX(0);
	}
}
/**************-1024px***************/
@media screen and (max-width:1024px){
	.problem-bubble{
		font-size:1.4rem;
		padding: 0;
	}
	.bubble01 {
	top: 0;
	left: -1%;
	}
	.bubble02 {
	right: -2%;
	}
	.bubble03 {
	right: -3%;
	bottom: 3%;
	}
	.bubble-label {
	width: 8rem;
	height: 8rem;
	left: 2rem;
	top: -2rem;
	}
	.bubble02 .bubble-label{
	top:3%;
	right:5%;
	}
	.bubble03 .bubble-label{
	  top:-10%;
	}
	.bubble01 p{
	width: 28rem;
	padding: 6rem 5rem 0;
	text-align: center;
	height: 21rem;
	}
	.bubble02 p{
	   width: 31rem;
	   height: 26rem;
	   padding: 10rem 3rem 0;
	}
	.bubble03 p{
	   width: 27rem;
	   height: 18rem;
	   padding: 7rem 4rem 0;
	   margin: 0 auto;
	}
	
}
/**************-768px***************/
@media screen and (max-width: 768px) {
	.cms-list li {
	font-size: 1.6rem;
	}
	.cms-bubble {
	font-size:1.8rem;
	width:30rem;
	height:20rem;
	padding: 6rem 1rem 2rem;
	}
}
/**************640px***************/
@media screen and (max-width:640px) {
	.problem-bubble {
	position:unset;
	}
	.problem-top {
	padding: 0;
	display:flex;
	flex-direction:column;
	}
	.problem-illust {
	order:3;
	width:40%;
	margin: 0 auto 4rem; 
	}
	.problem-man {
	width: 24vw;
	}
	.problem-lady {
	width: 14vw;
	}
	
	.bubble02 p{
	width: 28rem;
	}
	.bubble03 {
	order:4;
	}
	.bubble02 .bubble-label{
	right:10%;
	}
	.bubble03 .bubble-label{
	right:16%;
	}
	.problem-bottom-inner {
	flex-direction:column-reverse;
	align-items: center;
	}
	.cms-screen {
	width: 100%;
	}
	.problem-bottom {
	padding: 0;
	}
	section.problem-sec {
	padding: 2rem 2rem 14rem;
	}
	.cms-list .check {
	  width:1.8rem;
	  height:1.8rem;
	}
}


/*----------------------------------------------------
reblo-solution-sec
----------------------------------------------------*/
.reblo-solution-sec {
  background: url('./images/solution-bg.jpg') no-repeat center / cover;
  color: #fff;                 /* 背景が暗いので文字は白 */
  padding: 8rem 2rem;         /* 要調整 */
}

/* --- 見出し --- */
.reblo-solution-sec h2 {
  text-align: center;
  margin-bottom: 6rem;
  line-height: 1.5;
}
.reblo-solution-sec .dot{
	position:relative;
}
.reblo-solution-sec .dot:before{
	position:absolute;
	content:'';
	top: -6px;
	left:50%;
	transform:translateX(-50%);
	background:var(--highlight-color);
	width:6px;
	height:6px;
	border-radius:50px;
	background-repeat:repeat-x;
}
.reblo-solution-sec .smaller {
  font-size: 3rem;          /* 上の小さい行：要調整 */
  font-weight: 500;
}
.reblo-solution-sec .solution-main {
  font-size: 3.6rem;          /* 下の大きい行：要調整 */
  letter-spacing: 0.05em;
  font-weight: 900;
}
.reblo-solution-sec .solution-main .highlight{
 background: linear-gradient(180deg,rgba(255, 245, 0, 0) 0%, rgba(255, 245, 0, 0) 70%, rgba(255, 245, 0, 0.8) 70%, rgba(255, 245, 0, 0.8) 100%);
 }
}
/* 「欲しい」の上の強調点（・・・） */
.dot {
  text-emphasis: dot;             /* 文字の上に点 */
  -webkit-text-emphasis: dot;
}

/* --- 機能リスト（2列） --- */
.feature-list {
  flex-wrap: wrap;             /* 2列にするため折り返し許可 */
  justify-content: center;
  gap: 3rem;                  /* 要調整 */
  max-width: 1280px;
  margin: 0 auto;
}
.feature-box {
  width: calc(50% - 1.5rem);   /* 2列（gap分を引く）：要調整 */
  align-items: flex-start;     /* アイコンとテキストを上揃え */
  gap: 1.6rem;
}
/* 丸アイコン */
.round-icon {
  flex-shrink: 0;              /* アイコンは縮まない */
  width: 18rem;                /* 要調整 */
  height: 18rem;
  aspect-ratio:1;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.round-icon img {
  width: 100px;                  /* アイコン画像のサイズ：要調整 */
}
/* テキスト */
.feature-box .text h3 {
  font-size: 3rem;            /* 要調整 */
  color: var(--highlight-color);     /* オレンジの見出し */
  margin-bottom: 1rem;
}
.feature-box .text p {
  font-size: 1.6rem;
  line-height: 1.7;
}

/* --- その他機能ボックス --- */
.other-box {
  background: rgba(255, 255, 255, 0.95);   /* 半透明の白 */
  color: var(--main-color);
  border-radius: 2rem;
  max-width: 1280px;
  margin: 6rem auto 0;
  padding: 4rem;              /* 要調整 */
}
.other-box h3 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2.4rem;
  letter-spacing: 0.2em;
}
.other-list {
  flex-wrap: wrap;            /* 2列 */
  margin: 0 auto;
  max-width: 80%;
}
.other-list li {
  width: 50%;                  /* 2列 */
  display: flex;
  align-items: center;
  font-size: 2.4rem;
  margin-bottom: 1.6rem;
  font-weight: 500;
  font-weight: 700;
}
/* リスト先頭の● */
.other-list li::before {
  content: '●';
  color: var(--main-color);     /* オレンジの点：要調整 */
  margin-right: 0.8rem;
  font-size: 1.8rem;
}
/* オプションバッジ */
.option {
  display: inline-block;
  background: var(--main-color);   /* ネイビー：要調整 */
  color: var(--highlight-color);
  font-size: 1.4rem;
  padding: 0.2rem 0.8rem;
  border-radius: 0.4rem;
  margin-left: 0.8rem;
}

/* --- CTAボタン --- */
.reblo-solution-sec .cta-flex {
  justify-content: center;
  gap: 1.6rem;
  margin-top: 6rem;
  flex-wrap: wrap;
}

/**************-1024px***************/
@media screen and (max-width:1024px){
	.round-icon {
	width: 10rem;
	height: 10rem;
	}
	.round-icon img {
	width: 60px;
	}
	.feature-box .text h3 {
	font-size:2.2rem;
	}
	.other-list li {
	font-size:1.6rem;
	}
	.other-list {
	max-width:100%;
	}
}
/**************-768px***************/
@media screen and (max-width: 768px) {
	.reblo-solution-sec .solution-main {
	font-size: 2.8rem;
	} 
	.other-box {
	padding: 4rem 2rem;
	margin: 4rem auto 0;
	}
	.option {
	font-size: 1.2rem;
	}
	.other-list{
	gap:0 2rem;
	}
	.other-list li{
	width:fit-content;
	margin-bottom: 1rem;
	font-size: 1.4rem;
	flex-wrap: wrap;
	}
}
/**************640px***************/
@media screen and (max-width:640px) {
	.reblo-solution-sec .smaller {
	font-size: 1.8rem;
	}
	.reblo-solution-sec .solution-main {
	font-size: 1.8rem;
	}
	.feature-box {
	flex-direction:column;
	width: calc((100% - 1rem) / 2);
	}
	.round-icon {
	margin:0 auto;
	}
	.feature-list{
	gap:1rem;
	}
	.feature-box .text h3 {
	font-size: 1.8rem;
	text-align: center;
	}
	.reblo-solution-sec .btn{
	width: 50%;
	}
	.other-list li::before {
	font-size: 1.4rem;
	}
	.other-box h3 {
	font-size: 2.4rem;
	}
	.reblo-solution-sec .cta-flex {
	  margin-top:4rem;
	}
}



/*----------------------------------------------------
 .comparison-sec
----------------------------------------------------*/
/* ===== 比較表セクション ===== */
.comparison-sec {
  position: relative;
  padding: 8rem 2rem 12rem;
  background: url(./images/comparison-wave.png)bottom /  contain no-repeat;
}
.table-outer {
  background: #F5F5F5;
  padding:2rem 6rem;
  max-width: 1160px;
  margin:0 auto;
}
/* テーブル全体 */
.comparison-table {
  border-collapse: separate;
  border-spacing: 10px 0;
  max-width: 1030px;
  margin: 0 auto;
  table-layout: fixed;
  width: 100%;
}

/* セル共通 */
.comparison-table th,
.comparison-table td {
  text-align: center;
  vertical-align: middle;
  
}
.comparison-table td{
  border-bottom: 5px solid #f5f5f5;
  padding: 10px;
  border-top: 5px solid #f5f5f5;
  height: 12rem;
}
.comparison-table td.col-reblo{
  background:#fff;
  border: 5px solid #053657;
  border-right: 20px solid #053657;
  border-left: 20px solid #053657;
  padding: 1rem;
}
.comparison-table tr:last-child td.col-reblo{
  border-bottom:20px solid #053657;
}
.comparison-table td.col-reblo p{
  font-size:1.4rem;
}
/* 通常セルの背景（ReBlo列は除外） */
.comparison-table td:not(.col-reblo) {
  background: #fff;
}

/* 一番上の見出し行 */
.comparison-table thead th {
  font-size: 1.8rem;
  font-weight: 800;
  background: #F5F5F5;
  padding:14px 4px 0;
  font-family: 'M PLUS Rounded 1c';
}

.comparison-table thead th.col-reblo {
  background: var(--main-color);
  border-bottom:0;
  border-right: 20px solid var(--main-color);
  border-left: 20px solid var(--main-color);
  width: 34rem;
  border-top: 10px solid var(--main-color);
}
.comparison-table thead th.col-reblo img{
  margin:0 auto;
}
/* 左端の項目見出し列 */
.row-head {
  background: #AFC2CF;
  color: var(--main-color);
  font-size: 2rem;
  width: 22rem;
  border-bottom: 5px solid #f5f5f5;
  border-top: 5px solid #f5f5f5;
}

/* 説明文 */
.comparison-table td p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 0.8rem;
  color: var(--main-color);
  font-weight: 600;
}

/* --- 評価マーク --- */
.mark {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}
.mark.double { color: #e8552d; }    /* ◎ 赤橙 */
.mark.circle {color: #EDB41A;}    /* ○ 青 */
.mark.triangle {color: #065C96;}     /* △ グレー */

/* --- ReBlo列の強調 --- */
.col-reblo {
  background: var(--main-color);
  color: #fff;
}
thead th.col-reblo {
  font-size: 2rem;
}
thead th.col-reblo span {
  display: block;
  font-size: 1.1rem;
  font-weight: 400;
}

/* --- イラスト --- */
.comparison-illust {
  position: absolute;
  left: 16%;
  bottom: -2%;
  width: 18rem;
}
/**************-1600px***************/
@media screen and (max-width:1600px){
	.comparison-illust {
	left: 11%;
	bottom: 2%;
	width: 12rem;
	}
}
/**************-1280px***************/
@media screen and (max-width:1280px){
	.table-outer {
	padding:2rem;
	}
	.comparison-illust {
	left:2%;
	bottom:2%;
	width: 34vw;
	max-width: 14rem;
	}
}
/**************-1024px***************/
@media screen and (max-width:1024px){
	.row-head {
	font-size: 1.6rem;
	width: 18rem;
	}
	.comparison-table thead th {
	font-size: 1.4rem;
	}
	.mark {
	font-size:3rem;
	}
	.comparison-table thead th.col-reblo{
	width:36%;
	}
}
/**************-768px***************/
@media screen and (max-width: 768px) {
	.table-outer{
	overflow: scroll;
	}
	.table-outer .comparison-table{
	overflow-x:scroll;
	width: 960px;
	}
}
/**************640px***************/
@media screen and (max-width:640px) {
	.comparison-illust {
	
	}
}


/*----------------------------------------------------
 voice
----------------------------------------------------*/
.voice-sec {
  padding: 8rem 2rem;
  background: url(./images/voice-wave.png)bottom / contain no-repeat;   /* 要調整 */
  overflow: hidden;
}
.voice-sec h2 {
  text-align: center;
  font-size: 2.8rem;
  margin-bottom: 5rem;
}
.case-slider{
  max-width:1320px;
  margin: 0px auto;
  width: 100%;
}
/* 各カード */
.case-card {
  background: #fff;
  border-radius: 1.6rem;
  padding: 1.4rem 1.4rem;
  margin: 0 1rem;              /* カード間隔（要調整・slick注意） */
  border: 2px solid var(--main-color);
  color: inherit;
  width: 320px;
}
.voice-sec .company-card{
  gap:10px;
}
.case-photo{
	width:8rem;
	height:8rem;
	border-radius: 50px;
	overflow: hidden;
}
.case-photo img {
  width: 100%;
	box-sizing:border-box;
  border-radius: 1rem;
}
div.case-company-info{
	width:calc(100% - 8rem);
}
p.case-company {
  font-size: 1.2rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  
}
.case-text {
  font-size: 1.4rem;
  line-height: 1.6;
  margin-top: 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Arrows */
.case-slider .slick-prev,
.case-slider .slick-next {
    color: transparent;
    border: medium none;
    outline: medium none;
    padding: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 50px!important;
    height: 50px!important;
    border-radius: 100%;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease-in-out 0s;
    background: #bebebead;
    transform:translate(0,-50%);
}

.case-slider .slick-prev::before,
.case-slider .slick-next::before{
  position:absolute;
  content:'';
  width: 14px;
  height: 14px;
  border-bottom:3px solid #fff;
  border-right:3px solid #fff;
  top:50%;
  font-size: 0px!important;
}

.case-slider .slick-prev::before{
  transform:translate(-50%,-50%) rotate(135deg);
  left:55%;
}

.case-slider .slick-next::before{
  transform:translate(-50%,-50%) rotate(-45deg);
  left:45%;
}
.case-slider .slick-prev:hover,
.case-slider .slick-next:hover{
  opacity: 0.5;
}

.case-slider .slick-next{right: -30px!important;}
.case-slider .slick-prev{left: -30px!important;}

	/**************-1024px***************/
	@media screen and (max-width:1024px){
		.case-slider .slick-prev,
		.case-slider .slick-next {
			width: 5vw!important;
			height: 5vw!important;
		}

		.case-slider .slick-prev::before,
		.case-slider .slick-next::before{
		  width: 1vw;
		  height: 1vw;
		}
	}

	/**************-768px***************/
	@media screen and (max-width: 768px) {

	}

	/**************-560px***************/
	@media screen and (max-width: 560px) {
		.case-slider .slick-prev,
		.case-slider .slick-next {
			width: 30px!important;
			height: 30px!important;
		}

		.case-slider .slick-prev::before,
		.case-slider .slick-next::before{
		  width: 6px!important;
		  height: 6px!important;
		}

	}



/* タグ */
.case-tags {
  gap: 0.6rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.tag {
  font-size: 1.1rem;
  color: #fff;
  padding: 0.3rem 1rem;
}
.tag-rent {background: #0083C9;}
.tag-sale {background: #CA0E00;}
.tag-portal {background: #66C8E5;}
.tag-business {background:#72b231;}

.voice-bottom {
    margin-top:8rem;
}
.voice-illust{
  margin-top:-10rem;
}
.voice-illust img {
    margin: 0 25% 0 auto;
}
.voice-bubble{
    max-width:767px;
    position: relative;
    left: 20%;
}
.voice-txt {
    background:url(./images/voice-bubble.png)center / contain no-repeat;
    height:280px;
    text-align:center; 
}
.voice-txt h3{
    font-size:3.6rem;
    width: fit-content;
    margin: 0 auto 2rem;
	padding-top: 3rem;
}
.voice-txt p{
    font-size:2.2rem;
    font-weight:700;
}
.voice-bubble p.notice{
    font-size:1.2rem;
    position: absolute;
    bottom: 4rem;
    left: 4rem;
}
.voice-txt p .komejirushi{
	font-size:80%;
	vertical-align:top;
}


/**************-1400px***************/
@media screen and (max-width:1400px){
	.voice-illust img {
	margin: 0 10% 0 auto;
	}
	.voice-bubble{
    left: 10%;
	}
}
/**************-1280px***************/
@media screen and (max-width:1280px){
	.voice-bubble{
	width:60%;
	}
	.voice-txt h3{
	font-size:2.8rem;
	margin: 0 auto 1rem;
	padding-top:6rem;
	}
	.voice-txt p{
	font-size:1.8rem;
	}
	.voice-bubble p.notice{
	bottom: 5rem;
	left: 2rem;
	}	
}
/**************-1024px***************/
@media screen and (max-width:1024px){
	.voice-bubble{
	left:0;
	}
	.voice-bottom {
	margin-top:2rem;
	}
	.voice-txt {
	width:580px;
	margin: 0 auto 0 0;
	}
	.voice-illust img {
	margin: 0 5% 0 auto;
	width: 34vw;
	}
	.voice-illust{
	margin-top:-5rem;
	}
	.voice-sec {
	padding:2rem 2rem;
	}
}
/**************-768px***************/
@media screen and (max-width: 768px) {
 
}
/**************640px***************/
@media screen and (max-width:640px) {
	.voice-bubble,
	.voice-txt {
	width:100%;
	height: auto;
	background:none;
	margin: 0 auto;
	}
	.voice-bubble{
	border: 2px solid var(--main-color);
	background: #fff;
	padding: 2rem 1rem;
	border-radius: 20px;
	}
	.voice-txt h3{
	font-size:2rem;
	padding-top: 0;
	}
	.voice-txt p{
	font-size: 1.4rem;
	}
	.voice-illust{
	margin-top:5%;
	}
	.voice-bubble p.notice{
	bottom: -2rem;
	}	
	.case-card {
	padding: 1.4rem 1rem;
	margin: 0 4px;
	}
	.case-text {
	font-size: 1.2rem;
	-webkit-line-clamp:2;
	}
}

/*----------------------------------------------------
 plan-section
----------------------------------------------------*/
.plan-section {
  background: var(--main-color);   /* ネイビー背景 */
  color: #fff;
  padding: 8rem 2rem;             /* 要調整 */
  text-align: center;
}
.plan-section h2 {
  margin-bottom:1rem;
}
.plan-lead {
  font-size: 2.4rem;
  line-height: 1.5;
  margin-bottom: 5rem;
  font-weight: 700;
}

/* --- プランカード一覧 --- */
.plan-list {
  justify-content: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: end;
}

/* カード共通 */
.plan-box {
  background: #fff;
  color: var(--main-color);        /* 中の文字はネイビー */
  border-radius: 3rem;
  width: 30rem;                   /* 要調整 */
  overflow: hidden;               /* 角丸からはみ出さない */
  text-align: left;
  border: 6px solid #efede4;
}

/* カード見出し */
.plan-box h3 {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 2.9rem;              /* 要調整 */
  background: #EFEDE4;             /* 薄いベージュ（要調整） */
  font-weight: 800;
}
.plan-box .plan-en {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--main-color);                    /* 英語ラベルは小さくグレー */
  letter-spacing: 0.1em;
}

/* スペック一覧 */
.plan-detail {
  padding: 1rem 2rem;
}
.plan-detail li {
  justify-content: space-between;  /* 項目名↔値を両端に */
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px solid #eee;   /* 区切り線 */
}
.plan-detail li:last-child {
  border-bottom: none;            /* 最後の線は消す */
}
.plan-item {
  font-size: 1.5rem;
  font-weight: 700;
  color: #666666;
}
.standard-plan .plan-item{
  font-size:1.8rem;
}
.plan-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #275B8D;
}
.standard-plan .plan-value{
  font-size:2rem;
  color:var(--main-color);
}
/* --- スタンダードプランだけ強調 --- */
.standard-plan {
  align-self: stretch;            /* 念のため */
  transform: scale(1.05);         /* 少し大きく：要調整 */
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
  width: 32rem;
  border: 6px solid #f0eb47;
}
.standard-plan h3 {
  background: var(--highlight-color);   /* 黄色背景 */
}

/* --- 注意書き --- */
.plan-section .notice {
  font-size: 1.8rem;
  color: #F9F5E3;
  margin-top: 4rem;
}

/* --- CTAボタン --- */
.plan-section .cta-flex {
  justify-content: center;
  gap: 1.6rem;
  margin-top: 6rem;
}
.plan-section .cta-flex .btn{
  max-width: 42rem;
  width: 50%;
}

/**************-1024px***************/
@media screen and (max-width:1024px){
	.plan-box h3 {
	font-size: 2.2rem;  
	}
}
/**************-768px***************/
@media screen and (max-width: 768px) {
	.plan-box h3 {
	font-size: 1.8rem;
	padding: 2rem 0;
	}
	.plan-detail {
	padding: 1rem;
	}
	.standard-plan .plan-item{
	font-size:1.4rem;
	}
	.standard-plan .plan-value{
	font-size:1.8rem;
	}
	.plan-list {
	gap: 2rem 1.4rem;
	}
	.plan-lead {
	font-size: 1.6rem;
	}
}
/**************640px***************/
@media screen and (max-width:640px) {
	.plan-box{
	width:90%;
	max-width:32rem;
	}
	.plan-list {
	flex-wrap:wrap;
	}
	.plan-section .cta-flex {
	flex-wrap:wrap;
	margin-top: 4rem;
	}
	.plan-section .notice {
	font-size: 1.6rem;
	}
}

/*----------------------------------------------------
 form-section
----------------------------------------------------*/
.form-section{
  background:var(--bg-color);
  padding:8rem 2rem;
}
.form-section h2{
  margin-bottom: 0;
}
.form-section p.form-lead{
  font-size:1.8rem;
  text-align:center;
  margin-bottom:4rem;
}
.form-section .form-outer{
	max-width:1280px;
	margin:0 auto;
	position:relative;
}
.form-section .form-outer .wrap_contact{
	margin:0 auto;
	background: #fff;
	max-width: 640px;
	min-height: 500px;
	padding: 2rem 1rem;
}
.form-section .qna-illust{
  position:absolute;
	bottom:-4rem;
	left:0;
}


/**************-1400px***************/
@media screen and (max-width:1400px){
	.form-section .qna-illust{
	max-width:20%;
	}
	.form-section p.form-lead{
	font-size:1.6rem;
	}
}
/**************-1024px***************/
@media screen and (max-width:1024px){
	 .form-section .qna-illust{
	max-width:16%;
	}
}
/**************641px-1024px***************/
@media screen and (min-width:641px) and ( max-width:1024px) {
	.form-section .qna-illust{
	max-width:14%;
	bottom: -8rem;
	}
}
/**************640px***************/
@media screen and (max-width:640px) {
	.form-section .qna-illust{
	bottom: -6rem;
	display: none;
	}
}

/*----------------------------------------------------
 contact-sec
----------------------------------------------------*/
/* ===== 資料請求セクション ===== */
.contact-sec {
  background: var(--main-color);   /* ネイビー背景 */
  color: #fff;
  padding: 8rem 2rem;             /* 要調整 */
  text-align: center;
}

/* 見出し＋バッジ */
.contact-sec h2 {
  margin-bottom: 1.6rem;
}
.contact-badge {
  display: block;                 /* 見出しの下に改行して配置 */
  width: fit-content;
  margin: 1.2rem auto 0;         /* 中央寄せ */
  border: 1px solid #fff;         /* 白い枠線 */
  font-size: 1.8rem;
  font-weight: 400;
  padding: 0.4rem 1.6rem;
  letter-spacing: 0.1em;
}

/* リード文 */
.contact-lead {
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 3rem;
}

/* 電話番号 */
.contact-tel {
  display: inline-block;
  font-size: 7.2rem;                /* 大きく：要調整 */
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1;
}
.contact-hours {
  font-size: 1.8rem;
  margin-top: 0.8rem;
}
.contact-hours span {
  font-weight: 900;               /* 「平日10:00〜19:00」を強調 */
}

/* CTAボタン */
.contact-sec .cta-flex {
  justify-content: center;
  gap: 2rem;
  margin-top: 4rem;
}
.contact-sec .cta-flex .btn{
  width:50%;
  max-width:40rem;
}

/**************640px***************/
@media screen and (max-width:640px) {
	.contact-tel {
	font-size:4rem; 
	}
	.contact-sec .cta-flex{
	flex-wrap:wrap;
	}
	.contact-lead {
	font-size: 1.6rem;
	}	
}

/* ===================== FOOTER ===================== */
footer {
width: 100%;
padding: 24px 70px;
display: flex;
align-items: center;
justify-content: space-between;
}

.footer-left {
display: flex;
align-items: center;
gap: 16px;
}

.footer-pmark {
width: 43px;
height: 42px;
background:#D9D9D9;;
border-radius: 4px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #666;
}

.footer-privacy-text {
font-size: 15px;
color: var(--navy);
}

.footer-right {
display: flex;
align-items: center;
gap: 24px;
}

.footer-company {
font-size: 14px;
color: var(--navy);
}

.footer-logo {
width: 70px;
height: 25px;
background: var(--mid-gray);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #666;
}

.issues-char-woman {
position: absolute;
right: 20px;
top: 500px;
height: 200px;
width: auto;
pointer-events: none;
}

.issues-char-man {
position: absolute;
right: 60px;
top: 620px;
height: 220px;
width: auto;
pointer-events: none;
}

@media (max-width: 1024px) {
    footer { padding: 20px 32px; }
    .footer-privacy-text { font-size: 13px; }
}
@media (max-width: 767px) {
    footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
    }
    .footer-right {
    align-self: flex-end;
    }
    .footer-privacy-text {
    font-size: 12px;
    }
}
@media (max-width:640px) {
    footer {
    margin-bottom:3rem;
    }
}