:root {
  --first-color: #B9E9F9;
  --border-color-1: #ACACAC;
  --border-color-2: #CDD6DD;
}

/* 共通項目 */
*:focus {
outline: none;
}

*{
outline: none;
}

a {
  cursor: pointer;
}

.flex {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-spacebetween {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}


.text-align-center {
  text-align: center;
}

.grid {
  display: grid;
}

.col-3 {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.col-gap-10 {
  column-gap: 10px;
}

.row-gap-10 {
  row-gap: 10px;
}

.container {
  max-width: 1002px;
  margin: 0 auto;
}

.container-2 {
  max-width: 1920px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  max-height: 100%;
}

/* ヘッダー */
.logo {
  padding-left: 30px;
  width: 250px;
  transform:rotate(3.4deg)
}

header {
  height: 108px;
  width: 100%;
  margin: 0 auto;
  /* align-items: center; */
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 10;
}

header > .container-2 {
  height: 100%;
}

header ul {
  width: 529px;
  padding-right: 63px;
}

header a {
  display: inline-block;
  padding: 10px;
  border-bottom: 2px solid white;
  font-family: 'Noto Serif JP', serif;
}

header a:hover {
  transition: all 0.4s;
  border-bottom: 2px solid var(--first-color);

}

.hero-img {
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
}

.top-message-wrapper {
  opacity: 0;
  background-color: white;
  width: 486px;
  height: 125px;
  position: absolute;
  bottom: 175px;
  right: 0;
  justify-content: flex-end;
  align-items: center;
  animation-name: fadeIn;
  animation-duration: 2s;          /* 1回のanimationの長さ */
  animation-timing-function: ease; /* 開始と修了を滑らかに*/
  animation-delay: 1.5s;           /* animation開始までの時間*/
  animation-iteration-count: 1;  /* 繰り返し回数 */
  animation-fill-mode: forwards; /* animation終了時に状態を保つ */
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* 開始時に完全に透明 */
  }
  100% {
    opacity: 1; /* 修了時に完全に不透明*/
  }
}

.top-message {
  border-left: solid 8px #CDD6DD;
  height: 85px;
  width: 461px;
}

.top-message h1 {
  font-size: 60px;
  letter-spacing: 1.8px;
}

.top-message p {
  font-size: 15px;
  letter-spacing: 0.75px;
}

.top-message > * {
  font-family: 'Noto Serif JP';
  margin-left: 25px;
}

/* 事業内容 */
.service-img-1 {
  background-image: url('./imgs/real-estate.svg');
  height: 403px;
}
.service-img-2 {
  background-image: url('./imgs/sun-light.svg');
  height: 403px;
}

.service-img-3 {
  background-image: url('./imgs/consulting.svg');
  height: 403px;
}

.apartment-item {
  text-align: center;
}

#service {
  margin-top: 204px;
}

#service h3 {
  margin-bottom: 8px;
  color: #CDD6DD;
  font-size: 16px;
  font-family: Roboto;
}

#service h2 {
  margin-bottom: 105px;
  font-size: 45px;
  font-family: 'Noto Serif JP',serif;
  letter-spacing: 6.75px;
}

.service-item-details {
  padding-top: 47px;
  padding-bottom: 161px;
}
.service-item-details summary {
  padding-left: 26px;
}

.apartment-item img{
  width: 317px;
  height: 253px;
}

.apartment-container {
padding-top: 21px;

margin-bottom: 76.5px;
}

.apartment-item h4 {
  font-size: 22px;
  font-family: 'Noto Serif JP', serif;
  margin-top: 12px;
  margin-bottom: 5px;
}

.apartment-item h5 {
  font-size: 14px;
  font-family: 'Noto Sans JP', serif;
  margin-bottom: 51px;
}

.Comingsoon {
  margin-left: 19px;
  color: var(--border-color-2);
  font-size: 18px;
  font-family: Noto Serif JP;
}

.Managed {
  margin-left: 19px;
  color: var(--border-color-2);
  font-size: 18px;
  font-family: Noto Serif JP;
}

details:first-child{
  border-top: 1px var(--border-color-2) solid;
  border-bottom: 1px var(--border-color-2) solid;
}

details:not(first-child){
  border-bottom: 1px var(--border-color-2) solid;
}

details {
  position: relative;
  outline: none;
  transition: .7s;
}

summary {
  /* デフォルトの矢印削除 */
  display: block; /* Chrome、Safari以外 */
  cursor: pointer;
  padding-top: 20.5px;
  padding-bottom: 20.5px;
  font-size: 20px;
  font-family: 'Noto Serif JP', serif;
  outline: none;
}

summary::-webkit-details-marker {
  /* デフォルトの矢印削除 */
  display: none;  /* Chrome、Safari */
}

summary::before, summary::after {
  display: inline-block;
  content: '';
  width: 20px;
  border-top: 2px solid #69d3fa;
  position: absolute;
  right: 26px;
  top: 28.5px;
}

summary::after {
  transform-origin: 50% 50% 0; /* 要素の中心を回転軸に指定 */
  transition-duration: 0.5s;
  transform: rotate(90deg);
}

details[open] summary::after {
  transition-duration: 0.5s;
  transform: rotate(0deg);
}

details.empty-details[open] {
  height: 118px;
}

/* SDGs */
#SDGs {
  margin-top: 259px;
  margin-bottom: 286px;
}

.sdgs-img {
  background-image: url('./imgs/SDGs-sky.png');
  height: 860px;
  width: 51%;
}

.sdgs-goals  {
  height: 123px;
  margin-top: 50px;
  text-align: center;
}

.sdgs-message {
  padding-left: 31px;
}

.sdgs-message-text {
  margin-bottom: 100px;
}

.sdgs-message-text h3 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 32px;
  font-family: 'Noto Serif JP', serif;
}

.sdgs-message-text p {
  font-size: 17px;
  font-family: 'Noto Sans JP', serif;
}

.sdgs-item:not(:last-child) {
  margin-bottom: 15.69px;
}

.sdgs-item img {
  height: 117px;
  width: 117px;
}

.sdgs-item-text {
  margin-left: 15.69px;
  display: flex;
  max-width: 268px;
  flex-direction: column;
  justify-content: center;
}

.sdgs-item-text > * {
  line-height: 26px;
  font-family: 'Noto Sans JP', sans-serif;
}

.sdgs-item-text h4 {
  font-weight: bold;
}

/* メッセージ */
#message {
  background-image: url('./imgs/bokashi_beach-1852945_1920.jpg');
  height: 847px;
}

#message > * {
  color: white;
}

.message-title {
  padding-top: 81.3px;
}

.message-title h2 {
  margin-top: 8px;
  font-size: 45px;
  font-family: 'Noto Serif JP', sans-serif;
}

.messge-title h3 {
  font-size: 16px;
  letter-spacing: 1.6px;
  font-family: 'Roboto';
}

.message-slogan {
  margin-top: 69.05px;
  height: 113px;
  font-size: 30px;
  font-family: 'Noto Serif JP', sans-serif;
}

.message-text {
  margin-top: 24.95px;
  height: 303px;
  width: 555px;
  font-size: 17px;
  font-family: 'Noto Serif JP', sans-serif;
  line-height: 26px;
}

.message-by {
  padding-top: 25px;
}
.message-by h3 {
  font-size: 12px;
  font-family: 'Noto Serif JP', sans-serif;
}

.message-by h2 {
  margin-top: 8px;
  font-size: 26px;
  font-family: 'Noto Sans JP', serif;
  letter-spacing: 2.08px;
}

/* 会社概要 */
#company {
  margin-top: 200.3px;
  margin-bottom: 281.7px;
}

#company h3 {
  font-size: 14px;
  color: #CDD6DD;
  font-family: 'Roboto';
}

#company h2 {
  margin-top: 15.62px;
  margin-bottom: 57px;
  font-size: 40px;
  font-family: 'Noto Serif JP', sans-serif;
}

#company dl {
  display: flex;
  justify-content: flex-start;
  padding-top: 18.5px;
  padding-bottom: 18.5px;
  border-bottom: 1px solid var(--border-color-2);
  font-size: 18px;
  font-family: 'Noto Sans JP', serif;
}

dt {
  width: 72px;
  margin-right: 75px;
  color: #707F89;
}

/* topへのボタン */
#to-top-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--first-color);
  position: fixed;
  bottom: 100px;
  right: 100px;
}

#to-top-button a {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
}

#to-top-button a::before {
  display: block;
  content: '';
  height: 20px;
  width: 20px;
  border-top: solid white 5px;
  border-left: solid white 5px;
  position: absolute;
  top: 18.68px;
  left: 50%;
  transform-origin: 0 0 0; /* 回転中心を左上に設定 */
  transform: rotate(45deg);
}

/* フッター */
footer {
  height: 50px;
  background-color: black;
  color: white;
  align-items: center;
  font-family: 'Noto Sans JP';
}

footer h3 {
  padding-left: 60px;
}

/* firefoxの時の会社概要の表示 */
@-moz-document url-prefix(){
  /* 会社概要 */
  #company {
    margin-top: 200.3px;
    margin-bottom: 281.7px;
  }

  #company h3 {
    font-size: 14px;
    color: #CDD6DD;
    font-family: 'Roboto';
  }

  #company h2 {
    margin-top: 15.62px;
    margin-bottom: 57px;
    font-size: 40px;
    font-family: 'Noto Serif JP', sans-serif;
  }

  #company dl {
    display: flex;
    justify-content: flex-start;
    padding-top: 18.5px;
    padding-bottom: 18.5px;
    border-bottom: 1px solid var(--border-color-2);
    font-size: 18px;
    font-family: 'Noto Sans JP', serif;
  }

  dt {
    width: 80px;
    margin-right: 75px;
    color: #707F89;
  }
}
/* Safariの時の会社概要の表示 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    _::-webkit-full-page-media, _:future, :root
    /* 会社概要 */
    #company {
      margin-top: 200.3px;
      margin-bottom: 281.7px;
    }

    #company h3 {
      font-size: 14px;
      color: #CDD6DD;
      font-family: 'Roboto';
    }

    #company h2 {
      margin-top: 15.62px;
      margin-bottom: 57px;
      font-size: 40px;
      font-family: 'Noto Serif JP', sans-serif;
    }

    #company dl {
      display: flex;
      justify-content: flex-start;
      padding-top: 18.5px;
      padding-bottom: 18.5px;
      border-bottom: 1px solid var(--border-color-2);
      font-size: 18px;
      font-family: 'Noto Sans JP', serif;
    }

    dt {
      width: 80px;
      margin-right: 75px;
      color: #707F89;
    }
}