/* スマホ表示 */
@media (max-width: 600px) {
  /* 共通項目 */

  *:focus {
    outline: none;
  }

  .flex {
    display: flex;
  }

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

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

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

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

  .grid {
    display: grid;
  }

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

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

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

  .col-gap-27 {
    column-gap: 27.5px;
  }

  .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: 10px;
    width: 150px;
  }

  header {
    height: 70px;
    margin: 0 auto;
    align-items: center;
  }

  /* ハンバーガーメニュー */
  .hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 13px;
    top   : 12px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }

  .hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #555;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 10px;
  }
  .hamburger span:nth-child(2) {
    top: 20px;
  }
  .hamburger span:nth-child(3) {
    top: 30px;
  }

  /* ナビ開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }

  nav.globalMenuSp {
    position: fixed;
    z-index : 100;
    top: 70px;
    right: 0;
    background-color: var(--first-color);
    text-align: center;
    width: 247px;
    height: 420px;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    display: none;
  }

  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    flex-flow: column;
  }

  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }

  nav.globalMenuSp ul li a {
    display: block;
    line-height: 105px;
    padding: 0px;
    height: 105px;
    text-decoration :none;
    border-bottom: none;
  }
  nav.globalMenuSp ul li a:hover {
    background-color: white;
    color: var(--first-color);
  }

  .globalMenuSp {
    display: none;
  }
  /* このクラスを、jQueryで付与・削除する */
  .globalMenuSp.active {
    opacity: 1;
    display: block;
  }

  /* ハンバーガーメニューを開いたときに背景を暗くする */
  #black-bg {
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 50;
    visibility: hidden;
    background-color: #555;
    transition-duration: .6s;
    width: 100vw;
    height: 100vh;
    opacity: 0;
  }

  #black-bg.active {
    visibility: visible;
    opacity: 0.8;
  }

  .top-message-wrapper {
    width: 347px;
    height: 108px;
    position: absolute;
    bottom: 57px;
    right: 0;

    /* style.cssの方にだけ書くとsp版ではanimationされない */
    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: 73px;
    width: 328px;
  }

  .top-message h1 {
    font-size: 40px;
    letter-spacing: 2px;
  }

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

  .top-message > * {
    margin-left: 35px;
  }

  /* 事業内容 */
  .service-img-1 {
    background-image: url('./imgs/real-estate-sp1.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 630px;
  }
  .service-img-2 {
    background-image: url('./imgs/sun-light-sp.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 630px;
  }

  .service-img-3 {
    background-image: url('./imgs/consulting-sp2.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 630px;
  }

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

  #service {
    margin-top: 37px;
  }

  #service h3 {
    margin-bottom: 8px;
    color: #CDD6DD;
    font-size: 12px;
    letter-spacing: 1.2px;
    font-family: Roboto;
  }

  #service h2 {
    margin-bottom: 38.77px;
    font-size: 23px;
    font-family: 'Noto Serif JP',serif;
    letter-spacing: 3.45px;
  }

  .service-item-details {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .service-item-details summary {
    padding-left: 28px;
  }

  .apartment-container {
  padding-top: 21px;
  margin-bottom: 76.5px;
  }

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

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

  .Comingsoon {
    margin-left: 19px;
    font-size: 15px;
  }

  .Managed {
    margin-left: 19px;
    font-size: 13px;
  }

  details:first-child{
    border-top: none;
  }

  details:last-child {
    border-bottom: none;
  }

  details {
    position: relative;
  }

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

  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: 35px;
  }

  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: 141px;
  }


  /* SDGs */
  #SDGs {
    margin-top: 94.68px;
    margin-bottom: 94.37px;
  }

  .sdgs-img {
    display: none;
  }

  .sdgs-img-sp {
    background-image: url('./imgs/sdgs-img-sp/Photo.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 289px;
    width: 100%;
  }

  .sdgs-goals  {
    height: 123px;
    text-align: center;
    margin-bottom: 37.5px;
  }

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

  .sdgs-message-sp {
    padding-right: 27px;
    padding-left: 28px;
  }

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

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

  .sdgs-message-text p {
    line-height: 25px;
    padding-right: 38px;
    padding-left: 38px;
    font-size: 15px;
    font-family: 'Noto Sans JP', serif;
    text-align: center;
  }

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

  .sdgs-item-text p {
    font-size: 14px;
    line-height: 22px;
  }

  .sdgs-item-text h4 {
    font-size: 14px;

  }

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

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

  .sdgs-item-text > * {
    line-height: 26px;
  }

  /* メッセージ */
  #message {
    height: 681px;
  }

  #message > .container {
    margin-left: 25.5px;
    margin-right: 25.5px;
  }

  #message > * {
    color: white;
  }

  .message-title {
    padding-top: 36px;
    text-align: center;
  }

  .message-title h2 {
    /* margin-top: 8px; */
    font-size: 25px;
  }

  .messge-title h3 {
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  .message-slogan {
    margin-top: 42px;
    height: 67px;
    font-size: 20px;
    line-height: 30px;
  }

  .message-text {
    margin-top: 36px;
    width: auto;
    font-size: 14px;
    line-height: 22px;
  }

  .message-by {
    padding-top: 60px;
    padding-bottom: 37px;
  }

  .message-by h3 {
    font-size: 12px;
    line-height: 24px;
    text-align: right;
  }

  .message-by h2 {
    margin-top: 8px;
    font-size: 20px;
    letter-spacing: 1.6px;
    text-align: right;
  }

.sp_br {
  display: none;
}

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

  #company h3 {
    font-size: 12px;
    letter-spacing: 1.2px;
    text-align: center;
  }

  #company h2 {
    margin-top: 5px;
    margin-bottom: 42px;
    font-size: 23px;
    letter-spacing: 3.45px;
    text-align: center;
  }

  #company dl {
    display: block;
    padding-top: 11.5px;
    padding-bottom: 11.5px;
    padding-left: 28px;
    border-bottom: 1px solid var(--border-color-2);
  }

  #company dt {
    width: 72px;
    margin-right: 75px;
    font-size: 15px;
    margin-bottom: 5px;
  }

  #company dd {
    font-size: 14px;
  }

  /* topへのボタン */
  #to-top-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--first-color);
    position: fixed;
    bottom: 66px;
    right: 26px;
  }
  #to-top-button a {
    display: block; width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
  }

  #to-top-button a::before {
    /* display: block; */
    /* content: ''; */
    height: 16px;
    width: 16px;
    border-top: solid white 4px;
    border-left: solid white 4px;
    /* position: absolute; */
    left: 50%;
    top: 13px;
  }



  /* フッター */
  footer {
    color: white;
    align-items: center;
    font-size: 10px;
  }

  footer h3 {
    padding-left: 28px;
  }

}