@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  list-style: none;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  /* background-color: #1c1c1c; */
  background-color: black;
  font-family: "ヒラギノ角ゴシック", "Avenir", "Helvetica Neue", "Helvetica",
    "Arial", "Hiragino Sans", "KozGoPr6N-Bold", "YuGothic", "Yu Gothic",
    "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic";
  color: #1c1c1c;
  overflow-x: hidden;
  font-size: 16px;
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: 0;
}

/* 共通 */

/* ハンバーガーメニューの中の文字最初は非表示 */
.nav-description {
  display: none; /* デフォルトでは非表示 */
}

.onlySp {
  display: none;
}

.onlyPc {
  display: block;
}

a {
  cursor: none;
  pointer-events: none;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

h1 {
  font-size: 18px;
  font-weight: 580;
}

h2 {
  font-size: 88px;
  font-weight: bold;
}

h3 {
  font-size: 52px;
}

h4 {
  font-size: 32px;
  font-weight: 500;
}

.text20 {
  font-size: 20px;
  font-weight: 400;
}

.text18 {
  font-size: 18px;
  font-weight: 400;
}

.text14 {
  font-size: 14px;
  font-weight: 200;
}

.text12 {
  font-size: 12px;
  /* font-weight: 400; */
}

/* 灰色 */
.grayColor {
  color: #828282;
}

/* 灰色たす太文字 About下など */
.grayBold {
  font-weight: bold;
  color: #828282;
}

.container {
  /* max-width: 1440px;*/
  margin: 0 auto;
  background-color: #e3e3e3;
}

main {
  width: 100%;
  height: 100%;
}

.inner {
  max-width: 980px;
  margin: 0 auto;
  /* border: 1px solid black; */
  text-align: left;
  position: relative;
  z-index: 2;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* テキストとSVGの間にスペースを設定 */
  padding: 8px 24px;
  background-color: transparent;
  border: 1px solid white;
  cursor: pointer;
  border-radius: 32px;
  margin-top: 35px;
}

.btn svg {
  fill: #e9e9e9; /* SVGの色を設定 */
  width: 12px; /* SVGの幅を設定 */
  height: 20px; /* SVGの高さを設定 */
}

.btn:hover {
  background-color: white; /* ホバー時の背景色を白に */
  color: #1c1c1c; /* ホバー時のテキストカラーを暗色に */
}

img {
  height: 280px;
  width: 422px;
}

/* ヘッダー */
.header {
  padding: 10px 24px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  /* background-color: #dd3434; */
}

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

.header {
  opacity: 1;
}

.header.visible {
  opacity: 1;
}

.header.hidden {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.header.visible a {
  cursor: pointer; /* カーソルをポインターに変更 */
  pointer-events: auto; /* インタラクションを可能にする */
}

/* .headerが透明の時には.nav-item aのhover効果を無効に */
.header:not(.visible) .nav-item a:hover {
  color: inherit; /* ホバー時の色変更をキャンセル */
  cursor: default;
}

/* .headerが表示されている時の.nav-item aのhover効果 */
.header.visible .nav-item a:hover {
  color: white; /* ホバー時の色を白に */
  cursor: pointer; /* ホバー時のカーソルをポインターに */
}

.logo a {
  font-size: 18px;
}

/* PC用ロゴとナビアイテムのSVG調整 */
.logo svg,
.nav-item svg {
  transform: translate(0px, 1px);
}

.navbar .nav-list {
  display: flex;
  gap: 60px;
}

.nav-item a {
  display: block;
  font-weight: 400;
}

.nav-item a:hover {
  color: white;
}

/* JAVAで操作 */
/* ヘッダーとハンバーガーメニューの色変更 */
.header.color-change,
.hamburger-menu.color-change div {
  color: white; /* 新しい背景色 */
}

.hamburger-menu.color-change div {
  background-color: white;
}

.header.color-change h1 svg path {
  background-color: #ffffff;
  fill: white;
}

/* ハンバーガーメニューとその擬似要素の背景色を変更 */
.hamburger-menu.color-change div,
.hamburger-menu.color-change div::before,
.hamburger-menu.color-change div::after {
  background-color: white;
}

/* キービジュアル */
.keyVisual {
  width: 100%;
  height: 85vh;
  position: relative;
}

.keyVisualTitle img {
  max-width: 750px;
  height: auto;
  width: 100%;
}
.keyVisualLogo {
  margin-bottom: 24px;
}
.obi {
  padding: 16px;
  background-color: #1c1c1c;
  color: white;
}

.obi svg:hover {
  cursor: pointer;
}

.keyVisual iframe {
  width: 100%;
  height: 100%;
  border: none;
  opacity: 1;
}

/* カーテン */
.iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1; /* 初期状態で完全に表示 */
  /* transition: opacity 0.5s ease;  */
  text-align: center;
  /* pointer-events: none; */
}

.iframe-overlay {
  animation: bgchange 10s ease infinite;
}

@keyframes bgchange {
  0% {
    background: rgba(0, 0, 0, 0.8);
  }
  50% {
    background: rgba(0, 0, 0, 0.4);
  }
  100% {
    background: rgba(0, 0, 0, 0.8);
  }
}

/*.keyVisualText p:nth-child(2) {
  margin-bottom: 20px; 
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.01em;
}*/

.keyVisualText p:nth-child(3) {
  margin-bottom: 20px; /* 再構築可能な次世代のコンテナハウスをご提案いたします。とbuttonの間 */
}

/* Aboutセクション*/
.aboutSec {
  position: relative;
  z-index: 1;
  padding-top: 100px;
  padding-bottom: 100px;
}

.aboutBGPic {
  position: absolute;
  top: 0; /* 上端から0の位置 */
  right: 0; /* 右端から0の位置 */
  width: 840px; /* 画像の幅を指定 */
  height: 430px; /* 画像の高さを指定 */
}

.aboutSec h3 {
}

/* 広さと間取り */
.spaceSec {
  margin-top: 64px;
}

.spaceFlex {
  display: flex;
}

/* 左側エリア */
.spaceLefArea {
  margin-right: 40px; /* 右側に40pxのマージンを追加 */
  height: 120px;
  width: 518px;
}

.spaceLefArea p:nth-child(1) {
  margin-bottom: 7px; /* 最初のpとh3の間 */
}

.spaceLefArea h4 {
  margin-bottom: 40px; /* h3と次のpの間 */
}

.spaceLefArea p:nth-child(3) {
  margin-bottom: 20px; /* 2番目のpの後の間 */
}

/* 83４以下で現れる */
.addText834 {
  display: none;
}

.spaceSec::after {
  content: ""; /* これが必要です */
  display: block; /* 表示をブロックレベルに設定 */
  border-bottom: 1px solid #828282;
  width: 100%; /* 幅をセクション全体に */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 内装と外装 */
.interiSec {
}

.interiSec h4 {
  margin-top: 7px;
}

.interiFlex {
  display: flex;
  margin-top: 40px;
}

/* 左側 */
.interiLeft {
  margin-right: 40px; /* 右側に40pxのマージンを追加 */
}

/* 右側 */
.interiRight {
}

/* 外装 */
.outeriFlex {
  display: flex;
  margin-top: 50px;
}

/* 左 */
.outeriLeft {
  margin-right: 40px; /* 右側に40pxのマージンを追加 */
  height: 120px;
  width: 518px;
}

.outeriLeft p:nth-child(2) {
  margin-top: 20px; /* 最初のp (restructure + -able) と次のpの間 */
}

/* 右 */

.interiSec::after {
  content: ""; /* これが必要です */
  display: block; /* 表示をブロックレベルに設定 */
  border-bottom: 1px solid #828282;
  width: 100%; /* 幅をセクション全体に */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 住み心地 */
.comfySec {
}

.comfySec > p:first-child {
  margin-bottom: 4px; /* 最初のpタグの下マージン */
}

.comfySec h4 {
  margin-top: 4px;
  margin-bottom: 24px;
}

.comfySec > p:last-child {
  margin-top: 24px; /* 最後のpタグの上マージン */
  height: auto; /* 高さは内容に基づいて自動調整 */
  width: 559px; /* 幅を指定 */
}

.comfySec::after {
  content: ""; /* これが必要です */
  display: block; /* 表示をブロックレベルに設定 */
  border-bottom: 1px solid #828282;
  width: 100%; /* 幅をセクション全体に */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 強度や耐久性 */

.strengthSec h4 {
  margin-top: 5px;
}

.strengthFlex {
  display: flex;
  margin-top: 40px;
}

/* 左側 */
.strengthLeft {
  margin-right: 40px;
}

/* 右側 */
.strengthRight {
  height: 264px;
  width: 518px;
}

/* 耐久性 */
.duraFlex {
  display: flex;
  margin-top: 50px;
}

/* 左側 */
.duraLeft {
  height: 264px;
  width: 518px;
  margin-right: 40px;
}

.duraLeft p:nth-child(2) {
  margin-top: 20px; /* 最初のpとh3の間 */
}

/* 右 */

.strengthSec::after {
  content: ""; /* これが必要です */
  display: block; /* 表示をブロックレベルに設定 */
  border-bottom: 1px solid #828282;
  width: 100%; /* 幅をセクション全体に */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 固定資産税 */

.propertySec h4 {
  margin-top: 4px;
}

.propertySec p {
  margin-top: 24px;
}

.propertySec::after {
  content: ""; /* これが必要です */
  display: block; /* 表示をブロックレベルに設定 */
  border-bottom: 1px solid #828282;
  width: 100%; /* 幅をセクション全体に */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 建築基準法 */

.buildSec h4 {
  margin-top: 4px;
}

.buildSec p {
  margin-top: 24px;
}

/* 警告英語 */
.warningSec {
  margin-top: 60px;
  color: #828282;
}

/* ケーススタディーセクション */
.caseStudySec {
  background-color: #e9e9e9;
  padding-top: 100px;
  padding-bottom: 100px;
}

.caseFlex {
  width: 100%;
  margin-top: 40px;
}

.photoGalleryFull {
  width: 100%;
  /* max-width: 980px; */
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.photoGalleryFull img {
  width: 100%;
  height: auto;
}

.photoGalleryFull li {
  width: calc(50% - 10px);
}

.caseStudySec .inner p {
  margin-top: 40px;
}

.caseStudySec .inner p.grayBold {
  margin-top: 0;
}

.caseStudySec .warningSec {
  margin-top: 24px;
}

/* ニュースセクション */

.newsSec {
  margin-top: 100px;
  padding-bottom: 60px;
}

.newsSec p {
  margin-bottom: 54px;
}

.instaFlex {
  margin-top: 52px;
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
}

/* .instaSquare {
  height: 313px;
  width: 313px;
  background-color: white;
  display: flex;
  justify-content: center; 
  align-items: center; 
} */

.snapwidget-widget {
  border: none;
  overflow: hidden;
  width: 100%;
  transform: scale(2.2);
  transform-origin: top center;
}

/* モデルルームセクション */

.modelSec {
  padding-top: 100px;
  padding-bottom: 100px;
  background-image: url("image/modelroom_bg.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover; /* 背景画像を要素のサイズに合わせて調整 */
  /* height: 597px; */
  width: 100%;
  /* z-index: -1; */
  color: white;
}

.modelSec img {
  width: 529px;
  height: 397px;
}

.modelFlex {
  display: flex;
  align-items: center;
}

/* 左側 */
.modelLeft {
  margin-right: 40px;
  text-align: left;
}

.modelLeft p:nth-child(3) {
  margin-top: 40px;
}

.contactContainer {
  margin-top: 40px;
  border: 1px solid white;
  padding: 24px 57px;
}

.contactContainer p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}

.contactContainer svg {
  fill: white; /* または #FFFFFF */
}

.contactContainer p:nth-child(1) {
  justify-content: left; /* 左から始める */
  transform: translateX(40px);
  color: white;
}

.modelRight {
}

/* 834以下で現れる */
.addModelTex834 {
  display: none;
}

/* フッター */
footer {
  padding-top: 100px;
  padding-bottom: 24px;
  background-color: #1c1c1c;
  color: white;
  text-align: center;
  height: 100%;
}

footer h4 {
  margin-bottom: 40px;
  font-size: 48px;
  font-weight: 400;
}

footer .inner p:last-child {
  text-align: center; /* 最後のpタグのみ中央揃え */
  margin-top: 64px; /* 最後の要素なのでマージンは不要 */
}

@media only screen and (max-width: 980px) {
  .inner {
    padding: 0 16px;
  }
}

/* 〜〜〜パッド834〜〜〜〜〜〜〜 */
@media only screen and (max-width: 834px) {
  /* 共通834 */

  .onlySp {
    display: block;
  }

  .onlyPc {
    display: none;
  }

  .container {
    max-width: 834px;
  }

  .inner {
    max-width: 754px;
  }

  .logo svg,
  .nav-item svg {
    transform: scale(0.8) translate(-22px, 1px);
  }

  .nav-item a {
    font-size: 13px;
  }

  /* キービジュアル834 */

  /* Aboutセクション834*/

  .aboutBGPic {
    width: 625px; /* 画像の幅を指定 */
    height: 320px; /* 画像の高さを指定 */
  }

  /* 広さと間取り834 */
  .spaceSec {
    margin-top: 64px;
  }

  .spaceFlex {
    display: block;
  }

  /* 左側エリア834 */
  .spaceLefArea {
    margin-right: 0px;
    height: 120px;
    max-width: 754px;
  }

  .spaceLefArea p:nth-child(1) {
    margin-bottom: 7px; /* 最初のpとh3の間 */
  }

  .spaceLefArea h4 {
    margin-bottom: 40px;
  }

  /* 消す */
  .spaceLefArea p:nth-child(3),
  .spaceLefArea p:nth-child(4) {
    margin-bottom: 20px;
    display: none;
  }

  /* 834以下で現れるテキスト */
  .addText834 {
    display: block;
    margin-top: 24px;
  }

  .addText834 p:nth-child(2) {
    margin-top: 40px;
  }

  /* 内装と外装834 */
  .interiFlex {
    flex-direction: column;
  }

  /* 左側834 */
  .interiLeft {
    margin-right: 0px;
  }

  /* 右側834 */
  .interiRight {
    margin-top: 24px;
    width: 100%;
  }

  /* 外装834 */
  .outeriFlex {
    flex-direction: column-reverse;
  }

  /* 左 */
  .outeriLeft {
    margin-top: 24px;
    margin-right: 0px;
    height: 168px;
    max-width: 754px;
  }

  .outeriLeft p:nth-child(2) {
    margin-top: 20px;
  }

  /* 住み心地834 */

  /* 強度や耐久性834 */

  .strengthFlex {
    flex-direction: column;
  }

  /* 左側 */
  .strengthLeft {
    margin-right: 0px;
  }

  /* 右側 */
  .strengthRight {
    margin-top: 24px;
    height: 216px;
    max-width: 754px;
  }

  /* 耐久性834 */
  .duraFlex {
    flex-direction: column-reverse;
  }

  /* 左側834 */
  .duraLeft {
    margin-right: 0px;
    margin-top: 24px;
    height: 216px;
    max-width: 754px;
  }

  .duraLeft p:nth-child(2) {
    margin-top: 20px;
  }

  /* 固定資産税 */

  .propertySec h4 {
    margin-top: 4px;
  }

  .propertySec p {
    margin-top: 24px;
  }

  .propertySec::after {
    content: ""; /* これが必要です */
    display: block; /* 表示をブロックレベルに設定 */
    border-bottom: 1px solid black;
    width: 100%; /* 幅をセクション全体に */
    margin-top: 40px;
    margin-bottom: 40px;
  }

  /* 建築基準法834 */

  /* 警告英語834 */

  /* ケーススタディーセクション834 */

  .caseFlex {
    margin: 0 auto;
    margin-top: 56px;
  }

  .photoGalleryFull {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .photoGalleryFull li {
    width: 100%;
  }

  .caseStudySec .inner p {
    margin-top: 40px;
  }

  .caseStudySec .inner p.grayBold {
    margin-top: 0;
  }

  /* ニュースセクション843 */
  .newsSec {
    padding-bottom: 210px;
  }

  /* .instaSquare {
    height: 240px;
    width: 240px;
    display: flex; 
    justify-content: center;
    align-items: center; 
  } */

  .snapwidget-widget {
    /* width: 700px;
    height: 700px; */
    transform: scale(1.8);
  }

  /* モデルルームセクション843 */

  .modelFlex {
    display: block;
    /* align-items: center; */
  }

  /* 左側 */
  .modelLeft {
    margin-right: 0px;
    text-align: left;
  }

  .modelRight {
    width: 529px;
    height: 397px;
    margin: 0 auto;
    margin-top: 52px;
  }

  /* 消す */
  .modelLeft p:nth-child(3),
  .contactContainer {
    display: none;
  }

  .contactContainer p:nth-child(1) {
    justify-content: left; /* 左から始める */
    transform: translateX(40px);
  }

  .addModelTex834 {
    display: block;
    width: 368px;
    margin: 0 auto;
  }

  .addModelTex834 p:nth-child(1) {
    margin-top: 52px;
  }

  .addModelContact834 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 24px 57px; */
    padding: 24px 0px;
    border: 1px solid white;
    width: 368px;
    margin: 0 auto;
    margin-top: 40px;
  }

  .addModelContact834 p:nth-child(1) {
    margin-top: 0px;
    transform: translateX(-30px);
  }

  .addModelContact834 p {
    display: flex;
    align-items: center;
    justify-content: center; /* これを確認 */
    width: 100%;
  }

  .addModelContact834 svg {
    margin-right: 2px; /* SVGとテキストの間にマージンを設定 */
  }
}

/* 〜〜〜携帯667〜〜〜〜〜〜〜 */
@media only screen and (max-width: 667px) {
  /* 携帯用ヘッダー */
  .header {
    flex-direction: column;

    align-items: flex-start;
    max-width: 100%;
    /* background-color: #828282; */
    margin: 0;
    padding: 24px 16px;
  }

  header > .inner {
    max-width: 363px;
    margin: 0 auto;
    /* border: 1px solid black; */
  }

  .logo h1 {
    font-size: 14px; /* 文字サイズを小さく */
    margin-left: 0px; /* 余白調整 */
    z-index: 1002;
  }

  /* PC用ロゴとナビアイテムのSVG調整 */
  .logo svg,
  .nav-item svg {
    transform: scale(0.9) translate(0px, 1px);
  }

  /* .logo svg,
  .nav-item svg {
    transform:scale(0.8) translate(0px, 1px);
  } */

  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 1001;
    width: 25px;
    height: 15px;
  }

  .hamburger-menu div,
  .hamburger-menu div::before,
  .hamburger-menu div::after {
    background-color: rgb(0, 0, 0);
    height: 2px;
    transition: transform 0.3s ease-in-out;
    position: relative;
  }

  .hamburger-menu div::before,
  .hamburger-menu div::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
  }

  .hamburger-menu div::before {
    top: -10px;
  }

  .hamburger-menu div::after {
    top: 10px;
  }

  .hamburger-menu.active div {
    /* transform: rotate(45deg); */
    background-color: transparent;
  }
  .hamburger-menu.active div::before {
    transform: rotate(45deg) translate(0px, 0);
    top: 0;
  }

  .hamburger-menu.active div::after {
    transform: rotate(-45deg) translate(0px, 0);
    top: 0px;
  }

  /* ナビの中 */
  .navbar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: #e9e9e9;
    transition: right 0.3s;
  }

  .navbar.active {
    top: 0;
    right: 0;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    /* background-color: antiquewhite; */
    height: 100%;
  }

  .nav-item {
    margin-bottom: 0px;
    /* border: 1px solid black; */
  }

  .nav-item > a {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: black !important;
  }

  .nav-item p {
    color: black !important;
  }

  /* メニューバーの中の設定 */
  /* 最初のnav-itemにのみ特定のスタイルを適用 */
  .nav-list .nav-item:nth-child(1) {
    padding-bottom: 40px;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
  }

  /* 最初のnav-item以外で、かつ最後のnav-itemでない要素に擬似要素を使用してボーダーを設定 */
  .nav-list .nav-item:not(:first-child):not(:last-child)::after {
    content: ""; /* 擬似要素にはcontentプロパティが必須 */
    display: block; /* ブロックレベル要素として表示 */
    height: 1px; /* ボーダーの厚み */
    background-color: white; /* ボーダーの色 */
    width: 100%; /* 親要素の幅に合わせる */
    margin-top: 24px;
    /* 目あわせ */
    margin-bottom: -38px;
  }

  /* 最後の nav-item には after を適用しない */
  .nav-list .nav-item:last-child::after {
    display: none; /* 最後のアイテムの after を非表示にする */
  }

  /* 最初のnav-itemを除くすべてのnav-itemのnav-descriptionにスタイルを適用 */
  .nav-list .nav-item:nth-child(n + 2) .nav-description {
    color: #828282 !important;
  }

  /* メニューの中の文字表示 */
  .nav-item.active .nav-description {
    display: block; /* アクティブな時に表示 */
    /* font-size: 12px; */
  }

  .only667 {
    display: block;
  }

  h1 {
    font-size: 18px;
  }

  h2 {
    font-size: 40px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 24px;
  }

  /* 14に変更　 */
  .text20 {
    font-size: 14px;
    font-weight: 400;
  }

  /* 14に変更　 */
  .text18 {
    font-size: 12px;
  }

  /* 使ってない */
  .text12 {
    font-size: 12px;
    font-weight: 400;
  }

  .inner {
    min-width: 343px;
  }

  .btn {
    gap: 16px; /* テキストとSVGの間にスペースを設定 */
    padding: 8px 16px;
    border: 1px solid white;
    cursor: pointer;
    margin-top: 16px;
  }

  .btn svg {
    width: 7px; /* SVGの幅を設定 */
    height: 11px; /* SVGの高さを設定 */
  }

  .btn:hover {
    background-color: white; /* ホバー時の背景色を白に */
    color: #1c1c1c; /* ホバー時のテキストカラーを暗色に */
  }

  img {
    height: auto;
    width: 100%;
  }

  /* 全ブラウザ共通のキービジュアルの基本スタイル */
  .keyVisual {
    height: calc(100vh - 150px);
  }

  /* Chrome, Edge, Opera 用のスタイル */
  /* @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    .keyVisual {
      height: calc(100vh - 40px) !important;
    }
  }

  /* Safari 用のスタイル */
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-overflow-scrolling: touch) {
      .keyVisual {
        height: calc(100vh - 200px) !important;
      }
    }
  }
  */ .keyVisualText {
    /* max-width: 300px;*/
    margin: 0 auto;
  }
  .keyVisualText p:nth-child(2) {
    font-size: 16px;
    letter-spacing: 0.01em;
  }

  .keyVisualText p:nth-child(3) {
    margin-bottom: 16px; /* 再構築可能な次世代のコンテナハウスをご提案いたします。とbuttonの間 */
  }

  .keyVisualText h2 svg {
    width: 269px;
    height: 47px;
  }

  /* Aboutセクション667*/

  .aboutSec {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .aboutBGPic {
    width: 281px; /* 画像の幅を指定 */
    height: 240px; /* 画像の高さを指定 */
  }

  /* 広さと間取り667 */
  .spaceSec {
    margin-top: 56px;
  }

  .aboutSec h3 {
    /* margin-top: 18px; */
  }

  .spaceFlex {
    display: block;
  }

  /* 左側エリア667 */
  .spaceLefArea {
    width: 343px;
  }

  .spaceLefArea p:nth-child(1) {
    margin-bottom: 7px; /* 最初のpとh4の間 */
  }

  .spaceLefArea h4 {
    margin-bottom: 40px;
  }

  /* 消す */
  /* .spaceLefArea p:nth-child(3),.spaceLefArea p:nth-child(4) {
  margin-bottom: 20px; 
  display: none;
} */

  /* 834以下で現れるテキスト */

  /* 内装と外装667 */

  /* 左側667 */

  /* 右側667 */

  /* 外装667 */

  /* 左 */
  .outeriLeft {
    height: 100%;
    width: 100%;
  }

  /* 住み心地667*/

  .comfySec > p:last-child {
    margin-top: 40px;
    width: 100%;
  }

  /* 強度や耐久性667 */

  /* 左側 */
  .strengthLeft {
    margin-right: 0px;
  }

  /* 右側 */
  .strengthRight {
    margin-top: 24px;
    height: 100%;
    width: 100%;
  }

  /* 耐久性667 */
  /* 右 */

  /* 左側667 */
  .duraLeft {
    /* margin-top: 24px; */
    height: 100%;
    width: 100%;
  }

  /* 固定資産税667 */

  .propertySec p {
    margin-top: 40px;
  }

  /* 建築基準法667 */

  .buildSec p {
    margin-top: 40px;
  }

  /* 警告英語667 */
  .warningSec {
    margin-top: 56px;
  }

  /* ケーススタディーセクション667 */
  .caseStudySec {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .caseStudySec .inner p {
    margin-top: 40px;
  }

  .caseStudySec .warningSec {
    margin-top: 24px;
  }

  /* <!-- ニュースセクション667 --> */

  .instaFlex {
    margin-top: 56px;
    /* background-color: antiquewhite; */
  }

  /* いじるとこ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
  .newsSec {
    margin-top: 56px;
    padding-bottom: 8px;
  }

  /* .instaSquare {
    height: 240px;
    width: 240px;
    display: flex; 
    justify-content: center;
    align-items: center; 
  } */

  .snapwidget-widget {
    /* width: 300px;
    height: 300px; */
    transform: scale(1.15);
  }

  /* いじるとこ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */

  .spNone {
    display: none;
  }

  .instaSquare {
    height: 163px;
    width: 163px;
    background-color: white;
  }

  /* <!-- モデルルーム667 --> */
  .modelSec {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .modelSec img {
    width: 343px;
    height: 257px;
  }

  /* 左側 */

  /* 右側 */
  .modelRight {
    width: 343px;
    height: 257px;
    margin-top: 56px;
  }

  .addModelTex834 {
    width: 343px;
  }

  .addModelTex834 p:nth-child(1) {
    margin-top: 40px;
  }

  .addModelContact834 {
    width: 343px;
  }

  .addModelContact834 p:nth-child(1) {
    margin-top: 0;
    transform: translateX(-30px);
    margin-bottom: 8px;
  }

  .addModelContact834 svg {
    margin-right: 8px; /* SVGとテキストの間にマージンを設定 */
    fill: white;
  }

  /* フッター 667*/
  footer {
    padding-top: 56px;
    padding-bottom: 16px;
  }

  footer h4 {
    margin-bottom: -15px;
    /* font-size: 32px; */
  }

  footer .inner h4 svg {
    width: 300px;
    /* height: 22px; */
    transform: translateY(-30px); /* SVGを10ピクセル上に移動 */
  }

  footer .inner p {
    font-size: 14px;
  }

  footer .inner p:nth-child(3) {
    margin-top: 10px;
  }

  footer .inner p:last-child {
    margin-top: 56px; /* 最後の要素なのでマージンは不要 */
  }
}