@charset "utf-8";
main {
  padding: 0 0 0; /*上、左右、下への余白。画面幅100%＝100vwです。*/
  line-height: 1.5;
  color: #696057;
}
main .container-pages {
  padding: 0 0 0; /*上、左右、下への余白。画面幅100%＝100vwです。*/
  margin-top: 0;
}
/* 初期状態では改行しない */
.sp-br {
  display: none;
}
@media screen and (max-width: 700px) {
  /* スマホサイズ以下でだけ改行させる */
  .sp-br {
    display: block;
  }
  /* スマホサイズ以下でだけ非表示にする */
  .sp-none {
    display: none;
  }
  .sp-small {
	  font-size: 0.7em;
  }
}
/* -----header----- */
header {
  padding-top: 10px;
  height: 70px;
}
header nav ul li a {
  color: #625d58;
  text-decoration: none;
}
/*  PCデザイン  */
#logo {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  left: 4.5vw;
  top: 4vw;
  width: 10vw; /* ロゴ画像の幅 */
}
#logo img {
  display: block;
  width: 100%;
  height: auto;
}
#logo h1 {
  font-size: 9px;
  line-height: 1.4;
  margin-top: 0.6em;
  font-weight: bold;
}
/* --- スマホ用 --- */
@media screen and (max-width: 640px) {
  #logo {
    position: static;
    width: auto;
    text-align: left;
    margin-left: 10px;
    top: 0;
    left: 0;
  }
  #logo img {
    width: auto;
    height: 30px;
  }
  #logo h1 {
    font-size: 10px;
    line-height: 1.5;
    margin-top: 0.5em;
    white-space: nowrap;
  }
}
/*---その土地にガレージハウス(about)---*/
.box1 {
  overflow-x: visible;
  position: relative;
  padding: var(--space-large); /*ボックス内の余白。冒頭にあるspace-largeを読み込みます。*/
  margin-top: 10vw;
  padding-bottom: 10vw;
  background-color: #e4e4dd;
  color: #625d58;
}
/*画像ブロック内の１枚目の写真への追加指定*/
.box1 .image img:nth-of-type(1) {
  width: 95%; /*画像の幅*/
}
.about-box {
  overflow-x: visible;
  position: relative;
  background: #F5F4EC; /*背景色*/
  padding: var(--space-large); /*ボックス内の余白。冒頭にあるspace-largeを読み込みます。*/
  margin-top: 1vw;
}
.about-box img {
  border-radius: 8px;
}
@media screen and (min-width:600px) {
  .about-box {
    border-radius: 15vw 0 15vw 0;
  }
}
@media screen and (max-width: 768px) {
  .about .fa-check-list {
    margin: 3em 0 0;
  }
  .about-box .cols-5-5 {
    flex-direction: column-reverse;
  }
  .about-box .cols-5-5-box {
    width: 100%;
  }
}
/*--- 【実例で見るビフォーアフター】---*/
.case .text {
  color: #827c75;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .case .list-half .image {
    width: 100%;
    margin: 0 auto; /*画像を中央に配置*/
    padding: 2vw 0; /*上下、左右への余白。画像の上下に隙間をあけます。*/
  }
}
/*---【10の強みで、他にはない価値を。】---*/
.merit {
/*  background-color: #e4e4dd; */
}
.list-parts {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f6f4;
  transition: box-shadow 0.2s, transform 0.2s;
  padding: 15px;
}
.list-parts:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  background-color: #fff;
}
.merit .list-parts:hover {
  box-shadow: none !important;
  transform: none !important;
  background-color: #f6f6f4 !important;
}
@media screen and (max-width: 768px) {
  .merit .list-parts h4 {
    line-height: 130%;
    margin-bottom: 8px;
    font-size: 1em;
  }
}
.fixed_btn2 {
  position: fixed;
  bottom: 0px;
  right: 80px;
  padding: 15px 60px;
}
/*----- ガレージハウス価格表-----*/
.price .price-tipe {
  background-color: #625d58;
  padding: 5px;
  margin-right: 10px;
  font-size: 80%;
  color: #fff;
}
.price_title_en {
  color: #625d58;
  font-size: 120%;
}
.price_title_s {
  font-size: 80%;
  margin-left: 100px;
  color: #625d58;
}
.price .price_text {
  margin-top: 14px;
  color: #625d58;
  margin-bottom: 20px;
}
/* ボックス全体 */
.price .list-grid1 .list {
  position: relative;
  margin-bottom: 4rem; /* 下にバッジ分の余白を確保 */
}
/* 四角バッジ */
.price .list .price-badge {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  padding: 0.2em 1.5em;
  background-color: #fdf4a8;
  color: #625d58;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 2;
  text-align: center;
  border-radius: 1px;
  box-sizing: border-box;
  /* 親要素と合わせるためにrelativeは不要 */
}
/* 左の枠線 */
.price .list .price-badge::before {
  content: '';
  position: absolute;
  top: -1px; /* 上の線の位置 */
  left: -3px;
  width: 10px;
  height: calc(100% - 6px);
  border-left: 1px solid #625d58;
  border-top: 1px solid #625d58;
  border-bottom: 1px solid #625d58;
  box-sizing: border-box;
}
/* 右の枠線 */
.price .list .price-badge::after {
  content: '';
  position: absolute;
  top: -1px; /* 上の線の位置 */
  right: 3px;
  width: 10px;
  height: calc(100% - 6px);
  border-right: 1px solid #625d58;
  border-top: 1px solid #625d58;
  border-bottom: 1px solid #625d58;
  box-sizing: border-box;
}
.price .list .price-badge span {
  font-size: 1.3rem;
  margin-right: 3px;
}
/* -----よくある質問----- */
.f-a-q {
  color: #706f6f;
}
.f-a-q .openclose2-parts {
  border-radius: 10px;
}
/* -----ジャーナル-----　*/
.journal_waku {
  margin: 0em 0;
  position: relative;
  padding: 3em 2em;
  border-top: solid 1px #a7a4a1;
  border-bottom: solid 1px #a7a4a1;
  background-color: #fff;
  box-sizing: border-box;
}
.journal_waku:before, .journal_waku:after {
  content: '';
  position: absolute;
  top: -10px;
  width: 1px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #a7a4a1;
}
.journal_waku:before {
  left: 10px;
}
.journal_waku:after {
  right: 10px;
}
.journal_waku p {
  margin: 0;
  padding: 0;
}
.journal .list-grid7-parts .list-parts h4 {
  line-height: 130%;
}
.journal .list-grid7-parts {
  margin-left: 30px;
  margin-right: 30px;
}
@media screen and (max-width: 800px) {
  .journal_waku {
    padding: 0;
    background-color: transparent;
    border-top: none;
    border-bottom: none;
  }
  .journal_waku:before, .journal_waku:after {
    display: none;
  }
  .journal .list-grid7-parts {
    margin-left: 0;
    margin-right: 0;
  }
}
/* -----アパート投資比較-----　*/
.comparison {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .comparison .cols-6-4 {
    flex-direction: column-reverse;
  }
  .comparison .cols-6-4-image {
    width: 100%;
  }
}
/* -----こんな土地に建てられます-----　*/
/* -----メディア掲載-----　*/
/*施工実績*/
/*各スライドショーブロックを囲むブロック*/
.achievements .slide-thumbnail1 {
  margin-bottom: 1vw;
}
/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
  display: flex;
  gap: 1rem; /* 子要素（画像）同士の間隔 */
}
/*画像*/
.achievements .slide-thumbnail1 .img img {
  padding: 0 0;
}
/*偶数番目の画像の垂直位置を少しずらす。垂直位置を並べたいならこのブロックを削除。*/
.achievements .slide-thumbnail1 .img div:nth-of-type(even) {
  transform: none;
}
/*右から左へ、左から右へ、のアニメーション*/
.achievements .slide-thumbnail1 .rtl, .slide-thumbnail1 .ltr {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.achievements .slide-thumbnail1 .rtl {
  animation-name: slide-rtl;
}
.achievements .slide-thumbnail1 .ltr {
  animation-name: slide-ltr;
}
@keyframes slide-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes slide-ltr {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.achievements list-yoko-scroll .list {
  width: 60%;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
/*【お客様の声】*/
.voice h4 {
  line-height: 1.4;
  margin-bottom: 1em;
}
.voice .title-speech-bubble {
  border: 1px solid #a7a4a1;
  padding: 0.5em 0.5em;
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
  background-color: #fff;
}
/* 下の棒（白背景と同じ色） */
.voice .title-speech-bubble::before {
  content: '';
  background-color: #fafaf6;
  width: 20px;
  height: 3px;
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
}
/* 下の斜め線（三角の一部） */
.voice.title-speech-bubble::after {
  content: '';
  background-color: #a7a4a1;
  width: 20px;
  height: 3px;
  transform: translateX(-50%) rotate(50deg);
  position: absolute;
  left: 50%;
  bottom: -10px;
}
.voice .list-yoko-scroll .list {
  background-color: rgba(228, 228, 221, 0.3);
  margin-right: 10px;
}
/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {
  /*ブロック内の１個あたり*/
  .list-yoko-scroll .list {
    width: 33%;
    padding: 2rem;
  }
}
/* -----土地購入から始める、ガレージハウス経営-----　*/
/* -----解体から始まる、理想のガレージハウス計画-----　*/
.demolition h2.title-bicolor {
  flex-direction: column;
}
/* -----法人・事業者さま向けのご案内-----　*/
/*【ギャラリー(gallery)】*/
/*縦書きにする指定*/
.gallery .title-bg h2 .tate {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;
}
.gallery .title-bg h2 {
  font-weight: normal;
  display: flex;
  flex-direction:
    align-items: center;
  padding-bottom: 1vw;
}
/* 建築相談と賃貸　*/
/*左側ボックスの背景*/
.list-c2 .list.image1 {
  background: url("../images/how_001.png") no-repeat center center / cover #827c75;
}
/*右側ボックスの背景*/
.list-c2 .list.image2 {
  background: url("../images/rent_003.png") no-repeat center center / cover #6b8b8d;
}
@media screen and (max-width: 768px) {
  .case, .partner, .demolition, .buy, .achievements, .media, .how, .price, .f-a-q, .comparison, .voice, .download .journal {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
/*------フッター固定メニュー------*/
#bottom_menu {
  position: fixed;
  z-index: 9999;
  padding-left: 0px;
  padding-right: 0px;
}
#bottom_menu a {
  display: flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  color: white;
  font-size: 0.9em;
  padding: 0.6em 1em;
  transition: background 0.3s;
  border-radius: 4px 0 0 4px;
}
#bottom_menu a:hover {
  opacity: 0.9;
}
/* 個別カラー */
.btn-tel {
  background-color: #bf9c00;
}
.btn-tel:hover {
  background-color: #cfb540;
}
.btn-line {
  background-color: #6fbf00;
}
.btn-line:hover {
  background-color: #93cf40;
}
.btn-mail {
  background-color: #6b8b8d;
}
.btn-mail:hover {
  background-color: #90a8aa;
}
/* ▼ モバイル：横並び下部固定 */
@media (max-width: 768px) {
  #bottom_menu {
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #f8f9f6;
  }
  #bottom_menu a {
    flex: 1;
    justify-content: center;
    font-size: 0.8em;
    padding: 0.8em 0;
    border-radius: 0;
    gap: 0.2em;
    flex-direction: column;
  }
  #bottom_menu a i {
    font-size: 1.8em;
    display: block;
    margin-bottom: 0.3em;
  }
}
/* ▼ PC：右下に縦並び・縦書き */
@media (min-width: 769px) {
  #bottom_menu {
    bottom: 0;
    right: 0;
    top: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: transparent;
    padding: 0.5em;
  }
  #bottom_menu a {
    writing-mode: vertical-rl;
    text-align: center;
    margin-bottom: 0.5em;
    font-size: 1em;
    line-height: 1.2;
    padding: 1em 0.5em;
  }
  #bottom_menu a i {
    margin-bottom: 0.4em;
    display: block;
  }
}
/*------フッター------*/
.footer {
  background-color: #e0dedd;
  padding: 2em 1em 1em;
  font-size: 14px;
  color: #625d58;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 768px;
  margin: 0 auto;
  gap: 2em;
  line-height: 1.5;
}
.footer-column1 {
  flex: 1 1 20%;
  min-width: 200px;
  margin-right: 3em;
  text-align: center;
}
.footer-column1 .company-banner img {
  max-width: 80%;
  height: auto;
  display: block;
}
.footer-column2 {
  flex: 1 1 23%;
  min-width: 200px;
  padding-top: 3em;
}
.footer-column3 {
  flex: 1 1 30%;
}
.footer-column3 img {
  width: 90%;
  height: auto;
  display: block;
  margin: 1em auto;
}
.footer-inner h4 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
  color: #625d58;
  font-weight: bold;
}
.footer-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-inner ul li {
  margin-bottom: 0.3em;
}
.footer-inner ul li a {
  text-decoration: none;
  color: #333;
}
.footer-inner ul li a:hover {
  text-decoration: underline;
}
.company-banner img {
  max-width: 95%;
  margin: 1em auto;
  height: auto;
  display: block;
}
.footer-column3 p {
  line-height: 120%;
}
.footer-column3 img {
  width: 90%; /* ← 常に幅90%に固定 */
  height: auto;
  display: block;
  margin: 1em auto; /* 中央寄せ＆余白 */
}
.footer-hr {
  height: 5px;
  background-image: linear-gradient(90deg, hsla(0, 0%, 50%, 1), hsla(0, 0%, 50%, 1) 33.33%, hsla(0, 0%, 50%, 0) 33.33%, hsla(0, 0%, 50%, 0) 100%);
  background-size: 3px 100%;
  width: 60%;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    padding: 2em;
  }
  .footer-column1, .footer-column2, .footer-column3 {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 1.5em;
  }
  .footer-column1 {
    flex-direction: column;
    margin-right: 0;
  }
}
.three-columns {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}
.three-columns .column01 {
  flex: 1 1 30%;
  padding: 1em;
  box-sizing: border-box;
  border-radius: 8px;
}
.three-columns .column01 img {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.three-columns ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .three-columns .column01 {
    flex: 1 1 100%;
  }
}
/*------コピーライト------*/
.footer-copy {
  text-align: center;
  font-size: 12px;
  margin-top: 0;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #e0dedd;
}
/* ----- フッターCTA ----- */
.cta-section {
  background: #d9d4ce;
  padding: 3em 1.5em;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}
.cta-section-box {
  max-width: 1200px;
  margin: 0 auto;
}
.cta-section-box h3 {
  font-weight: bold;
}
.cta-section .text-outer {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 3em;
}
.cta-section .text-outer span {
  font-weight: bold;
  font-size: 22px;
  display: inline-block;
}
.cta-section-two-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2em;
}

.contact-column {
  flex: 1 1 32%;
  background-color: #ffffff;
  padding: 2em;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.contact-column h3 {
  font-size: 1.2em;
  margin-bottom: 0.8em;
  color: #827c75;
}
.tel-number {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #6b8b8d;
}
.tel-number + .tel-number {
  margin-top: 0.3em;
}
.tel-number a {
  text-decoration: none;
  color: inherit;
}
.tel-number .area {
  font-size: 0.5em;
  color: #666;
  display: block;
}
.contact-column .intro {
  font-size: 0.95em;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1em;
}
.hours, .note {
  font-size: 0.8em;
  color: #555;
}
.btn {
  display: inline-block;
  padding: 0.75em 2em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
.btn-primary {
  background-color: #6b8b8d;
  color: #fff;
}
.btn-primary:hover {
  background-color: #b4845c;
}
.text.c {
  text-align: center;
  margin-top: 2em;
}
.text.c a {
  text-decoration: underline;
}
.text.c a i {
  margin-right: 0.5em;
}
.image-c img {
  margin: 2em 0;
}

/* takebayashi */
/* ----- コンテンツCTA ----- */
.s-cta-section {
  padding: 3em 1.5em;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}
.s-cta-section-box {
  max-width: 700px;
  margin: 0 auto;
}
.s-contact-column {
  flex: 1 1 32%;
  background-color: #ffffff;
  padding: 0;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tel-number .s-area {
  font-size: 0.5em;
  color: #666;
	padding-right: 20px;
}
.s-btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .cta-section-two-column {
    flex-direction: column;
  }
  .contact-column {
    flex: 1 1 100%;
  }
  .btn {
    font-size: 1em;
    width: 100%;
    max-width: 320px;
  }
  .s-contact-column {
    flex: 1 1 100%;
  }
	.tel-number .area {
	  font-size: 0.5em;
	  color: #666;
	  display: block;
	}
}