@charset "UTF-8";

/*border*/

.border-bottom-white-1px {
  border-bottom: solid 1px #ffffff;
}

.border-gray-1px {
  border: solid 1px #777777;
}

.border-yellow-1px {
  border: solid 1px #E7C73D;
}

.border-lightblue-5px {
  border: solid 5px #5E8CA8;
}

.border-md-right {
  border-right: none;
}
@media screen and (min-width: 768px) {
  .border-md-right {
    border-right: solid 2px #222222;
    height:400px;
  }
}

/*width*/

.w450px {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .w450px {
    width: 450px;
  }
}

.width150px-200px {
  width: 150px;
}

@media screen and (min-width: 768px) {
  .width150px-200px {
    width: 200px;
  }
}

.width150px-300px {
  width: 150px;
}

@media screen and (min-width: 768px) {
  .width150px-300px {
    width: 300px;
  }
}

/*height*/


/*位置*/
.transform-translate-n50 {
  transform: translate(-50%, -50%);
}

.top--50 {
  top: -50%;
}
.top--40 {
  top: -40%;
}

.top--33 {
  top: -33%;
}

.top--30 {
  top: -30%;
}

.top--25 {
  top: -25%;
}

.top--24 {
  top: -24%;
}

.top--20 {
  top: -20%;
}

.top--18 {
  top: -18%;
}

.top--15 {
  top: -15%;
}

.top--11 {
  top: -11%;
}

.top--2 {
  top: -2%;
}

.top-0 {
  top: 0;
}

.top-5 {
  top: 5%;
}

.top-10 {
  top: 10%;
}

.top-12 {
  top: 12%;
}

.top-15 {
  top: 15%;
}

.top-20 {
  top: 19%;
}

.top-25 {
  top: 25%;
}

.top-30 {
  top: 30%;
}

.top-35 {
  top: 35%;
}

.top-40 {
  top: 40%;
}

.top-48 {
  top: 48%;
}

.top-58 {
  top: 58%;
}

.top-70 {
  top: 70%;
}

.left--15 {
  left: -15%;
}

.left--100 {
  left:-100px;
}

.left-14 {
  left:14%;
}

.left-17 {
  left:17%;
}

.left-5 {
  left:5%;
}

.left-20 {
  left:20%;
}

.left-24 {
  left:24%;
}

.left-27 {
  left:27%;
}

.left-28 {
  left:28%;
}

.left-30 {
  left:30%;
}

.left-33 {
  left:33%;
}

.left-50 {
  left:50%;
}

.right-8 {
  right:8px;
}

.right-18 {
  right:18%;
}

.right-20 {
  right:20%;
}

.right-40 {
  right: 40%;
}

.right--100 {
  right:-100px;
}

.right--3 {
  right:-3%;
}

.right--5 {
  right:-5%;
}

.right--7 {
  right:-7%;
}

.right--10 {
  right:-10%;
}

.right--20 {
  right:-20%;
}

.right--22 {
  right:-22%;
}

.right--25 {
  right:-25px;
}

.bottom-10 {
  bottom:10%;
}

.bottom-20 {
  bottom:20%;
}

.bottom-43 {
  bottom:43%;
}

.bottom-50 {
  bottom:50%;
}

.bottom-25 {
  bottom:25%;
}

.bottom--40 {
  bottom:-40%;
}

.bottom--45 {
  bottom:-45%;
}

.bottom--130 {
  bottom:-130%;
}

.bottom--10 {
  bottom:-10%;
}

.left-0--100 {
  left:0px;
}
@media (min-width: 992px) {
  .left-0--100 {
    left:-100px;
  }
}

.top-20--25 {
  top: 20%;
}
@media (min-width: 992px) {
  .top-20--25 {
    top: -25%;
  }
}

.right--30--100 {
  right:-30px;
}
@media (min-width: 992px) {
  .right--30--100 {
    right:-100px;
  }
}

.left-auto-30 {
  left:auto;
}
@media (min-width: 1250px) {
  .left-auto-30 {
    left:30%;
  }
}

.left-auto-33 {
  left:auto;
}
@media (min-width: 1250px) {
  .left-auto-33 {
    left:33%;
  }
}

.left-30-50 {
  left:60%;
}
@media (min-width: 992px) {
  .left-30-50 {
    left:30%;
  }
}

.top--12--15 {
  top:-12%;
}
@media (min-width: 992px) {
  .top--12--15 {
    top:-15%;
  }
}

.top--50--30 {
  top:-60%;
}
@media (min-width: 992px) {
  .top--50--30 {
    top:-30%;
  }
}

.top-54-40 {
  top:54%;
}
@media (min-width: 1250px) {
  .top-54-40 {
    top:40%;
  }
}

.bottom--10--190 {
  bottom:-190%;
}
@media (min-width: 992px) {
  .bottom--10--190 {
    bottom:-10%;
  }
}

.bottom-50--100 {
  bottom:-100%;
}
@media (min-width: 992px) {
  .bottom-50--100 {
    bottom:50%;
  }
}

.z-99 {
  z-index: 99 !important;
}

.z-999 {
  z-index: 999 !important;
}

.z-9999 {
  z-index: 9999 !important;
}

.nav-item.text-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}


/* TOPページのみメニュー間の「|」を消す */
.top-page .navbar-nav .nav-item + .nav-item::before {
  display: none;
}

/* または、単純に区切り線として指定されているクラスを消す場合 */
.top-page .navbar-nav li {
  border: none !important;
}

/* TOPページ（.top-page）の時だけ、メニュー展開時の背景を青にする */
.top-page .navbar-collapse {
  background-color: #164B93 !important; /* 丸商建設様の青色（任意の色コードに変えてね） */
}

/* 背景を青にしたら文字が見えなくなるので、文字を白にする */
.top-page .navbar-collapse .nav-link {
  color: #ffffff !important;
}

/* スマホ時のみ適用したい場合（PC版のナビゲーションに影響させない） */
@media (max-width: 991px) {
  .top-page .navbar-collapse {
      background-color: #164B93 !important;
      padding: 20px;
  }
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  /* iOSの慣性スクロール対応 */
  scrollbar-width: none;
  /* Firefoxでスクロールバー非表示 */
}

.overflow-x-auto::-webkit-scrollbar {
  display: none;
  /* Chrome/Safariでスクロールバー非表示 */
}

/* 下層ナビ横の線 */
@media (min-width: 992px) {
  .navbar-nav .nav-item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .navbar-nav .nav-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 15px;
    background-color: #111;
    margin: 0 5px;
  }
}

/* 下層パンくず */
.breadcrumb {
  --bs-breadcrumb-divider: ">";
}

.breadcrumb li a {
  color:#777777 !important;
  text-decoration: none;
}

/* フォントサイズ */
@media screen and (min-width: 768px) {
  .fs-lg-12 {
      font-size: 3.5rem !important;
  }
}

@media screen and (min-width: 768px) {
  .fs-lg-10 {
      font-size: 3rem !important;
  }
}

.fs15px-20px {
  font-size: 15px;
}
@media screen and (min-width: 768px) {
  .fs15px-20px {
      font-size: 20px;
  }
}

.fs12px-14px {
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  .fs12px-14px {
    font-size: 14px;
  }
}

.fs36px-60px {
  font-size: 36px;
}
@media screen and (min-width: 768px) {
  .fs36px-60px {
    font-size: 60px;
  }
}

.fs16px-24px {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .fs16px-24px {
    font-size: 24px;
  }
}

/* テキスト飾り */
.text-border-bottom-blue {text-align:center;padding-bottom:10px;}
.text-border-bottom-blue::after {
    content:'';
    display:block;
    width:65px;
    height:3px;
    background:#1247ba;
    margin:8px auto 0;
}

/* ボタン */
.btn-blue {
  position: relative;
  display: inline-block;
  padding: 20px 0;
  background-color: #164b93;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border:none;
}

.btn-blue:hover {
  opacity: 0.8;
}

.btn-gray {
  position: relative;
  display: inline-block;
  padding: 20px 0;
  background-color: #555555;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border:none;
}

.btn-gray:hover {
  opacity: 0.8;
}

.btn-orange {
  padding: 10px 0;
  background-color:#C20909;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border:none;
}

.btn-orange:hover {
  opacity: 0.8;
}

.btn-circle-right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 22px;
  height: 22px;
  margin: auto;
  border-radius: 20px;
  background-color: #fff;
}
.btn-circle-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #164b93;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
}

.btn-circle-right-gray::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 22px;
  height: 22px;
  margin: auto;
  border-radius: 20px;
  background-color: #fff;
}
.btn-circle-right-gray::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #555555;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
}

/* top */

#section02 {
  background-image: none;
  position:relative;
  height:330px;
}

@media screen and (min-width: 1250px) {
  #section02 {
    background-size: cover,cover;
    background-position: 0 20%,100% -50px;
    background-repeat: no-repeat,no-repeat;
    background-size: 400px, 400px;
    height:540px;
    background-image: url(../../assets/img/section02-illust01.png), url("../../assets/img/section02-illust02.png");
  }
}

@media screen and (min-width: 1500px) {
  #section02 {
    background-size: cover,cover;
    background-position: 0 20%,100% -50px;
    background-repeat: no-repeat,no-repeat;
    background-size: 550px, 550px;
    background-image: url(../../assets/img/section02-illust01.png), url("../../assets/img/section02-illust02.png");
  }
}


  .section06-bg {
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-image: url(../../assets/img/bg-section06.png);
  }

  .section06-waku:hover .btn-orange {
    background-color: #ff9900; /* 背景色を変更 */
    color: #fff; /* 文字色を変更 */
    transition: background-color 0.3s ease, color 0.3s ease; /* スムーズな変化 */
  }


.section11-bg {
  background-image: none;
}

@media screen and (min-width: 992px) {
  .section11-bg {
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-image: url(../../assets/img/bg-company.png);
  }
}

/* slider */
.slick-dots li button:before {
  font-size: 11px;
  color: #164B93;
  opacity: 0.25;
}

.slick-dots li.slick-active button:before {
  color: #164B93;
  opacity: 1;
}

.slider01 {
  width: 100%;
}
.slider-img img {
  height: auto;
  width: 100%;
}

.slider02 .slider-img {
  margin: 0 10px; /* 上下0、左右10px */
}

.slider02 {
  margin: 0 -10px;
}

.slider02 .slider-img img {
  width: 100%;
  height: auto;
  display: block;
}

.slick-dots {
  bottom: -40px !important; 
}

.slider01, .slider02, .slider03 {
  margin-bottom: 60px !important; 
}

.slider03 .slider-img {
  margin: 0 10px; /* 上下0、左右10px */
}

.slider04 .slider-img {
  margin: 0 10px; /* 上下0、左右10px */
  max-width:100%;
  overflow:hidden;
}

.slider04 {
  margin-bottom: 100px !important; 
}

.slick-prev:before, .slick-next:before {
  color: #164b93 !important;
  font-size: 30px; /* サイズも少し大きくすると分かりやすい */
}

.slick-prev {
  left: -30px;
}

/* サイト全体で横へのはみ出しを禁止する */
body, .top-page {
  overflow-x: hidden;
}

/* スライダー自体のはみ出しを防止 */
.slick-list {
  margin: 0 !important;
}


/* 見学会・イベント情報 */
.bg-modelhouse {
  background-position: -460px 250px;
  background-repeat: no-repeat;
  background-size: 130%;
  background-image: url(../../assets/img/bg-modelhouse.png);
}

/* 物件情報 */
.pr-img img {
  max-width: 100%;
  margin:30px 0;
}

/* 施工事例 */
.sec-works {
  font-size: 16px !important;
}
.sec-works h2 {
  font-size: 18px !important;
}

/* お客様の声 */
.sec-voice p {
  font-size: 16px !important;
}
.sec-voice h3 {
  font-size: 18px !important;
}


/* 画像比率 */
.img-3_2 {
  width: 100%; /* 横幅を親要素に合わせる */
  aspect-ratio: 3 / 2; /* アスペクト比を3:2に設定 */
  object-fit: cover; /* 画像を枠内に収める */
}