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

/*------ プリント pcサイズ ------*/
@media print {

@page {
  margin: 0mm;/* ページ上下の文字を消す */
}

header, footer {
  display: none;
}
.page-top {/* 非表示 */
  display: none;
}
#form-button img {/* 非表示 */
  display: none;
}

/* 共通要素 -----------------------------------------------------------------------------*/
html {/* 文字サイズレスポンシブ使用不可 */
  scroll-behavior: smooth;/* ゆっくりスクロール（速度変えられない） */
  font-feature-settings: palt;/* 文字詰め */
  font-size: 6.5pt;/* 印刷解像度が異なっても同じ大きさ */
  overflow-y: scroll;/* style.cssにあり */
}
/* 画像 */
img {
  width: 45% !important;
  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;
  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;/* 縦の位置指定 */
  margin-top: 5px;
}
.link-button-text {
  border-bottom: solid 2px #44ADE9;
  color: #44ADE9;
  line-height: 1.5 !important;/* 必要 サファリ */
}
.link-button-text:hover {
  cursor: url('../img/product/housing/cursor-b.png'), pointer;
}
.link-button img {
  display: none;
}

/* 見積 */
.estimate-wrap {
  display: block;
}
/* 画像切替 */
.hd{
  display: none;
}
/* 文字 大きさ */
.text-size-title {/* sp */
  font-size: 2.1em;
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* sp */
  font-size: 2.6em;
}
.text-size-main {/* sp */
  font-size: 1.8em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* sp */
  font-size: 2em;
}
.text-size-sub {/* sp */
  font-size: 1.4em;
  line-height: 1.8;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* sp */
  font-size: 1.7em;
}
.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 {
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  z-index: 998;/* 左の項目表示される */
  padding: 4% 1%;/* 枠の空き */
  background: url('../img/product/housing/acordion-back.png') no-repeat;
  background-size: cover;
}
.title-wrap {
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 15px 0 10px;
}
.title-wrap-inside {
  display: block;/* 文字数の幅に合わせる */
  font-size: .7em;
}
/* 問いかけ文章 */
.title-sub-wrap {
  width: 100%;
  margin-top: 20px;
  padding: 3px 0;
  border-radius: 10px;
  background-color: rgb(68 204 255 / .6);/* #66CCFF リンクホバーと同じ */
  color: #fff;
  font-size: 2em;
  line-height: 1.4;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.title-sub-wrap {
  font-size: 3em;
}
.text-sub-wrap {
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
  padding: 0 7%;
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-sub-wrap {
  padding: 0 10%;
}
.challenges-wrap {
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 95%;
  margin: 0 auto;
  padding: 15px 25px;
  border-radius: 25px;
  background: #fff;
  text-align: left;
  break-before: page;/* 手前で改行 */
}
.challenges-wrap:before {
  content: "お客さまの声"; /* 文字を表示する場合、空でも必須 */
  position: absolute;
  top: -20px;
  left: -15px;
  padding: 5px 15px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #FF4F50;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap:after {
  position: absolute;
  top: 100%;/* 吹き出し本体の下に配置 */
  left: 50%;
  z-index: 1;
  margin-left: -30px;/* 三角の幅の半分 */
  border: 30px solid transparent;/* 数値増えると右に広がる */
  border-top: 30px solid #fff;/* 数値増えると下に広がる */
  content: "";
}
.solusions-wrap {
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 95%;/* challengesと同じ */
  margin: 30px 0;
  padding: 15px 25px;
  border-radius: 25px;
  background: #fff;
  text-align: left;
}
.solusions-wrap:before {
  content: "四Bハウジングサービスのご提案";/* 文字を表示する場合 空でも必須 */
  position: absolute;
  top: -20px;
  left: -15px;
  padding: 5px 15px;
  border-radius: 100vmax;/* 半円 */
  background: #fff;
  color: #44ADE9;
  font-size: .7em;
  line-height: 1.5;
}
.solusions-wrap:after {
  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 {
  margin-top: 5px;
  font-size: .7em;
  line-height: 1.6;
  text-align: left;
}
/* 段組横並び 背景あり */
.solusions-inside-column-flex {
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: center; 
  align-items: center;/* 縦の位置指定 */
  padding: 15px 0 0;/* 枠の空き */
}
.solusions-inside-column-block {
  display: block;/* 縦並び */
  position: relative;
  padding: 1%;/* 枠の空き */
  text-align: center;
}
.column-box-1 {
  display: inline-block;
  position: relative;
  text-align: center;
}
.column-box-2 {
  display: inline-block;
  position: relative;
  margin: 5px;
  padding: 10px 15px;/* 詰める 3列表示の空き 見積の枠にも使用 */
  border-radius: 15px;
  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;
  text-align: center;
}
.column-text-main-1 {
  font-size: 2.6em !important;
  line-height: 1.6;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-1 {
  font-size: 3.1em !important;
}
.column-text-main-2 {
  color: #808080;
  font-size: 2.4em !important;/* 2.6 */
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-main-2 {
  font-size: 4em !important;
}
.column-text-main-1 span, .column-text-main-2 span {
  font-size: .6em;
}
.column-text-sub {
  color: #000;
  font-size: 1.6em;
  line-height: 1.8;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-sub {
  font-size: 2em;
}
.column-text-sub span {
  font-size: .6em;
  vertical-align: top;
}
/* 画像と料金の外枠 */
.column-text-wrap {
  display: flex;/* 横並び */
  flex-wrap: wrap;/* 横並び */
  align-items: stretch;/* 縦の位置指定 */
}
/* 文字 月々 */
.vertical {
  padding-left: 20px;
  color: #FF4F50;
  font-size: 4em !important;
  text-align: center;/* 縦書き中央揃え */
  writing-mode: vertical-rl;/* 縦書き */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.vertical {
  font-size: 5em !important;
}
/* 文字 料金 */
.payment {
  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 {
  font-size: 11em !important;
}
.payment span {
  padding-left: 5px;/* 左の数字との空き */
  font-size: 0.35em;
  letter-spacing: 0.05em;
}
.column-text-cap {
  font-size: 1.5em !important;
  line-height: 1.5;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.column-text-cap {
  font-size: 1.8em !important;
}
/* ルビ */
[data-ruby] {
  position: relative;
}
[data-ruby]::before {
  position: absolute;
  top: -1em;
  right: 0;
  left: 0;
  margin: auto;
  font-size: .4em;
  text-align: center;
  content: attr(data-ruby);
}
/* ルビ 読み上げ用 */
[data-ruby] rt {
  display: none;
}

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

/*------ パンフレット ------*/
/* 外枠 */
.pamflet-wrap {
  display: inline-block;
  position: relative;
  padding: 5px 0;
  text-align: center;
}
/* パンフレット画像*/
.pamflet-img img{
  margin: 5px 0 10px;
  border: 1px solid #808080;
}
.pamflet-text {
  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 {
  font-size: 2em;
}
.pamflet-text a {
  padding: 5px 0;
  border-bottom: solid 2px #44ADE9;
  color: #44ADE9;/* リンク全体で設定すると左も変わる */
  cursor: url('../img/product/housing/cursor-b.png'), pointer;
}
.pamflet-link-img a {
  display: none;
}

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