.nav_test ul {
    list-style-type: none;/* リストマークなし */
    padding: 0;/* リストマークの余白なし */
}
.menu_test {
    display: flex;/* 要素をFlexboxに定義 */
    justify-content: flex-start;/* 左寄せ配置 */
    text-align: center;/* テキストを中央寄せ */
}
.menu_test a {
    display: block;/* 要素をブロックに定義 */
    text-decoration: none;/* リンク下線なし */
    background-color: #fdb4eb;/* 背景色 */
    color: #000000;/* テキスト色 */
    padding: 10px;/* 余白 */
}
.menu_test a:hover {
    background-color: #de87da;/* リンク選択時の背景色 */
}
.nav_test ul {
    list-style-type: none;/* リストマークなし */
    padding: 0;/* リストマークの余白なし */
}
.menu_test {
    display: flex;/* 要素をFlexboxに定義 */
    justify-content: flex-start;/* 左寄せ配置 */
    text-align: center;/* テキストを中央寄せ */
}
.menu_test li {
    position: relative;/* ボックスの配置基準 */
    z-index: 1;/* 前面に描画 */
    min-width: 130px;/* 親メニューの最小横幅 */
}
.menu_test a {
    display: block;/* 要素をブロックに定義 */
    text-decoration: none;/* リンク下線なし */
    background-color: #DBEEEA;/* 背景色 */
    color: #421C1B;/* テキスト色 */
    padding: 13px;/* 余白 */
}
.menu_test a:hover {
    background-color: #84d6fc;/* リンク選択時の背景色 */
}
.menu_test li ul {/* 子メニュー */
    position: absolute;/* ボックスの配置基準 */
    top: 100%;/* 親メニュー上部からの表示位置 */
    left: 0;/* 親メニュー左端からの表示位置 */
    width: 100%;/* 親メニュー幅に合わせる */
}
.menu_test li ul li {
    visibility: hidden;/* 子メニューの非表示 */
    /* スライド表示させる場合は以下も */
    overflow: hidden;/* ボックスからはみ出た部分を非表示 */
    height: 0;
    transition-duration: 0.2s;/* 変化にかかる時間 */
}
.menu_test li:hover > ul > li {
    visibility: visible;/* 子メニューの表示 */
    /* スライド表示させる場合は以下も */
    overflow: visible;/* ボックスからはみ出た部分を表示 */
    height: 44px;/* 項目名が途切れて隠れないように注意 */
}
.menu_test li ul {
    visibility: hidden;
    opacity: 0;
   transition: .2s ease-in-out;
}
.menu_test li:hover > ul {
    visibility: visible;
    opacity: 1;
}
.menu_test li ul li ul {
    top: 0;/* 子メニュー上部からの表示位置 */
    left: 100%;/* 子メニュー左端からの表示位置 */
}
.menu_test li:last-child ul li ul {/* 親メニュー最後のリストの孫表示は左側に表示 */
    left: -100%;
}
body{
    background-image: url(back.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    *{
        border: 0;
        margin: 0;
        padding: 0;
       }
       nav{
        background-color:#DBEEEA;
        height:50px;
       }
       
       .inner{
        max-width: 100%;
        margin:0 auto;
        width:980px;
       }
       nav>.flex{
         align-items: center;
         height:50px; 
       }
       .flex {
         display: flex;
         justify-content: space-between;
       }
       
       li a{
         color:white;
         text-decoration:none;
       }

/*画面向き警告*/
@media screen and (orientation: landscape) {
    .note { display:none; }
}

 @media screen and (orientation: landscape) {
    .hide-logo { display:none; }
 }

 @media screen and (orientation: portrait) {
    .all { display: none; }
 }

.note{
    margin: 10px auto;
    width:50px;
}
.hide-logo{
    background:url('/logo.png');
    background-size: cover;
    width:100%;
    height:100px;
}

.works {
    margin: 40px;   /* 外側の余白を40pxにする */
    padding: 0;      /* 内側の余白を消す(念のため) */
 }