section.hero{
  position: relative;
  /* background-color: #000; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  & h1 img{
    position: relative;
    z-index: 10;
    width: 600px;
  }
  & img.cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

section.company-profile{
  & dl {
      display: flex;
      flex-direction: column;
      align-items: center;
    & div{
      display: flex;
      width: 45%;
      justify-content: space-between;
      /* margin-bottom: 18px; */
      line-height: 3;
      border-bottom: 1px solid #eee;
      padding: 0 15px;
      &:first-child{
        border-top: 1px solid #eee;
      }
      & dd{
        & span{
          &::after{
            display: inline-block;
            content: '／';
            margin: 0;
          }
          &:last-child
          {
            &::after{
              display: none;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
	section.company-profile{
	  & dl {
		& div{
		  width: 95%;
			display: block;
			padding: 0;
		  & dd{
			  text-align: right;
			  margin: 0 0 15px;
			  line-height: 1.4;
        & span{
          display: block;
          &::after{
            display: none;
          }
      }
			}
		}
	  }
	}
}


section.service {
  & ul {
    display: flex;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
    gap: 60px 20px;

    & li {
      width: calc((100% - (10px * 2)) / 2);

      & h3 {
        display: inline;
      }

      & span {
        font-size: 12px;
        margin-left:20px;
        display: inline;
      }

      & img {
        width: 100%;
        margin: 0 auto;
        flex-grow: 1;
      }

      & .explanation {
        font-size: 14px;
        margin-bottom: 10px;
      }

      & div {
        display: flex;
        gap: 0 20px;

        & a {
          font-size: 14px;
            line-height: 2;
          display: flex;
          &.details{
            background-color: #b22222;
            color: #fff;
            padding: 0 7px;
            border-radius: 5px;
          }
          &.map{
          font-size: 14px;
          align-items: center;
          }
          & i {
            color: #b22222;
          }
        }
      }
    }
  }

  & h4 {
    margin: 100px auto;
    text-align: center;
    font-size: 30px;
    line-height: 2;

    &.line-title {
      position: relative;
      display: block;
      color: transparent; /* 最初は文字を透明に */
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: #000;
        transform: translateX(-101%);
        z-index: 1;
      }

      &.active {
        color: #000; /* テキストを表示 */
        transition: color 0s 0.6s; /* 線が通過した後に表示 */

        &::before {
            animation: lineSlide 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
        }
      }
    }
  }
}

/* アニメーション定義は外に置く */
@keyframes lineSlide {
  0%   { transform: translateX(-101%); }
  100% { transform: translateX(101%); }
}

@media (max-width: 768px) {
	section.service{
	  & ul{
      width: 90%;
		margin: 0 auto;

		& li{
      text-align: center;
		  width: 100%;
		  & p {
		  }
		  & img {
			  width: 300px;
		  }
      & div{
        justify-content: center;
      }
		}
	  }
	}
}


section.contact{
  & .contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
    & label {
      font-weight: 600;
      margin-bottom: -15px;
    }
    & input,
    & textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 16px;
      margin-bottom: 15px;
    }

    & button {
      background-color: #333;
      color: #fff;
      padding: 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: opacity 0.3s;
      width: 200px;
      margin: 15px auto 0;
    }

    & button:hover {
      opacity: 0.7;
    }
  }
}


@media (max-width: 768px) {
	section.contact{
		width: 90%;
		margin: 0 auto;
	  &.contact-form {
		& label {
			margin-bottom: -15px;
		}
		& input,
		& textarea {
			margin-bottom: 15px;
		}
		& button {
		}
	  }
	}
}


section.news {
  & ul{
    max-width: 900px;
    width: 45%;
    margin: 0 auto;
    display: flex;
    flex-direction:column;
    & li{
      display: flex;
      line-height: 3;
      border-bottom: 1px solid #eee;
      gap: 0 20px;
      &:first-child {
        border-top: 1px solid #eee;
      }
      & p.titile{
        letter-spacing: -0.04rem;
      }
    }
  }
}

@media (max-width: 768px) {
  section.news {
    & ul{
		width: 90%;
		margin: 0 auto;
      & li{
        display: flex;
        line-height: 3;
        border-bottom: 1px solid #eee;
        gap: 0 20px;
        &:first-child {
          border-top: 1px solid #eee;
        }
      }
    }
  }
}

section.message{
  background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
  padding: 80px 20px;
  & p{
    margin: 0 auto;
    text-align: center;
    line-height: 4;
    letter-spacing: .2rem;
    &.signature {
  margin-top: 40px;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 16px;
}
  }
}


section.policy {
  & ul {
    max-width: 900px;
    width: 45%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    line-height: 4;

    & li {
      display: flex;
      flex-direction: column; /* 中にcontentを入れるため縦並び */
      border-bottom: 1px solid #eee;

      &:first-child {
        border-top: 1px solid #eee;
      }

      & .accordion-header {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: none;
        border: none;
        font-size: 16px;
        text-align: left;
        cursor: pointer;
        padding: 0;
        line-height: 4;

        & i {
          color: #333;
        }
      }

      & .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        font-size: 14px;
        line-height: 1.8;
        padding: 0 0 0 30px; /* アイコン位置に合わせて余白 */
      }
    }
  }
}

@media (max-width: 768px) {
  section.policy {
    & ul{
		width: 90%;
		margin: 0 auto;
    }
  }
}



/* ===== Modal ===== */
.modal{position:fixed;inset:0;display:none!important;place-items:center;background:rgba(0,0,0,.5);z-index:9999}
.modal.is-open{display:grid!important}
.modal__panel{width:min(520px,90vw);background:#fff;border-radius:12px;padding:28px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25);outline:none}
.modal__title{font-size:20px;margin:0 0 8px;font-weight:700;width: 100%;}
.modal__text{margin:0 0 16px;line-height:1.7;width: 100%;
    text-align: center;}
.modal__close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:24px;cursor:pointer}
.modal__ok{min-width:120px;padding:10px 16px;border-radius:8px;border:0;background:#111;color:#fff;cursor:pointer}

/* 低モーション設定の人にはアニメ無効 */
@media (prefers-reduced-motion: no-preference) {
  .modal__panel { transform: translateY(10px); opacity: 0; transition: .2s; display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
  .modal.is-open .modal__panel { transform: none; opacity: 1; }
}