@charset "utf-8";

body{
    background-image: url(background-c.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% 20%;
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}
.logo{
    width: 250px;
    opacity: 0.8;
    display: none;
}
.title{
    text-align: center;
    margin-top: 300px;
}
.subtitle p{
    font-family: 'Merriweather Sans', sans-serif;
    color:#0e0329;
    text-align: center;
    font-size:14px;
    display: none;
    margin-top: 30px;
}
.menutitle p{
    font-family: 'Merriweather Sans', sans-serif;
    background-color:rgba(171, 10, 32,0.8);
    color:white;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    font-size:15px;
    margin-top: 30px;
    font-style: italic;
}

.border2{
    width: 100px;
    margin:0 auto;
    border-bottom: 4px solid rgba(171, 10, 32,0.8);
    display: none;
}
.menu{
    max-width: 700px;
    margin:200px auto 200px auto;
    text-align: center;
    height:auto;
   }
   
.effect-fade {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 1.5s;
    }
    .baseH{
        opacity: 0.9;
    }
    .coverH{
        opacity: 0.9;
    }
.box{
    margin-bottom:-30px;
}

/* 画面内に入った状態 */
.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
    }
.effect-fade1 {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 1.5s;
    }


/* 画面内に入った状態 */
.effect-fade1.effect-scroll1 {
	opacity : 1;
	transform : translate(0, 0);
    }
    
    .baseH{  /* 表示領域のデザイン(適当) */
        margin: 20px auto;
        cursor: pointer;
      }
      .baseH,
      .coverH{  /* 画像を背景イメージとして表示するための設定 */
        overflow: hidden;
        background: transparent no-repeat;
        background-size: cover;
        cursor: pointer;
      }
      .coverH{  /* 二つの画像の大きさを合わせる設定 */
        width: 100%;
        height: 100%;
      }
      .base{  /* div.baseH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-a-effect.png);
      }
      .cover{  /* div.coverH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-a.png);
      }
      .base-b{  /* div.baseH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-bbb-effect.png);
      }
      .cover-b{  /* div.coverH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-b.png);
      }
      .base-c{  /* div.baseH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-c-effect.png);
      }
      .cover-c{  /* div.coverH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-c.png);
      }
      .base-d{  /* div.baseH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-d-effect.png);
      }
      .cover-d{  /* div.coverH に表示する画像 */
        width: 340px;
        height: 210px;
        background-image: url(menu-d.png);
      }
      .effectH-opacity{  /* 透明度を変更するエフェクトの設定 */
        opacity: 1;
        transition: 1s;
      }
      .effectH-opacity:hover{  /* マウスオーバー時の設定 */
        opacity: 0;
      }
      footer{
        font-family: 'Merriweather Sans', sans-serif;
        font-size:14px;
        text-align: center;
        padding-bottom: 20px;
      }

@media(max-width:900px){
 body{
     background-size: 900px auto;
     background-attachment: fixed;
     width: 100%;
 }
 .logo{
    width: 200px;
}
.title{
    text-align: center;
    margin-top: 150px;
}
body{
    background-image: url(background-c.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 5% 20%;
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}
}
@media(max-width:670px){
 body{
     background-size: 670px auto;
     background-attachment: fixed;
 }
 .logo{
    width: 200px;
}
body{
    background-image: url(background-c.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20% 5%;
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}
}
@media(max-width:450px){
 body{
     background-attachment: fixed;
 }
 .logo{
    width: 200px;
}
body{
    background-image: url(background-c.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20% 5%;
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}
}