@charset 'UTF-8';

/* destyle.css リセット----------------------------------- */

h2 {
  line-height: 1.15;
}
body {
  line-height: 1.15;
}
header,
footer {
  line-height: 1.7;
}

/* 共通----------------------------------- */

html {
  scroll-behavior: smooth;
}

.sumai2-contents {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-weight: 400;
  font-style: normal;
  color: #282828;
  font-size: 14px;
  animation: fade 2s forwards;
  overflow: hidden;
}
@media (min-width:768px) {
  .sumai2-contents {
    font-size: 16px;
  }
}

@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

p{
  line-height: 1.8;
  color: #333;
}
@media (min-width:768px) {
  p{
  line-height: 2.0;
  }
}
img{
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
a{
  text-decoration: none;
  color: #fff;
}
ul{
  list-style: none;
}
.wrapper{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
}

.en{
  font-family: "Marcellus SC", serif;
  font-weight: 400;
  font-style: normal;
}

/* 各セクションタイトル */
.sumai2_section-title{
    font-size: 32px;
  }
  .sumai2_subtitle{
    font-size: 12px;
    margin-bottom: 30px;
  }

  @media (min-width:768px) {
    .sumai2_section-title{
      font-size: 48px;
    }
    .sumai2_subtitle{
      font-size: 16px;
      margin-bottom: 60px;
    }
  }

  /* 下層ページ共通(予定) */
  .sumai2_page-title{
    margin: 90px auto 8px;
    font-size: 40px;
    padding: 0 4%;
  }
  .sumai2_title-sub{
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
  }

  @media (min-width:768px) {
    .sumai2_page-title{
      font-size: 72px;
      padding: 0 10%;
      margin: 130px auto 8px;
    }
    .sumai2_title-sub{
      font-size: 21px;
      margin-left: 10px;
    }
  }

/* メインビジュアル */
.sumai2_sub-visual{
  background: url('../img/sumai2/sumai2_mv2.webp')no-repeat center bottom / cover;
  height: 35vh;
  position: relative;
}

@media (min-width:768px) {
  .sumai2_sub-visual{
    height: 100svh;
    min-height: 400px;
  }
}


/* はじめのメッセージ */
.sumai2_top-msg{
  margin: 40px auto 50px;
  text-align: center;
}
.sumai2_top-catch{
  font-size: 20px;
}
.sumai2_ilmio-logo{
  width: 200px;
  margin: 30px auto 30px;
}
.sumai2_top-p{
  color: #282828 !important;
}

@media (min-width:768px) {
  .sumai2_top-msg{
    margin: 80px auto 80px;
  }
  .sumai2_top-catch{
    font-size: 32px;
    margin-bottom: 40px;
  }
  .sumai2_ilmio-logo{
    width: 350px;
    margin: 30px auto 40px;
  }
  .sumai2_top-p{
    font-size: 18px;
  }
}

/* 画像配置 */
.sumai2_topimg{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; /* 画像同士の距離 */
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 0;
}

.sumai2_topimg1,
.sumai2_topimg2 {
  width: 70%;
}

.sumai2_topimg1 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.sumai2_topimg2 img{
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* 上の画像：右寄せ */
.sumai2_topimg1 {
  margin-left: auto;
  margin-bottom: 40px;
}

/* 下の画像：左寄せ */
.sumai2_topimg2 {
  margin-left: 5%;
  margin-top: 20px;
  margin-bottom: 40px;
}

@media (min-width:768px) {
  .sumai2_topimg1{
    width: 40%;
  }
  .sumai2_topimg2{
    width: 50%;
  }
  .sumai2_topimg1 {
    margin-right: 10%;
    margin-bottom: 40px;
  }
  .sumai2_topimg2{
    margin-top: -70px;
    margin-left: 10%;
}
}

/* イルミオの３つの価値-------------------------------- */
.sumai2_valuebox{
  text-align: center;
}
.three-valuetitle{
  text-align: justify;
  display: inline-block;
  margin: 40px auto 70px;
}
.three-valuetitle p{
  margin-bottom: 20px;
}

@media (min-width:768px) {
  .sumai2_value{
    margin-top: 90px;
  }
  .sumai2_value-head{
    font-size: 32px;
  }
  .three-valuetitle{
    font-size: 20px;
}
}


/* 真ん中線 */
.center-line {
  position: relative;
}
.center-line::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;         /* 画面中央 */
  width: 1px;        /* 線の太さ */
  height: 55px;
  background: #282828;  /* 色 */
  transform: translateX(-50%);
}
@media (min-width:768px) {
  .center-line::before {
    bottom: -60px;
  }
  .center-line::before {
    height: 100px;
  }
}

/* ３つの価値詳細 */
.en2{
  font-family: "Cardo", serif;
  font-weight: 400;
  font-size: 20px;
  margin-right: 8px;
}
.three-value{
  margin: 40px auto;
}
.sumai2_value-title{
  font-size: 18px;
  margin-bottom: 12px;
}
.three-value img {
  width: 100vw;       /* 画面幅いっぱい */
  max-width: none;    /* wrapper制約を無効化 */
  display: block;     /* 下の余白を消す */
  margin-left: calc(-50vw + 50%); /* wrapper中央に合わせる */
  margin-top: 30px;
}
.value-item{
  margin-bottom: 60px;
}

@media (min-width:768px) {
  .three-value{
    margin: 140px auto 120px;
  }
  .value-item{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 80px;
    margin-top: 90px;
  }
  .value-text{
    width: 50%;
  }
  .value-img{
    width: 50%;
  }
  .three-value img {
    margin-left: 0 !important;
    margin-top: 0;
    max-width: 100%;
  }
  .sumai2_value-title{
    font-size: 24px;
    margin-bottom: 20px;
  }
  .en2{
    font-size: 30px;
  }
  /* .value-text p{
    line-height: 2.0;
  } */
}

/* デザインと品質-------------------------------- */
.design-quality{
  padding-bottom: 80px;
}
.sumai2_section-head{
  font-size: 20px;
  margin-bottom: 16px;
}
.sumai2_section-headp{
  margin-bottom: 30px;
}

@media (min-width:768px) {
  .sumai2_section-head{
    font-size: 24px;
  }
  .sumai2_design-flex{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
  }
  .sumai2_design-text{
    width: 55%;
  }
  .sumai2_design-img{
    width: 40%;
  }
}

/* 画像配置 ----------*/
.sumai2_topimg{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px; /* 画像同士の距離 */
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 0;
}
.sumai2_designimg1 {
  width: 65%;
}
.sumai2_designimg2 {
  width: 50%;
}
.sumai2_designimg3 {
  width: 80%;
}
.sumai2_designimg2 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.sumai2_designimg1 img{
  aspect-ratio: 1/1;
  object-fit: cover;
}


/* 1枚目の画像：左寄せ */
.sumai2_designimg1 {
  margin-right: auto;
  margin-bottom: -50px;
}
/* 2枚目の画像：右寄せ */
.sumai2_designimg2 {
  margin-left: auto;
  margin-bottom: 20px;
}
/* 3枚目の画像：左寄せ */
.sumai2_designimg3 {
  margin-left: auto;
}

@media (min-width:768px) {
  .sumai2_designimg1 img{
    aspect-ratio: 4/3;
  }
  .sumai2_designimg1 {
    width: 70%;
  }
  .sumai2_designimg2 {
    width: 45%;
  }
  .sumai2_designimg3 {
    width: 70%;
  }

  /* 1枚目の画像：左寄せ */
  .sumai2_designimg1 {
    margin-right: auto;
    margin-bottom: -60px;
  }
  /* 2枚目の画像：右寄せ */
  .sumai2_designimg2 {
    margin-left: auto;
    margin-bottom: 20px;
  }
  /* 3枚目の画像：左寄せ */
  .sumai2_designimg3 {
    margin-left: 5%
  }
}


/* 各場所のこだわり----- */
.sumai2_qu-text{
  margin-top: 60px;
  position: relative;
  }
.sumai2_qu-title{
  font-weight: 500;
  font-size: 20px;
  margin: 14px 0 10px;
  letter-spacing: normal;
  line-height: 1.2;
  position: relative;
  padding-left: 14px; /* 線＋余白分（5px + 14px） */
  }
.sumai2_qu-title:before{
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #282828;
}

@media (min-width:768px) {
  .sumai2_qu-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
  }
  .sumai2_qu-item2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    margin-bottom: 50px;
  }
  .sumai2_qu-text{
    width: 45%;
    margin-top: 0;
  }
  .sumai2_exstyle-img{
    width: 50%;
  }
  .sumai2_qu-title{
    font-size: 24px;
    margin: 14px 0 20px;
    padding-left: 20px;
  }
}

/* 後ろの装飾文字 */
.bg-text {
  position: absolute;
  top: -55%;
  left: 20%;
  font-family: 'Marcellus SC', serif;
  font-size: 96px;
  color: #F7F7F7;
  pointer-events: none; /* 背景装飾だからクリック無効 */
  z-index: -1;
  right: 0;
  transform-origin: top right;
  overflow: hidden;
}


/* 外観デザイン------------------------------- */
/* 画像配置 ----------*/
.sumai2_exstyle-img {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  max-width: 900px;
  margin: 0 auto;
  padding: 70px 0 20px;
  gap: 20px;
}
/* 左画像を上にずらす */
.ex-img.left {
  position: relative;
  top: -30px;
  flex: 1;
}
/* 右画像を下にずらす */
.ex-img.right {
  position: relative;
  top: 30px;
  flex: 1;
}
.ex-img img {
  width: 100%;
  display: block;
  object-fit: cover;
}

@media (min-width:768px) {
  .sumai2_exstyle-img {
    margin: 0;
  }
}

/* 内観デザイン------------------------------- */

/* 画像配置 ----------*/
.sumai2_interiorimg{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px; 
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 0;
}
.sumai2_interiorimg1 {
  width: 72%;
}
.sumai2_interiorimg2 {
  width: 65%;
}

.sumai2_interiorimg img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.sumai2_interiorimg2 img{
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* 1枚目の画像：左寄せ */
.sumai2_interiorimg1 {
  margin-right: auto;
  margin-bottom: -40px;
  margin-top: 16px;
}
/* 2枚目の画像：右寄せ */
.sumai2_interiorimg2 {
  margin-left: 35%;
}

@media (min-width:768px) {
  .sumai2_interior-img{
    width: 50%;
  }
  .sumai2_interiorimg1 {
    margin-bottom: -70px;
}
}

/* 空間設計------------------------------- */
.sumai2_planningimg{
    margin-top: 30px;
}
@media (min-width:768px) {
  .sumai2_planningimg{
    width: 50%;
  }
}

/* 設備・機能------------------------------- */

/* 画像配置 ----------*/
.sumai2_equipmentimg{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px; 
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 0;
}
.sumai2_equipmentimg1 {
  width: 80%;
}
.sumai2_equipmentimg2 {
  width: 70%;
}

.sumai2_equipmentmg img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 1枚目の画像：左寄せ */
.sumai2_equipmentimg1 {
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 16px;
}
/* 2枚目の画像：右寄せ */
.sumai2_equipmentimg2 {
  margin-left: 25%;
}

@media (min-width:768px) {
  .sumai2_equipment-img{
    width: 50%;
  }
  .sumai2_equipmentimg1 {
    margin-top: 0
}
}
/* 外構------------------------------- */
/* 画像配置 ----------*/
.sumai2_exterior-img {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0 20px;
  gap: 20px;
}
/* 左画像を下にずらす */
.ex-img2.left {
  position: relative;
  top: 30px;
  flex: 1;
}
/* 右画像を上にずらす */
.ex-img2.right {
  position: relative;
  top: -30px;
  flex: 1;
}
.ex-img2 img {
  width: 100%;
  display: block;
  object-fit: cover;
}

@media (min-width:768px) {
  .sumai2_exterior-img{
    width: 50%;
    margin: 0;
  }
  .sumai2_equipmentimg1 {
    margin-top: 0
}
}

/* il mioで過ごす一日------------------------------- */
.scenes{
  /* margin-top: 70px; */
  padding: 40px 0 20px;
  border-top: 1px solid #ccc;
}
.sumai2_scenes{
  width: 100vw;       /* 画面幅いっぱい */
  max-width: none;    /* wrapper制約を無効化 */
  display: block;     /* 下の余白を消す */
  margin-left: calc(-50vw + 50%); /* wrapper中央に合わせる */
}

@media (min-width:768px) {
  .scenes{
    padding: 80px 0 20px;
  }
  .sumai2_scenes-catch{
    margin: 0 auto;
    max-width: 700px;
  }
  .sumai2_scenes{
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* シーン１ */
.scene1{
  margin: 50px auto;
  text-align: center;
}
.scene-num{
  font-size: 20px;
  letter-spacing: 0.05em;
  position: relative;
}
.scene-num:before{
  content: "";
  position: absolute;
  width: 24px;
  height: 1px;
  background-color: #ccc;
  bottom: -10%;
  left: 50%;            /* 要素の中央に合わせる */
  transform: translateX(-50%); 
}
.scene-title{
  font-size: 20px;
  margin: 14px auto;
}
.scene-text{
  text-align: justify;
}

.scenes-img{
  margin-top: 20px;
}

@media (min-width:768px) {
  .scene1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    margin: 100px auto;
  }
  .scene-textbox{
    width: 45%;
  }
  .scenes-img{
    width: 45%;
  }
  .scene-num{
    font-size: 32px;
  }
  .scene-title{
    font-size: 24px;
    margin: 24px auto;
  }
}

/* シーン２ */
/* 画像配置 ----------*/
.sumai2_scenes-img{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px; 
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 0;
}
.scenes-img1 {
  width: 50%;
}
.scenes-img2 {
  width: 60%;
}

.sumai2_scenes-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 1枚目の画像：左寄せ */
.scenes-img1 {
  margin-right: auto;
  margin-bottom: 20px;
  margin-top: 16px;
}
/* 2枚目の画像：右寄せ */
.scenes-img2 {
  margin-left: auto;
}

@media (min-width:768px) {
  .sumai2_scenes-img{
    width: 45%;
    margin: 0;
    padding: 0;
  }
}

/* il mioの実例------------------------ */
.ilmio-sumai{
  padding: 40px 0 40px;
  border-top: 1px solid #ccc;
}

@media (min-width:768px) {
  .ilmio-sumai{
  padding: 100px 0 80px;
  }
  .sumai2_ilmiosumai-catch{
    margin: 0 auto;
    max-width: 700px;
  }
}

.sumai2_planitem{
  padding-top: 40px;
}
.sumai2_planitem:first-child{
  padding-top: 10px;
}
.sumai2_planname{
  font-size: 24px;
  position: relative;
  padding-bottom: 8px;
}
.sumai2_planname::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* 文字との距離 */
  width: 20px; /* 濃い線の長さ */
  height: 1px; /* 太さ */
  background-color: #4d4d4d;
}
.sumai2_planname::before{
  content: "";
  position: absolute;
  left: 20px; /* after の終点から開始 */
  bottom: 0; /* 位置は after に合わせて微調整 */
  right: 0; /* 要素幅いっぱいに伸ばす */
  height: 1px; /* 薄い線 */
  background-color: #ccc;
}
.sumai2_plantitle{
  font-size: 20px;
  margin: 12px auto;
}
.sumai2_planimg{
  margin: 24px auto;
}

@media (min-width:768px) {
  .sumai2_plan-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sumai2_plan-textbox{
    width: 45%;
  }
  .sumai2_planimg{
    width: 45%;
    margin: 0;
  }
  .sumai2_planname{
    font-size: 32px;
  }
  .sumai2_plantitle{
    font-size: 24px;
    margin: 16px auto;
  }
  .sumai2_planitem{
    padding-top: 100px;
  }
  .sumai2_planitem:first-child{
    padding-top: 80px;
}
}

.sumai2_planbtn {
  display: inline-block;
  background-color: #222; /* 黒背景 */
  color: #fff;            /* 文字は白 */
  padding: 12px 40px 12px 28px; /* 右側に余裕を作る */
  font-size: 16px;
  letter-spacing: 0.08em;
  position: relative;
}

@media (min-width:768px) {
  .sumai2_planbtn {
    padding: 16px 44px 16px 32px;
    font-size: 18px;
    transition: all 0.5s;
  }
  .sumai2_planbtn:hover {
    background: #808080;
  }
}

/* ＋マーク（疑似要素） */
.sumai2_planbtn::after {
  content: "+";
  position: absolute;
  right: 18px;  /* ボタン右端からの距離（調整してOK） */
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: #fff;
}
.sumai2_btnposition{
  text-align: center;
}
@media (min-width:768px) {
  .sumai2_btnposition{
    text-align: right;
    margin-top: 24px;
}
}


/* プランC画像配置 */
.sumai2_plancimg{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.planc-img1 {
  width: 50%;
}
.planc-img2 {
  width: 45%;
}
@media (min-width:768px) {
  .sumai2_plancimg{
    width: 50%;
    padding-top: 0;
    padding-bottom: 0;
  }

}

/* 終わりに------------------------- */
.footmsg{
  margin: 0 auto 50px;
}
.sumai2_footimg{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 40px;
}
.foot-img1,
.foot-img2,
.foot-img3 {
  width: 31%;
}

.foot-img1,
.foot-img3{
  margin-top: 50px;
}

.sumai2_footbtnposition{
  text-align: center;
}

@media (min-width:768px) {
  .footmsg{
    margin: 0 auto 100px;
  }
  .sumai2_footimg{
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0 80px;
  }
  .foot-img1,
  .foot-img2,
  .foot-img3 {
    width: 28%;
}
  .sumai2_footcatch{
    margin: 0 auto;
    max-width: 700px;
    text-align: center;
  }
  .sumai2_footcatch .sumai2_section-headp{
    text-align: justify;
    margin-bottom: 50px;
  }
  .footmsg .sumai2_section-head{
    font-size: 32px;
    margin-bottom: 24px;
  }
  .foot-img1,
  .foot-img3{
    margin-top: 110px;
}
}


/* 販売中の物件を見るボタン */
.sumai2_footbtn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #282828;
  color: #282828;
  padding: 12px 24px;
  font-size: 16px;
  transition: all 0.5s;
}
.sumai2_footbtn:hover {
  background: #282828;
  color: #fff;
}

.btn-svg .icon {
  display: block;
}

/* アニメーション-------------------------- */
.fadein{
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s 0.2s;
}
.fadein.loaded{
  opacity: 1;
}
.slidein{
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.8s 0.3s;
}
.slidein.scrollin{
  opacity: 1;
  transform: translateY(0);
}