@charset "utf-8";

/*-----------------------------------------------
 __default style
-----------------------------------------------*/

/*モバイル・タブレット共通*/
/* (max-width: 480px) and (orientation: portrait) */
@media screen
  and (max-width: 480px)
  and (orientation: portrait) {
    
    
    .content{
      margin-top: 30px;
    }
    
    #naviOut.fixed{
      position:inherit;
      top: auto;
      width: 100%;
    }
    
    .toppic{
      width: 100%;
      min-height:300px;
      display: block;
    }
    
    dl.aisatsu dt{
      width: calc(100% - 20px);
      vertical-align: top;
      line-height: 2;
    }

    dl.aisatsu dd{
      width: calc(100% - 20px);
      text-align: center;
    }
    
    dl.o_room dt, dl.o_room dd{
      display: block;
    }

    dl.o_room dt{
      width: calc(100% - 0px);
    }

    dl.o_room p{
      border-bottom: 1px solid #ccc;
      padding: 10px
    }

    dl.o_room dd{
      width: calc(100% - 21px);
      border-left: 0px solid #ccc;
    }

    dl.o_room dd img{
      width: 300px;
      margin: 0 auto;
    }
    
}

@media screen
  and (max-width: 320px)
  and (orientation: portrait){

  #header_logo li.title h1{
    font-size: 90%;
  }
    
  
}


@media screen
  and (max-width: 360px)
  and (orientation: portrait){

  .topinfo{
    margin-top: 160px;
  }
}

@media screen
  and (min-width: 300px)
  and (max-width: 330px)
  and (orientation: portrait){

  .topinfo{
    margin-top: 140px;
  }
}

@media screen
  and (min-width: 375px)
  and (max-width: 413px)
  and (orientation: portrait){
  .topinfo{
    margin-top: 200px;
  }
}

@media screen
  and (min-width: 414px)
  and (max-width: 480px)
  and (orientation: portrait){
  .topinfo{
    margin-top: 210px;
  }
}


/*##############################################*/
/*モバイル横*/

@media screen
  and (min-width: 481px)
  and (max-width: 736px)
  and (orientation: landscape){

  
}


@media screen
  and (max-width: 640px)
  and (orientation: landscape){

  .topinfo{
    margin-top: 420px;
  }
}

@media screen
  and (min-width: 480px)
  and (max-width: 568px)
  and (orientation: landscape){

  .topinfo{
    margin-top: 360px;
  }
}

@media screen
  and (min-width: 680px)
  and (max-width: 736px)
  and (orientation: landscape){
  .topinfo{
    margin-top: 490px;
  }
}


/*##############################################*/
/*タブレット縦*/

@media screen
  and (min-width: 768px)
  and (max-width: 1023px)
  and (orientation: portrait){
    

    
}



/*##############################################*/
/*タブレット横*/

@media screen
  and (min-width: 960px)
  and (max-width: 1024px)
  and (orientation: landscape){
    

    
    
}