@charset "utf-8";
/* リセット -----------------------------------------------*/

html {
  font-size: clamp(1rem, 1.15vw, 3rem);
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  color: #333;
  line-height: 1.5;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
  color: #333;
}
ul {
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ul,
li {
  margin: 0;
  padding: 0;
}

/* 共通デザイン------------------------------------------- */
:root {
  --base-color: rgb(27, 179, 174);
  --accent-color: #29485c;
  --background-color: #d9f2f0;
}

/* 上下paddingのため*/
.main {
  width: 100%;
  padding: clamp(2rem, 1.077rem + 4.62vw, 5rem) 0;
}
/* トップページの左右paddingのためと、 
  区切りをつけたいブロック全てに。F
  marginの相殺がうまく機能する。
 */
.wrapper {
  margin: clamp(1rem, 0.077rem + 4.62vw, 4rem) 0;
  padding: 1rem clamp(0.2rem, -1.892rem + 10.46vw, 7rem);
}
/* トップページなどで全幅backgroundを付けたい場合、当要素の子に充てる
    左右paddingは.wrapperと同じにする
    上下paddingは.wrapperの上下padding + N にする
 */
.back-ground-color {
  padding: clamp(1rem, -0.231rem + 6.15vw, 5rem)
    clamp(0.2rem, -1.892rem + 10.46vw, 7rem);
  background-color: var(--background-color);
}
.title {
  font-size: clamp(1.3rem, 0.931rem + 1.85vw, 2.5rem);
  font-family: sans-serif;
  font-weight: 900;
  margin-bottom: clamp(1rem, 0.692rem + 1.54vw, 2rem);
  position: relative;
}

/* flexを多用するなら */
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 700px) {
  .flex-box {
    flex-direction: column;
    .item {
      width: 100%;
    }
  }
}
/* header---------------------------- */
#header .logo::after,
#access::after {
  content: "【ご注意ください！！】このサイトはSEO対策の評価をを目的とした架空のサイトであり、実在しないサービスや情報を掲載しています。";
  position: absolute;
  font-size: clamp(0.9rem, 0.777rem + 0.62vw, 1.3rem);
  color: rgb(212, 6, 6);
  background-color: #ffffff83;
  width: 100%;
  top: 120px;
  left: 0;
  z-index: 2;
  animation: caution 3s ease infinite;
}
#access::after {
  top: -50px;
}
@keyframes caution {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ham {
  display: none;
}
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;

  .logo {
    margin-left: clamp(1rem, 0.385rem + 3.08vw, 3rem);
    & a {
      font-size: clamp(1rem, 0.692rem + 1.54vw, 2rem);
    }
  }
  .nav-menu {
    gap: 3rem;
  }
  .contact {
    background-color: var(--accent-color);
    height: auto;
    padding: 25px clamp(0.625rem, 0.24rem + 1.92vw, 1.875rem);
    font-size: clamp(0.8rem, 0.738rem + 0.31vw, 1rem);
    transition: 0.2s ease-in;
    & a {
      color: #fff;
    }
  }
  .contact:hover {
    opacity: 0.8;
  }
}

/* footer--------------------------- */
#footer {
  position: relative;
  background-color: var(--accent-color);
  color: #fff;
  z-index: 1;
  overflow: hidden;
  .container {
    padding: clamp(2rem, 1.077rem + 4.62vw, 5rem);
    & p {
      font-size: 0.85rem;
    }
  }
  .logo {
    font-size: 1.3rem;
    border: 1px solid #fff;
    width: fit-content;
    padding: 0.5rem;
  }
  & a {
    color: #fff;
  }
  .footer-nav-menu.flex-box {
    gap: clamp(0.5rem, -0.269rem + 3.85vw, 3rem);
  }
  .copy {
    text-align: center;
    font-size: 0.8rem;
    padding-bottom: 0.5rem;
  }
}
#footer::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  rotate: 30deg;
  background-image: url(../img/treble_clef.svg);
  top: -30px;
  left: 67%;
  z-index: -1;
}
#footer::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  rotate: -20deg;
  background-image: url(../img/music-note.svg);
  top: 0;
  left: 30%;
  z-index: -1;
}