@charset "UTF-8";

@media screen and (max-width: 1049px) {
    img{
        display: block;
        width: 100%;
        height: auto;
    }
    .headerTop {
        position: relative;
        width: 100%;
        height:90vh;
        box-sizing: border-box;
    }
    #background img{
        width:100%;
        height: 90vh;
        object-fit: cover;
        position:absolute;
    }
    #logo{
        top: 25px;
        left: 3%;
        position: fixed;
        width: 160px;
        z-index: 50000;
    }
    #gnavisp{
        left: 80%;
        top: 50px;
        z-index: 50000;
        position: fixed;
        cursor: pointer;
        width: 45px;
        height: 45px;
    }
    #gnavisp span{
        display: block;
        width: 45px;
        height: 2px;
        background-color: #080b26;
        position: absolute;
        transition: 0.5s;
        box-shadow: #fff 0 2px 10px 0;
    }
    #gnavisp span:nth-child(1){
        top: 10px;
    }
    #gnavisp span:nth-child(2){
        top: 25px;
    }
    #gnavisp span:nth-child(3){
        top: 40px;
    }
    .open #gnavisp span:nth-child(1){
        top: 25px;
        transform: rotate(45deg);
    }  
    .open #gnavisp span:nth-child(2){
        opacity: 0;
    } 
    .open #gnavisp span:nth-child(3){
        top: 25px;
        transform: rotate(-45deg);
    }
    #navigation{
        width: 100%;
        height: 80vh;
        background-color: rgba(255, 255, 255, 0.8);
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(-80vh);
        transition: 0.5s;
        z-index: 10000;
    }
    .open #navigation{
        width: 100%;
        height: 80vh;
        background-color: rgba(255, 255, 255, 0.8);
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(0);
        transition: 0.5s;
    }
    #navigation ul{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 30px;
        width: 100%;
        height: 100%;
    }
    #navigation ul li{
        margin-bottom: 20px;
    }
    #navigation ul li a:nth-child(-n+4){
        color: #080b26;
    }
    #navigation #reservation{
        padding: 0px 10px;
        border-radius: 10px;
        background-color: #c98f1f;
    }
    #navigation #reservation a{
        color: #fff;
    }
    h1{
        position: absolute;
        top: 210px;
        left:10%;
        font-size: 2em;
        color: #fff;
        text-shadow: #080b26 0 3px 4px;
        letter-spacing: 0.08em;
        line-height: 1.8em;
        z-index: 1000;
    }
    header p{
        position: absolute;
        top: 410px;
        left: 10%;
        font-size: 0.9em;
        font-weight: bold;
        color: #fff;
        text-shadow: #080b26 0 3px 5px;
        letter-spacing: 0.2em;
        z-index: 1000;
    }
    .scrolldown1{
        /*描画位置*/
       position:absolute;
       left:50%;
       bottom:-20px;
        /*全体の高さ*/
       height:50px;
       z-index: 1000;
    }
    /*Scrollテキストの描写*/
    .scrolldown1 span{
        /*描画位置*/
       position: absolute;
       left:-32px;
       top: -15px;
        /*テキストの形状*/
       color: #080b26;
       text-shadow: #eee 0 3px 5px;
       font-size: 0.8rem;
       letter-spacing: 0.05em;
    }
    /* 線の描写 */
    .scrolldown1::after{
       content: "";
        /*描画位置*/
       position: absolute;
       top: 0;
        /*線の形状*/
       width: 1px;
       height: 30px;
       background: #080b26;
        /*線の動き1.4秒かけて動く。永遠にループ*/
       animation: pathmove 1.4s ease-in-out infinite;
       opacity:0;
    }
    
    /*高さ・位置・透過が変化して線が上から下に動く*/
    @keyframes pathmove{
       0%{
          height:0;
          top:0;
          opacity: 0;
       }
       30%{
          height:30px;
          opacity: 1;
       }
       100%{
          height:0;
          top:50px;
          opacity: 0;
       }
    }
      /* Concept */
    #concept{
        position: relative;
        height: 700px;
        overflow: hidden;
        width: 100%;
    }
    .heading{
        text-align: center;
        padding-top:90px;
        font-size: 2.0em;
        letter-spacing: 0.1em;
        font-weight: 550;
    }
    #concept h3{
        text-align: center;
        font-size: 1.1em;
        font-weight: bold;
        letter-spacing: 0.05em;
        line-height: 70px;
    }
    #concept p{
        text-align: center;
        font-size: 0.9em;
        letter-spacing: 0.05em;
        line-height: 40px;
        text-shadow: #eee 0 1.5px 1.5px;
    }
    #conceptPasta{
        position: absolute;
        top: 175px;
        left:-25%;
        width: 50%;
        z-index: -100;
    }
    #conceptPizza{
        position: absolute;
        top: 350px;
        right: -28%;
        width: 50%;
        z-index: -100;
    }
    #conceptSea{
        position: absolute;
        top: 500px;
        left: 5%;
        width: 50%;
        z-index: -100;
    }
     #conceptWine{
        position: absolute;
        top: 545px;
        left: 39%;
        width: 55%;
        z-index: -100;
    }
     /* Menu */
    #menu{
        width: 100%;
    }
    #menuContainar{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .menuItem{
        background: #cededb;
        width: calc(50% - 10px);
        margin:5px 5px;
        padding-top: 10px;
    }
    .menuItem img{
        width: 90%;
        margin: 0 auto;
    }
    .menuItem p{
        font-size: 0.7em;
        margin: 5px 0;
        text-align: center;
    }
    .more_btn{
        position: relative;
    }
    .circle{
        position:absolute;
        width: 70px;
        top: 30px;
        left: 30%;
    }
    .more p{
        font-size: 1.3em;
        letter-spacing: 0.15em;
        position:absolute;
        top:50px;
        left: 39%;
        color: #333;
    }
    .arrow{
        width: 140px;
        position:absolute;
        top: 60px;
        left: 37%;
        transition:0.3s all;
    }
    .more_btn:hover .arrow{
        left: 38%;
        transition:0.3s all;
    }
    /* News */
    #news{
        width: 100%;
        /* margin: 0 auto; */
    }
    #news .heading{
        margin-top:100px;
    }
    #newsContainar{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .newsItem{
        width: calc(100% - 100px);
        margin:5px auto;
        padding-top: 10px;
        background: #f2e9e4;
        border: #f2e9e4 solid 2px;
        transition:0.3s all;
    }
    .newsItem:hover{
        background: #fdfaf9;
        transition:0.3s all;
    }
    .newsItem img{
        width: 90%;
        margin: 0 auto;
    }
    .newsItem p{
        font-size: 0.7em;
        margin: 5px 0;
        text-align: center;
        color: #333;
    }
    .newsDay{
        font-size: 0.9em;
    }
    /* Shop Info */
    #shopInfo{
        margin-bottom: 100px;
        width: 90%;
        margin: 0 auto;
    }
    #shopInfo .heading{
        margin-top:100px;
    }
    #mapAndInfo{
        margin-top: 30px;
    }
    #map iframe{
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
        height: 250px
    }
    #infoAndReserve{
        margin: 30px auto;
        text-align: center;
        display: block;
    }
    #infoAndReserve p{
        font-size: 0.9em;
    }
    #infoAndReserve #openTime{
        text-align: left;
        display: inline-block;
    }
    #reserve{
        text-align: center;
        margin: 30px auto 0;
        width:200px;
        height: 40px;
        padding-top: 10px;
        border-radius: 10px;
        transition:0.3s all;
        font-size: 20px;
        background-color: #c98f1f;
    }
    #reserve a{
        color: #fcf9f4;
        font-weight: bold;
    }
    #reserve:hover{
        transform:scale(1.1,1.1);
        transition:0.3s all;
    }
    /* Footer */
    #footer{
        width: 100%;
        background-color: #2d515c;
    }
    #footerlogo{
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        transition:0.3s all;
    }
    #footerlogo img{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #footerlogo:hover{
        transform:scale(1.05,1.05);
        transition:0.3s all;
    }
    #sns{
        display: flex;
        justify-content: center;
    }
    #sns a{
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 30px;
        transition:0.3s all;
    }
    #sns a:hover{
        transform:scale(1.1,1.1);
        transition:0.3s all;
    }
    #copyright{
        text-align: center;
        color: #fff;
        font-size: 0.6em;
        padding-bottom: 30px;
    }
    /* 予約ページ */
    .headOtherPage{
        background-color: #2d515c;
        height: 100px;
    }
    .headOtherPage #logo{
        width: 120px;
        top: 10px;
    }
    #gnavispOtherPage{
        position: absolute;
        top: 20px;
        left: 85%;
        cursor: pointer;
        width: 45px;
        height: 45px;
        z-index: 100000;
    }
    #gnavispOtherPage span{
        background-color: #fff;
        width: 45px;
        height: 2px;
        display: block;
        position: relative;
        transition: 0.5s;
    }
    #gnavispOtherPage span:nth-child(1){
        top:10px
    }
    #gnavispOtherPage span:nth-child(2){
        top:25px
    }
    #gnavispOtherPage span:nth-child(3){
        top:40px
    }
    .open #gnavispOtherPage span:nth-child(1){
        top: 28px; /* 微調整のため */
        transform: rotate(45deg);
    }
    .open #gnavispOtherPage span:nth-child(2){
        opacity: 0;
    }
    .open #gnavispOtherPage span:nth-child(3){
        top: 25px;
        transform: rotate(-45deg);
    }
    /* 予約ページヘッダー */
    #heading_reserve h1{
        font-size: 2em;
        text-align: center;
        color: #080b26;
        position: unset;
        text-shadow: none;
        letter-spacing: 0.1em;
        padding-top: 30px;
    }
    #heading_reserve h2{
        font-size: 1.3em;
        text-align: center;
        color: #080b26;
        letter-spacing: 0.05em;
    }
    #heading_reserve p{
        text-align: center;
        color: #ff0000;
        letter-spacing: 0.05em;
        font-size: 0.8em;
        padding-top: 15px;
        padding-bottom: 40px;
    }
    /* 予約内容 */
    #form{
        background-color: #cededb;
        padding: 30px 0;
    }
    #form .required{
        color: #ff0000;
    }
    #form dl dt{
        width: 200px;
        padding: 15px 0 5px 10%;
    }
    #form .name{
        margin-left: 50px;
        margin-right: 50px;
        width:calc(100% - 110px);
        padding: 3px 2px;
    }
    #form .date{
        margin-left: 50px;
        margin-right: 50px;
        width:calc(100% - 110px);
        padding: 3px 2px;
    }
    #form .hour{
        margin-left: 50px;
        margin-right: 5px;
        width:calc(100% - 310px);
        padding: 3px 2px;
    }
    #form .minute{
        margin-left: 5px;
        margin-right: 5px;
        width:calc(100% - 310px);
        padding: 3px 2px;
    }
    #form .number{
        margin-left: 50px;
        margin-right: 5px;
        width:calc(100% - 310px);
        padding: 3px 2px;
    }
    #form .tel{
        margin-left: 50px;
        margin-right: 50px;
        width:calc(100% - 110px);
        padding: 3px 2px;
    }
    #form .email{
        margin-left: 50px;
        margin-right: 50px;
        width:calc(100% - 110px);
        padding: 3px 2px;
    }
    #form .message{
        margin-left: 50px;
        margin-right: 50px;
        width:calc(100% - 110px);
        height: 100px;
        padding: 3px 2px;
    }
    #form .submit{
        display: block;
        margin: 20px auto 0;
        padding: 5px 30px;
        font-size: 1.2em;
        font-family: YuMincho, "Yu Mincho", serif;
        background-color: #c98f1f;
        border: none;
        border-radius: 5px;
        color: #fff;
    }
}