@charset "UTF-8";
@import url('style.css');



/* CSS Document */

header {
    position: fixed; /* ヘッダーを画面上部に固定 */
    top: 0; /* 上端に配置 */
    width: 100vw; /* 幅を画面幅いっぱいに設定 */
    z-index: 1000; /* 他の要素よりも前面に表示 */
    display: flex; /* Flexコンテナとして設定 */
    justify-content: space-between;
    align-items: center;
    z-index: 1002;
}

.mail-icon{
    width: clamp(48px, 5%, 128px);  /* 幅の範囲を指定 */
}
.mail-icon:hover {
    filter: invert(43%) sepia(27%) saturate(7497%) hue-rotate(204deg) brightness(99%) contrast(104%);
}


.openbtn-container {
            width: clamp(53px, 6%, 133px); /* 親要素の幅を指定 */
            height: auto; /* 高さは自動調整 */
            display: inline-block;
        }

        .openbtn {
            position: relative;
            background: rgba(35, 125, 255, 0.8);
            cursor: pointer;
            border-radius: 5px 0 0 5px;
            width: 100%; /* 親要素にフィットさせる */
            height: 100%;
            padding-bottom: 100%; /* アスペクト比を1:1にするため */
        }

        .openbtn:hover {
            filter: brightness(80%);
        }

        .openbtn .openbtn-area {
            transition: all .6s; /* アニメーションの設定 */
            width: 100%; /* 親要素にフィットさせる */
            height: 100%;
            position: absolute; /* 親要素にフィットさせる */
            top: 0;
            left: 0;
        }

        .openbtn span {
            display: inline-block;
            transition: all .4s;
            position: absolute;
            left: 50%; /* 中央に配置 */
            transform: translateX(-50%); /* 中央に配置 */
            height: 6%; /* 線の高さを調整 */
            border-radius: 2px;
            background: #fff;
            width: 50%; /* 線の幅を調整 */
        }

        .openbtn span:nth-of-type(1) {
            top: 25%; /* 均等に配置 */
        }

        .openbtn span:nth-of-type(2) {
            top: 45%; /* 均等に配置 */
        }

        .openbtn span:nth-of-type(3) {
            top: 65%; /* 均等に配置 */
        }

        /* activeクラスが付与されたときのスタイル */
        .closebtn .openbtn-area {
            transform: rotate(360deg);
        }

        .closebtn span:nth-of-type(1) {
            top: 50%; /* 中央に配置 */
            transform: translate(-50%, -50%) rotate(-45deg);
            width: 50%; /* バツの線の幅を調整 */
        }

        .closebtn span:nth-of-type(2) {
            opacity: 0;
        }

        .closebtn span:nth-of-type(3) {
            top: 50%; /* 中央に配置 */
            transform: translate(-50%, -50%) rotate(45deg);
            width: 50%; /* バツの線の幅を調整 */
        }



.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
   background-color: rgba(35, 125, 255, 0.9);
    z-index: 1000; /* メニューがオーバーレイの上に来るように */
  }

  /* オーバーレイが表示されているとき */
  .overlay.active {
    display: block;
  }

  /* 中身全部*/
  .nav {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: auto;
    height: 100%;
    padding: 20vh 10% 0% 10%;
    z-index: 1001; /* オーバーレイより上に来るように */
    text-align: left;
    color: var(--white, #FFF);
      }

/* 上半分*/
.nav-cont{
display: flex;
width: 100%;
height: auto;
justify-content: top;
flex-direction: column;
gap:2em;
align-items: flex-start;
}
/* 下半分*/
.nav-mail{
display: flex;
width: 100%;
height: auto;
justify-content: top;
flex-direction: column;
}

/* テキストコンテナ*/
.list_tex{
    width:100%;
}


.line {
  width: 100%; /* 線の長さ */
  height: 1px; /* 線の太さ */
  background-color: white; /* 線の色 */
}