@media screen and (max-width: 960px) {
  html {
    font-size: 14px;
  }
  /* body {
    background: linear-gradient(to bottom,#ffffff, #eee, #D05A6E);
  } */
  
  header h2 {
    font-size: 2.2rem;
  }
  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(248, 174, 62, 0.9), rgba(7, 255, 214, 0.8), rgba(23, 20, 194, 0.9));
    font-size: 1.8rem;
  }
  .gMenu .menu .nav-list {
    width: 30%;
  }
  .sp-first-view {
    width: 100%;
    height: 1020px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    font-size: 2.6em;
    width: 95%;
    top: 240px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 3.9em;
    top: 860px;
    left: 59%;
  }
  
  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
  }
  .link-list span {
    font-size: 1.5rem;
    width: 57%;
    background-color:  rgba(255, 255, 255, 0.8);
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: none;
  }

  .address {
    font-size: 1.3rem;
    left: 6%;
    top: 17%;
  }
  #company-name {
    font-size: 2.7rem;
    right: 7%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 8.3%;
    bottom: 14%;
  }
  .twitter-icon {
    left: 16%;
    bottom: 14%;
  }
  .pinterest-icon {
    left: 23%;
    bottom: 13%;
  }
  .base-icon {
    left: 30%;
    bottom: 8%;
  }

  .arrow-wrapper {
    bottom: 138px;
    right: 1%;
    z-index: 1;
  }
}

@media screen and (max-width: 830px) {
  html {
    font-size: 12px;
  }
  header h2 {
    font-size: 2.2rem;
  }
  .to-home:hover .logo {
    opacity: 0.3;
  }
  
  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(248, 174, 62, 0.9), rgba(7, 255, 214, 0.8), rgba(23, 20, 194, 0.9));
  }
  .gMenu .menu .nav-list {
    width: 29%;
  }
  .sp-first-view {
    width: 100%;
    height: 924px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    font-size: 2.6em;
    width: 95%;
    top: 246px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 3.9em;
    top: 786px;
    left: 58%;
  }
  
  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
  }
  .link-list span {
    font-size: 1.5rem;
    width: 57%;
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: none;
  }

  .address {
    font-size: 1.3rem;
    left: 5%;
    top: 20%;
  }
  #company-name {
    font-size: 2.8rem;
    right: 7%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 8%;
    bottom: 12%;
  }
  .twitter-icon {
    left: 17%;
    bottom: 12%;
  }
  .pinterest-icon {
    left: 25%;
    bottom: 10%;
  }
  .base-icon {
    left: 34%;
    bottom: 6%;
  }

  .arrow-wrapper {
    bottom: 138px;
    z-index: 1;
  }
}

@media screen and (max-width: 700px) {
  html {
    font-size: 10px;
  }
  header h2 {
    font-size: 2.2rem;
  }
  .gMenu .menu .nav-list {
    width: 26%;
    font-size: 1.7rem;
  }

  .sp-first-view {
    width: 100%;
    height: 820px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    font-size: 2.6em;
    width: 95%;
    top: 215px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 3.9em;
    top: 730px;
    left: 50%;
  }
  
  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
  }
  .link-list span {
    font-size: 1.5rem;
    width: 57%;
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: none;
  }

  .address {
    font-size: 1.3rem;
    left: 5%;
    top: 23%;
  }
  #company-name {
    font-size: 3rem;
    right: 6%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 8%;
    bottom: 11%;
  }
  .twitter-icon {
    left: 17%;
    bottom: 11%;
  }
  .pinterest-icon {
    left: 25%;
    bottom: 10%;
  }
  .base-icon {
    left: 33.6%;
    bottom: 5.5%;
  }
}

@media screen and (max-width: 590px) {
  html {
    font-size: 8px;
  }
  header h2 {
    font-size: 2.2rem;
  }

  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(248, 174, 62, 0.9), rgba(7, 255, 214, 0.8), rgba(23, 20, 194, 0.9));
  }
  .gMenu .menu .nav-list {
    width: 30%;
    font-size: 2rem;
  }
  .sp-first-view {
    width: 100%;
    height: 750px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    font-size: 2.6em;
    width: 95%;
    top: 264px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 4.5em;
    top: 660px;
    left: 52%;
  }

  .link-list span {
    font-size: 1.5rem;
    width: 57%;
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: none;
  }

  footer {
    height: 115px;
  }
  .address {
    font-size: 1.4rem;
    left: 5%;
    top: 20%;
  }
  #company-name {
    font-size: 3rem;
    right: 6%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 5%;
    bottom: 13%;
  }
  .twitter-icon {
    left: 15.5%;
    bottom: 14%;
  }
  .pinterest-icon {
    left: 25%;
    bottom: 12%;
  }
  .base-icon {
    left: 35%;
    bottom: 7%;
  }
}

@media screen and (max-width: 490px) {
  html {
    font-size: 8px;
  }
  header {
    height: 70px;
  }
  header h2 {
    font-size: 2.2rem;
    }
    
  .logo {
    height: 60px;
  }
  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(229, 63, 63, 0.9), rgba(255, 193, 7, 0.9), rgba(67, 241, 38, 0.9));    overflow: hidden;
    overflow: hidden;
    max-height: 0; /* ★最初は高さを0にして非表示状態に */
    transition: max-height .5s; /* 表示されるときのアニメーション */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Yu Gothic', sans-serif;
    font-size: 1.5em;
    color: #FFF;
    font-weight: bolder;
    text-shadow: 1px 1px 1px #333;
    height: 100vh; /* 画面の縦幅に合わせる */
    list-style: none; /* リストのマーカーを非表示にする */
  }
  .gMenu .menu .nav-list {
    width: 35%;
    font-size: 2rem;
  }

  .top-page main {
   padding-top: 70px;
  }
  .sp-first-view {
    width: 100%;
    height: 750px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    font-size: 2.6em;
    width: 95%;
    top: 264px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 4.5em;
    top: 660px;
    left: 45%;
  }

  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
  
  }
  .link-list span {
    font-size: 1.5rem;
    width: 57%;
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: inline;
  }

  footer {
    height: 115px;
  }
  .address {
    font-size: 1.5rem;
    left: 5%;
    top: 20%;
  }
  #company-name {
    font-size: 2.6rem;
    right: 6%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 5%;
    bottom: 13%;
  }
  .instagram-icon img {
    height:auto;
    width: 58%;
  }
  .twitter-icon {
    left: 17%;
    bottom: 13%;
  }
  .twitter-icon img {
    height:auto;
    width: 51%;
    }
  .pinterest-icon {
    position: absolute;
    left: 28%;
    bottom: 12%;
  }
  .pinterest-icon img {
    height:auto;
    width: 60%;
  }
  .base-icon {
    left: 39.1%;
    bottom: 9%;
  }
  .base-icon img {
    height:auto;
    width: 62%;
  }  
}

@media screen and (max-width: 414px) {
  html {
    font-size: 8px;
  }
  header {
    height: 50px;
  }
  header h2 {
    font-size: 2.2rem;
    }
    
  .logo {
    height: 40px;
  }

  .gMenu .menu-icon {
    right: 4vw;
    top: 20px;
  }
  /* メニューアイコン（三本線）の真ん中の線です */
  .gMenu .menu-icon .navicon {
    height: 1.5px; /* 太さ */
    width: 35px; /* 長さ */
  }
  .gMenu .menu-icon .navicon::before {top: 7px;} /* 位置を上にずらしています */
  .gMenu .menu-icon .navicon::after {top: -7px;} /* 位置を下にずらしています */
  /* 表示されるメニューです */
  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(229, 63, 63, 0.9), rgba(255, 193, 7, 0.9), rgba(67, 241, 38, 0.9));    overflow: hidden;
  }
  .gMenu .menu .nav-list {
    width: 39%;
    font-size: 2rem;
  }

  .top-page main {
   padding-top: 50px;
  }
  .sp-first-view {
    width: 100%;
    height: 846px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    font-size: 2.6em;
    width: 95%;
    top: 264px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 4.5em;
    top: 660px;
    left: 45%;
  }

  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
  }
  .link-list span {
    font-size: 1.5rem;
    width: 67%;
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: inline;
  }

  footer {
    height: 100px;
  }
  .address {
    font-size: 1.3rem;
    left: 4%;
    top: 10%;
  }
  #company-name {
    right: 6%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 5%;
    bottom: 14%;
  }
  .instagram-icon img {
    height:auto;
    width: 55%;
  }
  .twitter-icon {
    left: 18%;
    bottom: 14%;
  }
  .twitter-icon img {
    height:auto;
    width: 49%;
    }
  .pinterest-icon {
    left: 29%;
    bottom: 13%;
  }
  .pinterest-icon img {
    height:auto;
    width: 60%;
  }
  .base-icon {
    left: 40%;
    bottom: 9%;
  }
  .base-icon img {
    height:auto;
    width: 62%;
    }  
}

@media screen and (max-width: 375px) {
  html {
    font-size: 8px;
  }
  header {
    height: 50px;
  }
  header h2 {
    font-size: 2.2rem;
    }
    
  .logo {
    height: 40px;
  }

  /* メニューアイコンを画面右上に固定しています */
  .gMenu .menu-icon {
    right: 4vw;
    top: 20px;
  }
  /* メニューアイコン（三本線）の真ん中の線です */
  .gMenu .menu-icon .navicon {
    height: 1.5px; /* 太さ */
    width: 35px; /* 長さ */
  }
  .gMenu .menu-icon .navicon::before {top: 7px;} /* 位置を上にずらしています */
  .gMenu .menu-icon .navicon::after {top: -7px;} /* 位置を下にずらしています */
  /* 表示されるメニューです */
  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(229, 63, 63, 0.9), rgba(255, 193, 7, 0.9), rgba(67, 241, 38, 0.9));    overflow: hidden;
  }
  .gMenu .menu .nav-list {
    width: 40%;
    font-size: 2rem;
  }

  .top-page main {
   padding-top: 50px;
  }
  .sp-first-view {
    width: 100%;
    height: 617px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
    .first-view {
    display: none;
  }
  @keyframes fadeAnimation {
    from { opacity: 0; } /* 初期状態（透明度0） */
    to { opacity: 1; } /* 最終状態（透明度1） */
  }
  .top-page h2 {
    font-size: 2.6em;
    width: 95%;
    top: 110px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 4.5em;
    top: 456px;
    left: 37%;
  }
  
  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
  }
  .link-list span {
    font-size: 1.5rem;
    width: 73%;
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: inline;
  }

  footer {
    font-size: 7px;
    height: 100px;
  }
  .address {
    font-size: 1.3em;
    left: 4%;
    top: 10%;
  }
  #company-name {
    font-size: 2.6em;
    right: 6%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 5%;
    bottom: 13%;
  }
  .instagram-icon img {
    height:auto;
    width: 55%;
  }
  .twitter-icon {
    left: 17.5%;
    bottom: 14%;
  }
  .twitter-icon img {
    height:auto;
    width: 49%;
    }
  .pinterest-icon {
    left: 29%;
    bottom: 13%;
  }
  .pinterest-icon img {
    height:auto;
    width: 60%;
  }
  .base-icon {
    left: 40%;
    bottom: 8%;
  }
  .base-icon img {
    height:auto;
    width: 62%;
  }  
  .arrow-circle {
    display: none;
  }
}


@media screen and (max-width: 360px) {
  html {
    font-size: 8px;
  }
  header {
    height: 50px;
  }
  header h2 {
    font-size: 2.2rem;
    }
    
  .logo {
    height: 40px;
  }

  /* メニューアイコンを画面右上に固定しています */
  .gMenu .menu-icon {
    right: 4vw;
    top: 20px;
  }
  /* メニューアイコン（三本線）の真ん中の線です */
  .gMenu .menu-icon .navicon {
    height: 1.5px; /* 太さ */
    width: 35px; /* 長さ */
  }
  /* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
  .gMenu .menu-icon .navicon::before {top: 7px;} /* 位置を上にずらしています */
  .gMenu .menu-icon .navicon::after {top: -7px;} /* 位置を下にずらしています */
  /* 表示されるメニューです */
  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(229, 63, 63, 0.9), rgba(255, 193, 7, 0.9), rgba(67, 241, 38, 0.9));    overflow: hidden;
  }
  .gMenu .menu .nav-list {
    width: 45%;
    font-size: 2rem;
  }

  .top-page main {
   padding-top: 50px;
  }
  .sp-first-view {
    width: 100%;
    height: 518px;
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    font-size: 2.2em;
    width: 95%;
    top: 100px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 4.5em;
    top: 386px;
    left: 28%;
  }

  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
  }
  .link-list span {
    font-size: 1.5rem;
    width: 85%;
    background-color:  rgba(255, 255, 255, 0.8);
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }
  .link-list li:nth-last-child(-n+2) {
    margin-bottom: 3.9%;
  }

  .sp-br {
    display: inline;
  }

  footer {
    font-size: 6.5px;
    height: 100px;
  }
  .address {
    font-size: 1.3em;
    left: 4%;
    top: 13%;
  }
  #company-name {
    font-size: 2.6em;
    right: 5%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 5%;
    bottom: 14%;
  }
  .instagram-icon img {
    height:auto;
    width: 45%;
  }
  .twitter-icon {
    left: 17%;
    bottom: 14%;
  }
  .twitter-icon img {
    height:auto;
    width: 40%;
    }
  .pinterest-icon {
    left: 29%;
    bottom: 13%;
  }
  .pinterest-icon img {
    height:auto;
    width: 52%;
  }
  .base-icon {
    left: 40%;
    bottom: 9%;
  }
  .base-icon img {
    height:auto;
    width: 54%;
  }  
}

@media screen and (max-width: 320px) {
  html {
    font-size: 8px;
  }
  header {
    height: 50px;
  }
  header h2 {
    font-size: 2.2rem;
    }
    
  .logo {
    height: 40px;
  }
  
  /* メニューアイコンを画面右上に固定しています */
  .gMenu .menu-icon {
    right: 4vw;
    top: 20px;
  }
  /* メニューアイコン（三本線）の真ん中の線です */
  .gMenu .menu-icon .navicon {
    height: 1.5px; /* 太さ */
    width: 35px; /* 長さ */
  }
  .gMenu .menu-icon .navicon::before {top: 7px;} /* 位置を上にずらしています */
  .gMenu .menu-icon .navicon::after {top: -7px;} /* 位置を下にずらしています */
  /* 表示されるメニューです */
  .gMenu .menu {
    background:linear-gradient(to bottom, rgba(229, 63, 63, 0.9), rgba(255, 193, 7, 0.9), rgba(67, 241, 38, 0.9));    overflow: hidden;
  }
  .gMenu .menu .nav-list {
    width: 45%;
    font-size: 2rem;
  }

  .top-page main {
   padding-top: 50px;
  }
  .sp-first-view {
    width: 320px;
    height: 518px;
    display: block;
    margin: 0px auto;
    object-fit: cover;
    animation: fadeAnimation 1s ease-in-out forwards; /* 0.5秒かけてふわっと表示するアニメーションを適用 */
    opacity: 0; /* 初期状態では透明にする */
    border-radius: 3px;
    position: relative;
    filter: saturate(150%) brightness(88%) contrast(150%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
    .first-view {
    display: none;
  }
  .top-page h2 {
    width: 304px;
    top: 100px;
    left: 5%;
    line-height: 2.5;
  }
  .top-page .infour {
    font-size: 4rem;
    top: 386px;
    left: 33%;
    width: 216px;
  }
  
  .link-list {
    animation: fadeAnimation 1.5s ease-in-out forwards;
    width: 320px;
  }
  .link-list span {
    font-size: 1.5rem;
    width: 85%;
  }
  .link-list .qanda span {
    width: 7em;
  }
  .link-list .contact span {
    width: 9em;
  }

  .sp-br {
    display: inline;
  }

  footer {
    font-size: 6px;
    height: 100px;
    width: 320px;
  }
  .address {
    font-size: 1.3em;
    left: 4%;
    top: 17%;
  }
  #company-name {
    font-size: 2.5em;
    right: 5%;
    bottom: 35%;
  }
  .instagram-icon {
    left: 6%;
    bottom: 14%;
  }
  .instagram-icon img {
    height:auto;
    width: 45%;
  }
  .twitter-icon {
    left: 18%;
    bottom: 14%;
  }
  .twitter-icon img {
    height:auto;
    width: 40%;
    }
  .pinterest-icon {
    left: 29%;
    bottom: 13%;
  }
  .pinterest-icon img {
    height:auto;
    width: 52%;
  }
  .base-icon {
    left: 40%;
    bottom: 9%;
  }
  .base-icon img {
    height:auto;
    width: 54%;
  }  
}