@font-face {
  font-family: 'ABCDiatypeEdu-light.woff'; 
  src: url('fonts/ABCDiatypeEdu-Light.woff') format('woff');
  font-feature-settings:"ss07";
}

html {
  height: 100%;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0px auto;
  color: #656565;
  font-family: 'ABCDiatypeEdu-light.woff', Helvetica, Arial, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  text-rendering: geometricPrecision;
  animation: fade-in 3s;
  animation-fill-mode: forwards;
  background-color: #f7f6f5;
  overflow-x: hidden;

}

#top {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100svh;
    min-height: 100dvh;
    background-image: url("assets/top-image.JPG");
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    background-color: #d8d8d8;
    animation: fade-in 3s;
    animation-fill-mode: forwards;
}

#top::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    background-color: inherit;
}


.logo {
  position: fixed; /* 画面を基準に位置を固定 */
  --logo-line-height: 1.05;
  top: clamp(18px, 4vw, 26px);         
  right: clamp(18px, 4vw, 36px);        
  font-size: clamp(22px, 5vw, 30px);
  line-height: var(--logo-line-height);
  text-decoration: none;
  color: #ecf2fe;
  z-index: 1;
}

.hover-text {
  color: #ecf2fe;
}

/* 通常時の設定 */
.logo .default-text {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.logo .hover-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 0.67em;
  line-height: var(--logo-line-height);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ホバー時の入れ替え設定 */
.logo:hover .default-text {
  opacity: 0;
}

.logo:hover .hover-text {
  opacity: 1;
  pointer-events: auto;
}

.logo:focus-within .default-text {
  opacity: 0;
}

.logo:focus-within .hover-text {
  opacity: 1;
  pointer-events: auto;
}

a {
  text-decoration: none;
  color: #ecf2fe;
}

section {
  margin: clamp(20px, 4vw, 30px);
}

.info-content {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) minmax(0, 2fr);
  column-gap: clamp(28px, 7vw, 96px);
  align-items: start;
}

.info-content > div {
  max-width: 760px;
  min-width: 0;
}

.headline {
  margin-top: clamp(72px, 12vw, 150px);
  font-size: clamp(21px, 3vw, 24px);
}

.info-content p {
  line-height: 2.3;
  overflow-wrap: anywhere;
}

.button {
  display: block;
  width: 30px;
  height: 30px;
  background-color: green;
  border-radius: 50%;
}



@media (max-width: 720px), (hover: none), (pointer: coarse) {
  .logo .hover-text {
    position: static;
    margin-top: 10px;
    opacity: 1;
    pointer-events: auto;
  }

  .logo:hover .default-text,
  .logo:focus-within .default-text {
    opacity: 1;
  }
}

@media (max-width: 720px) {
  #top {
    background-position: -100px 0;
  }

  .logo .hover-text {
    position: fixed;
    top: auto;
    right: clamp(18px, 4vw, 36px);
    bottom: clamp(18px, 4vw, 26px);
    left: auto;
    width: auto;
    margin-top: 0;
    text-align: right;
  }

  .info-content {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .button {
    width: 24px;
    height: 24px;
  }

  .headline {
    margin-top: 56px;
  }

  .headline:first-child {
    margin-top: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}