@charset "UTF-8";
/* 文字コードの指定 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
/*-------------------------------------------------------------------------------- 
    HEADERのスタイル
--------------------------------------------------------------------------------*/
/* ヘッダー */
.header {
    position: fixed;
    top: 0;
    left:0;
    z-index: 99;
    width: 100vw;
    background-color: var(--white);
    box-sizing: border-box;
    opacity:0.9;
}
.header_wrap{
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    height: 8rem;   
    margin: 0 auto;
    background-color:var(--white);
    box-sizing: border-box;
}
.header_wrap1{
    height: 100%;
}

.header_logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.header_logo source{
  /* 画像サイズ比率指定 */
  aspect-ratio: 526 / 106;
}

.header_logo img{
    height: 8rem;
    /* 画像サイズ比率指定 */
    aspect-ratio: 526 / 106;
  }

.header_wrap2{
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    background-color: var(--base-color);
    box-sizing: border-box;
}

/* メニューのスタイル */
.menu {
  display: flex;
  justify-content: center; 
  align-items: flex-end;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  transition: 0.4s;
  z-index: 1;
  overflow-y: auto;
}

/* メニュー内のリストのスタイル */
.menu ul {
  display:flex;
  justify-content: flex-start;
  list-style: none;
  height: 4.8rem;
  column-gap:  1rem;
  padding: .8rem 1rem;
}

.menu ul li{
  display:flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0 1rem;
}

/* メニュー内リストのリンクのスタイル */
.menu ul li a {
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--main-text-color);
  font-size: var(--font-size-m);
  font-weight: bold;
  transition: 0.2s;
  text-align: left;
  width: 100%;
}
  
/* メニュー内リストのリンクのホバー時のスタイル */
.menu ul li a:hover {
  color: var(--main-color1);
}

.menu_icon{
  height: var(--font-size-4l);
  width: auto;
  display: none;
}
  
.menu_link_title{
  font-size: var(--font-size-m);
}

/* ハンバーガーメニューボタンのスタイル (非表示)*/
.menu_button {
  display: none;
}

/* メニュートグルのスタイル */
#menu_toggle {
  display: none;
}
/* メニュートグルがチェックされた場合のメニューの表示アニメーション */
/* メニューを表示させるために left を 0 に変更 */
#menu_toggle:checked ~ .menu {
  left: 0; 
}
  
/* --------------------------------------------------
1300px(PCのコンテンツ幅)以下の画面幅で表示されるスタイル 
----------------------------------------------------- */
@media screen and (max-width: 1300px) {

  /* メニューのスタイル */
  /* メニューの幅と位置を調整 */
  .menu {
    z-index: auto;
    position: absolute;
    left: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: var(--main-color2);
    background-color: rgba(256,256,256,0);
    box-shadow: none;
    margin-top: 8rem;
  }

  /* メニュー内のリストのスタイル */
  .menu ul {
    flex-direction: column;
    list-style: none;
    padding: 0;
    width: 100%; /* 画面幅の100%の幅に調整 */
    height: 100%;
    background-color: var(--main-color1);
  }

  /* メニュー内リストのスタイル */
  .menu ul li {
    width: 100%;
    border-top: .1rem solid var(--white);
    border-left: .1rem solid var(--white);
    border-right: .1rem solid var(--white);;
    background-color: var(--main-color1);
  }

/* メニュー内リストのリンクのスタイル */
  .menu ul li a {
    font-size: var(--font-size-l);
  }

  /* メニュー内リストのリンクのホバー時のスタイル */
  .menu ul li a:hover {
    color: var(--accent-color2);
  }

  .menu_icon{
    display: inline-block;
  }
  
  .menu_link_title{
    width: 10rem;
  }

  .menu ul li:last-child {
    width: 100%;
    border-bottom: .1rem solid var(--white);

  }

  /* ハンバーガーメニューボタンのスタイル (表示)*/
  .menu_button {
    display: block;
    position: fixed;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
  }
  /* メニューバーのスタイル */
  .bar {
    display: block;
    width: 2.5rem;
    height: 0.3rem;
    margin: .5rem 0;
    background-color: #333;
    transition: 0.4s;
  }

  /* メニューボタンがチェックされた場合の1つ目のバーのアニメーション */
  #menu_toggle:checked ~ .menu_button .bar:nth-child(1) {
    transform: rotate(45deg) translate(-0.2rem, .3rem);
  }

  /* メニューボタンがチェックされた場合の2つ目のバーのアニメーション */
  #menu_toggle:checked ~ .menu_button .bar:nth-child(2) {
    opacity: 0;
  }

  /* メニューボタンがチェックされた場合の3つ目のバーのアニメーション */
  #menu_toggle:checked ~ .menu_button .bar:nth-child(3) {
    transform: rotate(-45deg) translate(.8rem, -1.3rem);
  }
}

/* headerを上に上げる */
#header.UpMove{
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
      opacity: 1;
  transform: translateY(0);
  }
  to {
      opacity: 0;
  transform: translateY(-100px);
  }
}

/* headerを下に下げる */
#header.DownMove{
  animation: DownAnime 0.5s forwards;
  }
  @keyframes DownAnime{
  from {
      opacity: 0;
  transform: translateY(-100px);
  }
  to {
      opacity: 1;
  transform: translateY(0);
  }
}


/* --------------------------------------------------
768px(タブレッドのコンテンツ幅)以下の画面幅で表示されるスタイル 
----------------------------------------------------- */
@media screen and (max-width: 768px) {
}
/* --------------------------------------------------
480px(SPのコンテンツ幅)以下の画面幅で表示されるスタイル
----------------------------------------------------- */
@media  all and (max-width: 480px) {
  .header_wrap{
      height: 5rem;
    }

  .header_logo img{
    height: 5rem;
    aspect-ratio: 526 / 106;
  }

  /* メニューのスタイル */
  /* メニューの幅と位置を調整 */
  .menu {
    margin-top: 5rem;
  }

  /* ハンバーガーメニューボタンのスタイル (表示)*/
  .menu_button {
    top: 1rem;
    right: 2rem;
  }
}