@charset "UTF-8";
/* CSS Document */

/* 共通要素 -----------------------------------------------------------------------------*/
html {/* 文字サイズレスポンシブ使用不可 */
  scroll-behavior: smooth;/* ゆっくりスクロール（速度変えられない） */
  font-feature-settings: palt;/* 文字詰め OpenTypeのみ */
  font-size: 62.5%;/* style.cssにあり */
  overflow-y: scroll;/* style.cssにあり */
}
/* 像 */
img {
  max-width: 100%;
  vertical-align: top;/* 必要 画像下の余白をなくす */
}
.top-wrap {
  width: 100%;/* トップ画像だけ横幅に合わせる */
  height: 100%;
  background: #fff;
}
/* 文字 種類 */
.biz-udpgothic-regular {
  font-family: "BIZ UDPGothic", sans-serif;/* グーグル モリサワフォント */
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
}
.biz-udpgothic-bold {
  font-family: "BIZ UDPGothic", sans-serif;/* グーグル モリサワフォント */
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
}
/* 文字一部 赤色 */
.text-red {
  color: #FF4F50;
}
/* 文字一部 水色 */
.text-cyan {
  color: #44ADE9;
}
/* 外枠 */
.section-wrap {
  display: block;
  position: relative;
  float: none;
  z-index: 999;/* 左の項目表示される */
  width: 100%;
  margin: -6rem 0 -12rem;/* 必要 外枠上下の空きつめる */
  background-image:/* at 横の位置 縦の位置, 開始色, 終了色 */
  radial-gradient(at 80% 10%, #F0F8FF 10%, transparent 50%),
  radial-gradient(at 0% 60%, #FFF0F5, transparent 50%),
  radial-gradient(at 0% 0%, #FFFAFA, transparent),
  radial-gradient(at 80% 90%, #E6E6FA, transparent 60%),
  radial-gradient(at 100% 100%, #F0F8FF, transparent);
  background-attachment: fixed;
  border: 1px solid #696969;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.section-wrap {
  -webkit-text-size-adjust: 100%;/* iPhone Safari文字サイズ調整 */
}
/* リンクボタン */
.link-button {
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 3% 4%;
  margin-top: 25px;
  border-radius: 30px;
  background-image:/* at 横の位置 縦の位置, 開始色, 終了色 */
  radial-gradient(at 80% 10%, #F0F8FF 10%, transparent 50%),
  radial-gradient(at 0% 60%, #FFF0F5, transparent 50%),
  radial-gradient(at 0% 0%, #FFFAFA, transparent),
  radial-gradient(at 80% 90%, #E6E6FA, transparent 60%),
  radial-gradient(at 100% 100%, #F0F8FF, transparent);
  background-attachment: local;
}
.link-button:hover {
  background-color: rgb(68 204 255 / .2);/* #66CCFF */
}
.link-button img {
  margin: 10px 10px 0;
}
.link-button img:hover {
  cursor: url('images/cursor-b-right.png'), pointer;
}
.link-button-text {
  border-bottom: solid 2px #44ADE9;
  color: #44ADE9;
  line-height: 1.5 !important;/* 必要 サファリ */
}
.link-button-text:hover {
  cursor: url('images/cursor-b.png'), pointer;
}

/*------ 点滅 ------*/
.blink{
  animation:blink 1.6s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0.3;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0.3;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0.3;}
  100% {opacity:1;}
}
.blink a {
  cursor: url('images/cursor-b.png'), pointer;
}
/* 見積 */
.estimate-wrap {
  display: block;
}

/* レスポンシブル ここから高解像度パソコン  ----------------------------------------------------*/
@media screen and (min-width: 1367px) {/* hd max 1980px */

/* 画像切替 */
.pc{/* hd */
  display: none;
}
.sp{/* hd */
  display: none;
}
/* 文字　大きさ */
.text-size-title {/* hd */
  font-size: 3.9em;/* 2.9 */
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* hd */
  font-size: 4.6em;/* 3.6 */
}
.text-size-main {/* hd */
  font-size: 2.8em;/* 2.4 */
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* hd */
  font-size: 3.4em;/* 3 */
}
.text-size-sub {/* hd */
  font-size: 2em;/* 1.6 */
  line-height: 1.8;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* hd */
  font-size: 2.4em;/* 2 */
}
.text-size-cap {/* hd */
  margin: 10px;
  font-size: 1.6em;/* 1.2 */
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* hd */
  font-size: 1.9em;/* 1.5 */
}

/*------ レイアウト ------*/
.main-wrap {/* hd */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  z-index: 998;/* 左の項目表示される */
  padding: 4%;/* 枠の空き */
  background: url('images/acordion-back.png') no-repeat;
  background-size: cover;
}
.title-wrap {/* hd */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 40px 0 30px;
}
.title-wrap-inside {/* hd */
  display: block;/* 文字数の幅に合わせる */
  margin-bottom: 5px;
  font-size: .7em;
}
.text-sub-wrap {/* hd */
  display: inline-block;
  position: relative;
  margin-bottom: 50px;
  padding: 0 16%;
  line-height: 1.6;
}
.challenges-wrap {/* hd */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 75%;
  margin-bottom: 10px;
  padding: 30px 50px;
  border-radius: 50px;
  background: #fff;
  text-align: left;
}
.challenges-wrap:before {/* hd */
  content: "お客さまの声";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -35px;
  left: -30px;
  padding: 15px 25px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #FF4F50;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap {/* hd */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 75%;/* challengesと同じ */
  margin-top: 50px;
  padding: 30px 50px;
  border-radius: 50px;
  background: #fff;
  text-align: left;
}
.solusions-wrap:before {/* hd */
  content: "四Bハウジングサービスのご提案";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -35px;
  left: -30px;
  padding: 15px 25px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #44ADE9;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap:after {/* hd */
  position: absolute;
  top: 100%;/* 吹き出し本体の下に配置 */
  left: 50%;
  z-index: 1;
  margin-left: -40px;/* 三角の幅の半分 */
  border: 40px solid transparent;/* 数値増えると右に広がる */
  border-top: 40px solid #fff;/* 数値増えると下に広がる */
  content: "";
}
.solusions-wrap-inside {/* hd */
  margin-top: 15px;
  font-size: .7em;
  line-height: 1.6;
  text-align: left;
}
/* 段組横並び 背景あり */
.solusions-inside-column-flex {/* hd */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 30px 0 0;/* 枠の空き */
}
.solusions-inside-column-block {/* hd */
  display: block;/* 縦並び */
  position: relative;
  padding: 3% 2% 0;/* 枠の空き */
  text-align: center;
}
.column-box-1 {/* hd */
  display: inline-block;
  position: relative;
  padding: 60px !important;/* 30 */
  text-align: center;
}
.column-box-2 {/* hd */
  display: inline-block;
  position: relative;
  margin: 20px;
  padding: 30px;/* 3列表示の空き 見積の枠にも使用 20 */
  border-radius: 15px;
  background: #fff;
  text-align: center;
}
.column-text-main-1 {/* hd */
  font-size: 3em !important;/* 2.6 */
  line-height: 1.6;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-1 {/* hd */
  font-size: 3.5em !important;/* 3.1 */
}
.column-text-main-2 {/* hd */
  color: #808080;
  font-size: 5em !important;/* 2.6 */
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-2 {/* hd */
  font-size: 6em !important;/* 3.2 */
}
.column-text-main-1 span, .column-text-main-2 span {/* hd */
  font-size: .6em;
}
.column-text-sub {/* hd */
  color: #000;
  font-size: 2em !important;/* 1.6 */
  line-height: 1.8;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-sub {/* hd */
  font-size: 2.4em !important;/* 2 */
}
.column-text-sub span {/* hd */
  font-size: .6em;
  vertical-align: top;
}
/* 画像と料金の外枠 */
.column-text-wrap {/* hd */
  display: flex;/* 横並び */
  flex-wrap: nowrap;/* 横並び */
  align-items: stretch;/* 縦の位置指定 */
}
/* 文字 月々 */
.vertical {/* hd */
  padding-left: 30px !important;/* 20 */
  color: #FF4F50;
  font-size: 6em !important;/* 8 */
  text-align: center;/* 縦書き中央揃え */
  writing-mode: vertical-rl;/* 縦書き */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.vertical {/* hd */
  font-size: 7em !important;/* 5 */
}
/* 文字　料金 */
.payment {/* hd */
  padding-left: 20px;
  color: #FF4F50;
  font-size: 12em !important;/* 9 */
  line-height: 1;/* 指定がないと上にずれる */
  font-optical-sizing: auto;
  letter-spacing: -0.08em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.payment {/* hd */
  font-size: 14em !important;/* 11 */
}
.payment span {/* hd */
  padding-left: 5px;/* 左の数字との空き */
  font-size: .35em;
  letter-spacing: 0.05em;
}
.column-text-cap {/* hd */
  font-size: 1.9em !important;/* 1.5 */
  line-height: 1.5;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-cap {/* hd */
  font-size: 2.2em !important;/* 1.8 */
}
/* ルビ */
[data-ruby] {/* hd */
  position: relative;
}
[data-ruby]::before {/* hd */
  position: absolute;
  top: -1em;
  right: 0;
  left: 0;
  margin: auto;
  font-size: .4em;
  text-align: center;
  content: attr(data-ruby);
}
/* ルビ　読み上げ用 */
[data-ruby] rt {/* hd */
  display: none;
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* hd */
  width: 100% ;
  padding: 20px 10px;
  border-bottom: 1px solid #696969;
  background: #fff;
  color: #44ADE9;
}
/* 列 */
.service-wrap-inside-2 {/* hd */
  display: inline-block;
  position: relative;
  margin: 60px 15px 0;
  text-align: center;
  vertical-align: top;/* 上揃え */
}
/* 行　横並び */
.service-box {/* hd */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
.service-box-2 {/* hd */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
/* 各項目 */
.service-box-inside-2 {/* hd */
  margin: 5px;
  padding: 20px 25px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #000;
  font-size: 2em;
  line-height: 1.2;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.service-box-inside-2 {/* hd */
  font-size: 2.4em;
}
.estimate-box {/* hd */
  display: inline-block;
  position: relative;
  margin: 30px;
  padding: 30px;/* 3列表示の空き 見積の枠にも使用 20 */
  border-radius: 15px;
  background: #F0F8FF;
  text-align: center;
}
.estimate-text {/* hd */
  margin: 5px 15px 5px .5em;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ パンフレット ------*/
/* 外枠 */
.pamflet-wrap {/* hd */
  display: inline-block;
  position: relative;
  text-align: center;
}
/* パンフレット画像*/
.pamflet-img img {/* hd */
  margin: 5px　0　10px;
  border: 1px solid #808080;
}
.pamflet-text {/* hd */
  display: inline-block;/* 中央揃え設定する */
  position: relative;
  margin: 15px ;/* 必要 アイコンとの空き*/
  color: #000;
  font-size: 2em !important;/* 1.6 */
  line-height: 1.8;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.pamflet-text {/* hd */
  font-size: 2.4em !important;/* 2 */
}
.pamflet-text a {/* hd */
  padding: 3px 0;
  border-bottom: solid 2px #44ADE9;
  color: #44ADE9;/* リンク全体で設定すると左も変わる */
  cursor: url('images/cursor-b.png'), pointer;
}
.pamflet-link-img a {/* hd */
  cursor: url('images/cursor-b-right.png'), pointer;
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* hd */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  padding-top: 30px;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* hd */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  margin: 0 50px 30px !important;/* 必要 2行になったとき社名ロゴの下空きなし */
  font-size: 1.65em !important;/* 必要 右側フォントサイズの基準1.25 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* hd */
  font-size: 2em !important;/* 必要 右側フォントサイズの基準1.6 */
}
.telephone-number {/* hd */
  display: inline-block;
  position: relative;
  margin-top: 5px;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* hd */
  font-size: 2.22em;/* 数値下げる */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* hd */
  font-size: 0.7em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* hd */
  font-size: 0.7em;
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.company-logo {/* hd */
  display: inline-block;
  position: relative;
  margin-bottom: 30px;/* 必要 2列になったとき下空き */
  text-align: center;
}
.company-logo img {/* hd */
  width: 100%;
  z-index: 1000;
}
/* メールボタン案内 */
.footer-under-wrap {/* hd */
  width: 100%;
  border-top: 1px solid #696969;
  background: #fff;
}
.footer-under-text {/* hd */
  padding: 30px;
  font-size: 2em !important;/* 1.5 */
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* hd */
  font-size: 2.4em !important;/* 1.9 */
}

/*------ ページトップボタン ------*/
.page-top {/* hd */
  position: fixed;
  visibility: hidden;
  right: 7px;
  bottom: 105px;/* お問合せフォームボタンの上 */
  z-index: 1001;
  filter: drop-shadow(2px 2px 3px #B0C4DE);/* X Y ブラー 影#FFC0CB 透明度 */
}
/* カーソル画像きりかえ */
.page-top a:hover {/* hd */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-up.png'), pointer;
}
/* クラス付与時の指定 */
.is-active {/* hd */
  visibility: visible;
  animation-name: fadeinAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeinAnime{
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
/*------ フォームボタン ------*/
#form-button {/* hd */
  position: fixed;
  right: 3px;/* 右下 */
  bottom: 50px;/* 下すぎるとポインターが切り替わらない */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* hd */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-left.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* hd */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(0);
}
}
/* 右の動き */
#form-button.RightMove {/* hd */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(155px);/* 右の文字が隠れる */
}
}
}

/* レスポンシブル ここから低解像度パソコン  ----------------------------------------------------*/
@media screen and (min-width: 769px) and (max-width: 1366px) {/* pc */

/* 画像切替 */
.hd{/* pc */
  display: none;
}
.sp{/* pc */
  display: none;
}
/* 文字 大きさ */
.text-size-title {/* pc */
  font-size: 2.9em;
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* pc */
  font-size: 3.6em;
}
.text-size-main {/* pc */
  font-size: 2.4em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* pc */
  font-size: 3em;
}
.text-size-sub {/* pc */
  font-size: 1.6em;
  line-height: 1.8;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* pc */
  font-size: 2em;
}
.text-size-cap {/* pc */
  margin: 10px;
  font-size: 1.5em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* pc */
  font-size: 1.8em;
}

/*------ レイアウト ------*/
.main-wrap {/* pc */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 5% 3%;/* 枠の空き */
  background: url('images/acordion-back.png') no-repeat;
  background-size: cover;
}
.title-wrap {/* pc */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 30px 0 20px;
}
.title-wrap-inside {/* pc */
  display: block;/* 文字数の幅に合わせる */
  margin-bottom: 5px;
  font-size: .7em;
}
.text-sub-wrap {/* pc */
  display: inline-block;
  position: relative;
  margin-bottom: 30px;
  padding: 0 7%;
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-sub-wrap {/* pc */
  padding: 0 10%;
}
.challenges-wrap {/* pc */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 95%;
  margin: 0 auto;
  padding: 30px 40px;
  border-radius: 50px;
  background: #fff;
  text-align: left;
}
.challenges-wrap:before {/* pc */
  content: "お客さまの声";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -30px;
  left: -20px;
  padding: 10px 20px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #FF4F50;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap {/* pc */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 95%;/* challengesと同じ */
  margin: 50px 0 0;
  padding: 30px 40px;
  border-radius: 50px;
  background: #fff;
  text-align: left;
}
.solusions-wrap:before {/* pc */
  content: "四Bハウジングサービスのご提案";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -30px;
  left: -20px;
  padding: 10px 20px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #44ADE9;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap:after {/* pc */
  position: absolute;
  top: 100%;/* 吹き出し本体の下に配置 */
  left: 50%;
  z-index: 1;
  margin-left: -30px;/* 三角の幅の半分 */
  border: 30px solid transparent;/* 数値増えると右に広がる */
  border-top: 30px solid #fff;/* 数値増えると下に広がる */
  content: "";
}
.solusions-wrap-inside {/* pc */
  margin-top: 15px;
  font-size: .7em;
  line-height: 1.6;
  text-align: left;
}
/* 段組横並び 背景あり */
.solusions-inside-column-flex {/* pc */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 30px 0 0;/* 枠の空き */
}
.solusions-inside-column-block {/* pc */
  display: block;/* 縦並び */
  position: relative;
  padding: 3% 2% 0;/* 枠の空き */
  text-align: center;
}
.column-box-1 {/* pc */
  display: inline-block;
  position: relative;
  padding: 50px !important;/* 30 */
  text-align: center;
}
.column-box-2 {/* pc */
  display: inline-block;
  position: relative;
  margin: 15px;
  padding: 25px;/* 詰める 3列表示の空き 見積の枠にも使用 */
  border-radius: 15px;
  background: #fff;
  text-align: center;
}
.column-text-main-1 {/* pc */
  font-size: 2.6em !important;
  line-height: 1.6;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-1 {/* pc */
  font-size: 3.1em !important;
}
.column-text-main-2 {/* pc */
  color: #808080;
  font-size: 3.2em !important;/* 2.6 */
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-2 {/* pc */
  font-size: 4em !important;
}
.column-text-main-1 span, .column-text-main-2 span {/* pc */
  font-size: .6em;
}
.column-text-sub {/* pc */
  color: #000;
  font-size: 1.6em;
  line-height: 1.8;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-sub {/* pc */
  font-size: 2em;
}
.column-text-sub span {/* pc */
  font-size: .6em;
  vertical-align: top;
}
/* 画像と料金の外枠 */
.column-text-wrap {/* pc */
  display: flex;/* 横並び */
  flex-wrap: nowrap;/* 横並び */
  align-items: stretch;/* 縦の位置指定 */
}
/* 文字 月々 */
.vertical {/* pc */
  padding-left: 20px;
  color: #FF4F50;
  font-size: 4em !important;
  text-align: center;/* 縦書き中央揃え */
  writing-mode: vertical-rl;/* 縦書き */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.vertical {/* pc */
  font-size: 5em !important;
}
/* 文字 料金 */
.payment {/* pc */
  padding-left: 15px;
  color: #FF4F50;
  font-size: 9em !important;
  line-height: 1;/* 指定がないと上にずれる */
  font-optical-sizing: auto;
  letter-spacing: -0.08em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.payment {/* pc */
  font-size: 11em !important;
}
.payment span {/* pc */
  padding-left: 5px;/* 左の数字との空き */
  font-size: .35em;
  letter-spacing: 0.05em;
}
.column-text-cap {/* pc */
  font-size: 1.5em !important;
  line-height: 1.5;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-cap {/* pc */
  font-size: 1.8em !important;
}
/* ルビ */
[data-ruby] {/* pc */
  position: relative;
}
[data-ruby]::before {/* pc */
  position: absolute;
  top: -1em;
  right: 0;
  left: 0;
  margin: auto;
  font-size: .4em;
  text-align: center;
  content: attr(data-ruby);
}
/* ルビ 読み上げ用 */
[data-ruby] rt {/* pc */
  display: none;
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* pc */
  width: 100% ;
  padding: 20px 10px;
  border-bottom: 1px solid #696969;
  background: #fff;
  color: #44ADE9;
}
/* 列 */
.service-wrap-inside-2 {/* pc */
  display: inline-block;
  position: relative;
  margin: 50px 15px 0;
  text-align: center;
  vertical-align: top;/* 上揃え */
}
/* 行 横並び */
.service-box {/* pc */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
.service-box-2 {/* pc */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
/* 各項目 */
.service-box-inside-2 {/* pc */
  margin: 5px;
  padding: 10px 15px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #000;
  font-size: 1.5em !important;/* 必要 変更できない 1.6で2行になる */
  line-height: 1.2;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.service-box-inside-2 {/* pc */
  font-size: 1.8em !important;/* 必要 変更できない */
}
.estimate-box {/* pc */
  display: inline-block;
  position: relative;
  margin: 20px;
  padding: 30px;/* 3列表示の空き 見積の枠にも使用 20 */
  border-radius: 15px;
  background: #F0F8FF;
  text-align: center;
}
.estimate-text {/* pc */
  margin-right: 15px;
  padding-left: .5em;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ パンフレット ------*/
/* 外枠 */
.pamflet-wrap {/* pc */
  display: inline-block;
  position: relative;
  padding: 5px 0;
  text-align: center;
}
/* パンフレット画像 */
.pamflet-img img{/* pc */
  margin: 5px　0　10px;
  border: 1px solid #808080;
}
.pamflet-text {/* pc */
  display: inline-block; /* 中央揃え設定する */
  position: relative;
  padding: 15px !important;/* 必要 アイコンとの空き */
  color: #000;
  font-size: 1.6em;
  line-height: 1.8;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.pamflet-text {/* pc */
  font-size: 2em;
}
.pamflet-text a {/* pc */
  padding: 5px 0;
  border-bottom: solid 2px #44ADE9;
  color: #44ADE9;/* リンク全体で設定すると左も変わる */
  cursor: url('images/cursor-b.png'), pointer;
}
.pamflet-link-img a {/* pc */
  cursor: url('images/cursor-b-right.png'), pointer;
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* pc */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  padding-top: 30px;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* pc */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  margin: 0 50px 30px;/* 2行になったとき社名ロゴの下空きなし */
  font-size: 1.25em;/* 右側フォントサイズの基準 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* pc */
  font-size: 1.6em;/* 右側フォントサイズの基準 */
}
.telephone-number {/* pc */
  display: inline-block;
  position: relative;
  margin-top: 5px;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* pc */
  font-size: 2.22em;/* 数値下げる */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* pc */
  font-size: 0.7em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* pc */
  font-size: 0.7em;
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.company-logo {/* pc */
  display: inline-block;
  position: relative;
  margin-bottom: 30px;/* 必要 2列になったとき下空き */
  text-align: center;
}
.company-logo img {/* pc */
  width: 100%;
  z-index: 1000;
}
/* メールボタン案内 */
.footer-under-wrap {/* pc */
  width: 100%;
  border-top: 1px solid #696969;
  background: #fff;
}
.footer-under-text {/* pc */
  padding: 30px;
  font-size: 1.6em;
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* pc */
  font-size: 2em;
}

/*------ ページトップボタン ------*/
.page-top {/* pc */
  position: fixed;
  visibility: hidden;
  right: 7px;
  bottom: 105px;/* お問合せフォームボタンの上 */
  z-index: 1001;
  filter: drop-shadow(2px 2px 3px #B0C4DE);/* X Y ブラー 影#FFC0CB 透明度 */
}
/* カーソル画像きりかえ */
.page-top a:hover {/* pc */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-up.png'), pointer;
}
/* クラス付与時の指定 */
.is-active {/* pc */
  visibility: visible;
  animation-name: fadeinAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeinAnime{
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
/*------ フォームボタン ------*/
#form-button {/* pc */
  position: fixed;
  right: 3px;/* 右下 */
  bottom: 50px;/* 下すぎるとポインターが切り替わらない */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* pc */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-left.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* pc */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(0);
}
}
/* 右の動き */
#form-button.RightMove {/* pc */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(155px);/* 右の文字が隠れる */
}
}
}

/* ここからタブレット -----------------------------------------------------------------*/
@media screen and (min-width: 441px) and (max-width: 768px) {/* tb */

/* 画像切替 */
.hd {/* tb */
  display: none;
}
.pc{/* tb */
  display: none;
}
/* 文字 大きさ */
.text-size-title {/* tb */
  font-size: 2.4em;/* 2.9 */
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* tb */
  font-size: 3em;
}
.text-size-main {/* tb */
  font-size: 1.9em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* tb */
  font-size: 2.3em;
}
.text-size-sub {/* tb */
  font-size: 1.3em;
  line-height: 1.5;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* tb */
  font-size: 1.6em;
}
.text-size-cap {/* tb */
  margin: 10px;
  font-size: 1.2em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* tb */
  font-size: 1.5em;
}

/*------ レイアウト ------*/
.main-wrap {/* tb */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 5% 5% 2%;/* 枠の空き */
  background: url('images/acordion-back.png') no-repeat;
  background-size: cover;
}
.title-wrap {/* tb */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 30px 0 20px;
}
.title-wrap-inside {/* tb */
  display: block;/* 文字数の幅に合わせる */
  margin-bottom: 5px;
  font-size: .7em;
}
.text-sub-wrap {/* tb */
  display: inline-block;
  position: relative;
  margin-bottom: 30px;
  padding: 0 6%;
  line-height: 1.6;
}
.challenges-wrap {/* tb */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 98%;
  margin: 0 auto;
  padding: 20px 30px;
  border-radius: 35px;
  background: #fff;
  text-align: left;
}
.challenges-wrap:before {/* tb */
  content: "お客さまの声";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -20px;
  left: -20px;
  padding: 10px 20px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #FF4F50;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap {/* tb */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 98%;/* challengesと同じ */
  margin: 35px 0 5px;
  padding: 20px 30px;
  border-radius: 35px;
  background: #fff;
  text-align: left;
}
.solusions-wrap:before {/* tb */
  content: "四Bハウジングサービスのご提案";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -20px;
  left: -20px;
  padding: 10px 20px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #44ADE9;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap:after {/* tb */
  position: absolute;
  top: 100%;/* 吹き出し本体の下に配置 */
  left: 50%;
  z-index: 1;
  margin-left: -30px;/* 三角の幅の半分 */
  border: 30px solid transparent;/* 数値増えると右に広がる */
  border-top: 30px solid #fff;/* 数値増えると下に広がる */
  content: "";
}
.solusions-wrap-inside {/* tb */
  margin-top: 10px;
  font-size: .7em;
  line-height: 1.6;
  text-align: left;
}
/* 段組横並び 背景あり */
.solusions-inside-column-flex {/* tb */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 3% 2% 0;/* 枠の空き */
}
.solusions-inside-column-block {/* tb */
  display: block;/* 縦並び */
  position: relative;
  padding: 3% 2% 0;/* 枠の空き */
  text-align: center;
}
.column-box-1 {/* tb */
  display: inline-block;
  position: relative;
  padding: 30px;/* 画像と文字の間 */
  text-align: center;
}
.column-box-2 {/* tb */
  display: inline-block;
  position: relative;
  margin: 10px;
  padding: 20px;/* 3列表示の空き 見積の枠にも使用 */
  border-radius: 15px;
  background: #fff;
  text-align: center;
}
.column-text-main-1 {/* tb */
  font-size: 2.4em;
  line-height: 1.6;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-1 {/* tb */
  font-size: 3.1em;
}
.column-text-main-2 {/* tb */
  color: #808080;
  font-size: 2.8em;/* 3.2 */
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-2 {/* tb */
  font-size: 3.6em;
}
.column-text-main-1 span, .column-text-main-2 span {/* tb */
  font-size: .6em;
}
.column-text-sub {/* tb */
  color: #000;
  font-size: 1.6em;
  line-height: 1.8;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-sub {/* tb */
  font-size: 2em;
}
.column-text-sub span {/* tb */
  font-size: .6em;
  vertical-align: top;
}
/* 画像と料金の外枠 */
.column-text-wrap {/* tb */
  display: flex;/* 横並び */
  flex-wrap: nowrap;/* 横並び */
  align-items: stretch;/* 縦の位置指定 */
}
/* 文字 月々 */
.vertical {/* tb */
  padding-left: 10px;
  color: #FF4F50;
  font-size: 3em;
  text-align: center;/* 縦書き中央揃え */
  writing-mode: vertical-rl;/* 縦書き */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.vertical {/* tb */
  font-size: 4em;
}
/* 文字 料金 */
.payment {/* tb */
  margin-left: 10px;/* 左の数字との空き */
  color: #FF4F50;
  font-size: 6.5em;
  line-height: 1;/* 指定がないと上にずれる */
  font-optical-sizing: auto;
  letter-spacing: -0.08em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.payment {/* tb */
  font-size: 9.5em;
}
.payment span {/* tb */
  padding-left: 5px;/* 左の数字との空き */
  font-size: .3em;
  letter-spacing: 0.05em;
}
.column-text-cap {/* tb */
  font-size: 1.4em;
  line-height: 1.5;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-cap {/* tb */
  font-size: 1.9em;
}
/* ルビ */
[data-ruby] {/* tb */
  position: relative;
}
[data-ruby]::before {/* tb */
  position: absolute;
  top: -1em;
  right: 0;
  left: 0;
  margin: auto;
  font-size: .4em;
  text-align: center;
  content: attr(data-ruby);
}
/* ルビ 読み上げ用 */
[data-ruby] rt {/* tb */
  display: none;
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* tb */
  width: 100% ;
  padding: 20px 10px;
  border-bottom: 1px solid #696969;
  background: #fff;
  color: #44ADE9;
}
/* 列 */
.service-wrap-inside-2 {/* tb */
  display: inline-block;
  position: relative;
  margin: 30px 0;
  text-align: center;
  vertical-align: top;/* 上揃え */
}
/* 行 横並び */
.service-box {/* tb */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
.service-box-2 {/* tb */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
/* 各項目 */
.service-box-inside-2 {/* tb */
  margin: 5px;
  padding: 10px 15px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #000;
  font-size: 1.4em;
  line-height: 1.2;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.service-box-inside-2 {/* tb */
  font-size: 1.7em;
}
.estimate-box {/* tb */
  display: inline-block;
  position: relative;
  margin: 15px;
  padding: 15px;/* 3列表示の空き 見積の枠にも使用 20 */
  border-radius: 15px;
  background: #F0F8FF;
  text-align: center;
}
.estimate-text {/* tb */
  margin: 5px 15px 3px .5em;
  padding-left: .5em;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ パンフレット ------*/
/* 外枠 */
.pamflet-wrap {/* tb */
  display: inline-block;
  position: relative;
  width: 92%;
  padding: 5px 0;
  text-align: center;
}
/* パンフレット画像 */
.pamflet-img img {/* tb */
  margin: 5px　0　10px;
  border: 1px solid #808080;
}
.pamflet-text {/* tb */
  display: inline-block;/* 中央揃え設定する */
  position: relative;
  padding: 10px !important;/* 必要 アイコンとの空き */
  color: #000;
  font-size: 1.5em;
  line-height: 1.8;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.pamflet-text {/* tb */
  font-size: 2em;
}
.pamflet-text a {/* tb */
  padding: 5px 0;
  border-bottom: solid 2px #44ADE9;
  color: #44ADE9;/* リンク全体で設定すると左も変わる */
  cursor: url('images/cursor-b.png'), pointer;
}
.pamflet-link-img a {/* tb */
  cursor: url('images/cursor-b-right.png'), pointer;
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* tb */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  padding-top: 30px;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* tb */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  margin: 0 30px 30px;/* 2行になったとき社名ロゴの下空きなし */
  font-size: 1.35em;/* 右側フォントサイズの基準 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* tb */
  font-size: 1.6em;/* 右側フォントサイズの基準 */
}
.telephone-number {/* tb */
  display: inline-block;
  position: relative;
  padding-top: 5px;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* tb */
  font-size: 2.22em;/* 数値下げる */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* tb */
  font-size: 0.7em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* tb */
  font-size: 0.7em;
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.company-logo {/* tb */
  display: inline-block;
  position: relative;
  margin-bottom: 30px;/* 必要 2列になったとき下空き */
  text-align: center;
}
.company-logo img {/* tb */
  width: 100%;
  z-index: 1000;
}
/* メールボタン案内 */
.footer-under-wrap {/* tb */
  width: 100%;
  border-top: 1px solid #696969;
  background: #fff;
}
.footer-under-text {/* tb */
  padding: 25px;
  font-size: 1.4em;
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* tb */
  font-size: 1.7em;
}

/*------ ページトップボタン ------*/
.page-top {/* tb */
  display: none !important;/* 必要 消えない */
}
/*------ フォームボタン ------*/
#form-button {/* tb */
  position: fixed;
  right: 23px;/* 右下 */
  bottom: 10px;/* マウスホバーがないので下へ */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* tb */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-left.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* tb */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(291px);/* iPhone別タブを開くと左にずれる */
}
}
/* 右の動き */
#form-button.RightMove {/* tb */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(160px);/* 右の文字が隠れる */
}
}
}

/* ここからスマートフォン -----------------------------------------------------------------*/
@media screen and (max-width: 440px) {/* sp */
/* iPhone17 Pro Max 440px */
/* Android 412px */

/* 画像切替 */
.hd {/* sp */
  display: none;
}
.pc{/* sp */
  display: none;
}
/* 文字 大きさ */
.text-size-title {/* sp */
  font-size: 2.1em;/* 2.4 */
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* sp */
  font-size: 2.6em;/* 3.4 */
}
.text-size-main {/* sp */
  font-size: 1.8em;/* 2 */
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* sp */
  font-size: 2em;/* 2.8 */
}
.text-size-sub {/* sp */
  font-size: 1.4em;/* 1.5 */
  line-height: 1.8;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* sp */
  font-size: 1.7em;/* 2 */
}
.text-size-cap {/* sp */
  margin: 10px;
  font-size: 1.2em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* sp */
  font-size: 1.5em;
}

/*------ レイアウト ------*/
.main-wrap {/* sp */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 5% 5% 3% ;/* 枠の空き */
  background: url('images/acordion-back.png') no-repeat;
  background-size: cover;
}
.title-wrap {/* sp */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 20px 0 10px;
}
.title-wrap-inside {/* sp */
  display: block;/* 文字数の幅に合わせる */
  margin-bottom: 5px;
  font-size: .8em;
}
.title-sub-text {/* sp */
  display: inline-block;
  position: relative;
  width: 85%;
  font-size: 1.4em;/* 1.6 */
  line-height: 1.8;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.title-sub-text {/* sp */
  font-size: 1.7em;/* 2 */
  line-height: 1.8;
}
.text-sub-wrap {/* sp */
  display: inline-block;
  position: relative;
  width: 85%;
  margin-bottom: 20px;
  line-height: 1.6;
}
.challenges-wrap {/* sp */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 98%;
  margin-top: 10px;
  padding: 15px 25px;
  border-radius: 30px;
  background: #fff;
  text-align: left;
}
.challenges-wrap:before {/* sp */
  content: "お客さまの声";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -20px;
  left: -10px;
  padding: 5px 10px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #FF4F50;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap {/* sp */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 98%;/* challengesと同じ */
  margin: 30px 0 10px;
  padding: 15px 25px;
  border-radius: 30px;
  background: #fff;
  text-align: left;
}
.solusions-wrap:before {/* sp */
  content: "四Bハウジングサービスのご提案";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -20px;
  left: -10px;
  padding: 5px 10px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #44ADE9;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap:after {/* sp */
  position: absolute;
  top: 100%;/* 吹き出し本体の下に配置 */
  left: 50%;
  z-index: 1;
  margin-left: -20px;/* 三角の幅の半分 */
  border: 20px solid transparent;/* 数値増えると右に広がる */
  border-top: 20px solid #fff;/* 数値増えると下に広がる */
  content: "";
}
.solusions-wrap-inside {/* sp */
  margin-top: 10px;
  font-size: .8em;
  line-height: 1.6;
  text-align: left;
}
/* 段組横並び 背景あり */
.solusions-inside-column-flex {/* sp */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  margin-top: 5px;
  padding: 4% 0 0;/* 枠の空き */
}
.solusions-inside-column-block {/* sp */
  display: block;/* 縦並び */
  position: relative;
  padding: 3% 2% 0;/* 枠の空き */
  text-align: center;
}
.column-box-1 {/* sp */
  display: inline-block;
  position: relative;
  padding: 10px;/* 画像と文字の間 */
  text-align: center;
}
.column-box-2 {/* sp */
  display: inline-block;
  position: relative;
  margin: 5px;
  padding: 20px;/* 3列表示の空き 見積の枠にも使用 */
  border-radius: 15px;
  background: #fff;
  text-align: center;
}
.column-text-main-1 {/* sp */
  font-size: 1.9em;/* 2.4 */
  line-height: 1.6;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-1 {/* sp */
  font-size: 2.4em;/* 3.1 */
}
.column-text-main-2 {/* sp */
  color: #808080;
  font-size: 2.6em;/* 2.8 */
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-2 {/* sp */
  font-size: 3.2em;/* 3.6 */
}
.column-text-main-1 span, .column-text-main-2 span {/* sp */
  font-size: .6em;
}
.column-text-sub {/* sp */
  color: #000;
  font-size: 1.4em;/* 1.6 */
  line-height: 1.8;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-sub {/* sp */
  font-size: 1.7em;/* 2 */
}
.column-text-sub span {/* sp */
  font-size: .6em;
  vertical-align: top;
}
/* 画像と料金の外枠 */
.column-text-wrap {/* sp */
  display: flex;/* 横並び */
  flex-wrap: nowrap;/* 横並び */
  align-items: stretch;/* 縦の位置指定 */
}
/* 文字 月々 */
.vertical {/* sp */
  padding-left: 10px;
  color: #FF4F50;
  font-size: 2.2em;/* 3 */
  text-align: center;/* 縦書き中央揃え */
  writing-mode: vertical-rl;/* 縦書き */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.vertical {/* sp */
  font-size: 2.5em;/* 4 */
}
/* 文字 料金 */
.payment {/* sp */
  margin-left: 10px;/* 左の数字との空き */
  color: #FF4F50;
  font-size: 4.6em;/* 6.5 */
  line-height: 1;/* 指定がないと上にずれる */
  font-optical-sizing: auto;
  letter-spacing: -0.08em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.payment {/* sp */
  font-size: 5.8em;/* 9.5 */
}
.payment span {/* sp */
  padding-left: 5px;/* 左の数字との空き */
  font-size: .3em;
  letter-spacing: 0.05em;
}
.column-text-cap {/* sp */
  font-size: 1.05em;/* 1.4 */
  line-height: 1.5;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-cap {/* sp */
  font-size: 1.3em;/* 1.9 */
}
/* ルビ */
[data-ruby] {/* sp */
  position: relative;
}
[data-ruby]::before {/* sp */
  position: absolute;
  top: -1em;
  right: 0;
  left: 0;
  margin: auto;
  font-size: .4em;
  text-align: center;
  content: attr(data-ruby);
}
/* ルビ 読み上げ用 */
[data-ruby] rt {/* sp */
  display: none;
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* sp */
  width: 100% ;
  padding: 10px;
  border-bottom: 1px solid #696969;
  background: #fff;
  color: #44ADE9;
}
/* 見出し枠 */
.service-title-wrap {/* sp */
  width: 100%;
  padding: 0 10px 10px;
  background: #F0F8FF;
  color: #44ADE9;
}
/* 列 */
.service-wrap-inside-2 {/* sp */
  display: inline-block;
  position: relative;
  margin: 15px 0 10px;
  text-align: center;
  vertical-align: top;/* 上揃え */
}
/* 行 横並び */
.service-box {/* tb */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
.service-box-2 {/* sp */
  display: inline-block;
  position: relative;
  width: 80%;
}
/* 各項目 */
.service-box-inside-2 {/* sp */
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #000;
  font-size: 1em;/* 1.3 */
  line-height: 1.2;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.service-box-inside-2 {/* sp */
  font-size: 1.6em;/* 1.8 */
}
.estimate-box {/* sp */
  display: inline-block;
  position: relative;
  margin: 15px 0 10px;
  padding: 15px;/* 3列表示の空き 見積の枠にも使用 20 */
  border-radius: 15px;
  background: #F0F8FF;
  text-align: center;
}
.estimate-text {/* sp */
  width: 100%;
  margin: 5px 15px 5px .5em;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ パンフレット ------*/
/* 外枠 */
.pamflet-wrap {/* sp */
  display: inline-block;
  position: relative;
  width: 92%;
  text-align: center !important;/* 必要 サファリ左寄せになる */
}
/* パンフレット画像 */
.pamflet-img img{/* sp */
  margin: 5px　0　10px;
  border: 1px solid #808080;
}
.pamflet-text {/* sp */
  display: inline-block;/* 中央揃え設定する */
  position: relative;
  padding: 10px 0 !important;/* 必要 アイコンとの空き */
  color: #000;
  font-size: 1.3em;
  line-height: 1.8;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.pamflet-text {/* sp */
  font-size: 1.5em;/* 2 */
}
.pamflet-text a {/* sp */
  padding: 5px 0;
  border-bottom: solid 2px #44ADE9;
  color: #44ADE9;/* リンク全体で設定すると左も変わる */
  cursor: url('images/cursor-b.png'), pointer;
}
.pamflet-link-img a {/* sp */
  cursor: url('images/cursor-b-right.png'), pointer;
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* sp */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  padding-top: 25px;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* sp */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  margin: 0 30px 20px;/* 2行になったとき社名ロゴの下空きなし */
  font-size: 1.35em;/* 右側フォントサイズの基準 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* sp */
  font-size: 1.5em;/* 1.6 */
}
.telephone-number {/* sp */
  display: inline-block;
  position: relative;
  margin-top: 3px;
  font-weight: bold;
  font-size: 2.2em;/* 2.6 */
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* sp */
  font-size: 1.96em;/* 2.22 */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* sp */
  font-size: .6em;/* .7 */
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* sp */
  font-size: .59em;/* sp */
  line-height: 1.5em;/* 1.2 */
}
.company-logo {/* sp */
  display: inline-block;
  position: relative;
  margin-bottom: 20px;/* 1列で下空き */
  text-align: center;
}
.company-logo img {/* sp */
  width: 83% !important;
  z-index: 1000;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.company-logo img {/* sp */
  width: 77% !important;/* 必要 サファリ縮小しない */
  z-index: 1000;
}
/* メールボタン案内 */
.footer-under-wrap {/* sp */
  width: 100%;
  border-top: 1px solid #696969;
  background: #fff;
}
.footer-under-text {/* sp */
  padding: 15px 10px;
  font-size: 1.4em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* sp */
  font-size: 1.6em;/* 1.9 */
}

/*------ ページトップボタン ------*/
.page-top {/* sp */
  display: none !important;/* 必要 消えない */
}
/*------ フォームボタン ------*/
#form-button {/* sp */
  position: fixed;
  right: 8px;/* 右下 */
  bottom: 10px;/* マウスホバーがないので下へ */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* sp */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-left.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* sp */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(291px);/* iPhone別タブを開くと左にずれる */
}
}
/* 右の動き */
#form-button.RightMove {/* sp */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(145px);/* 右の文字が隠れる */
}
}
}