@import url('http://fonts.googleapis.com/css?family=Lora:400italic');
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500&display=swap');
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

html, body, * {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 13px;
  color: #333; }

body {
  margin: 0;
  padding: 0; }

#container {
  width: 850px;
  padding: 3rem 0 0 20px; }

/* home */
.homeMain {
  margin-bottom: 20px; /* 40px to 20px */ 
  margin-left: 60px;}
  .homeMain::after {
    clear: both;
    content: "";
    display: table; }
  .homeMain .mainVisual {
    float: left; }
  .homeMain figure{
    margin: 0;
    padding: 0;
    max-width: 420px;
  }
  .homeMain figure img{
    width: 100%;
    height: auto;
  }
  .homeMain h1{
    /*max-width: 150px;*/
    font-size: 22px;
    font-family: 'Hind', sans-serif;
    font-weight: 500;
  }
  .homeMain .side {
    float: right;
    width: 270px;
    /*background: url(../images/bird.jpg) no-repeat 0 278px;*/
    padding-top: 45px;
    padding-bottom: 0px; /* 275px to 0 */ }
    .homeMain .side .nav {
      list-style-type: none;
      color: #333; }
      .homeMain .side .nav li {
        margin-bottom: 1.8em; }
        .homeMain .side .nav li a {
          text-decoration: none; }
          .homeMain .side .nav li a:hover {
            color: #aaa;
            transition: .3s; }
      .homeMain .side .nav li.shop {
        margin-top: 3em;
      }
        .homeMain .side .nav li.shop a{
          display: block;
          width: 114px;
          position: relative
        }
          .homeMain .side .nav li.shop a img{
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            top: 0;
            transition: .3s;
          }
            .homeMain .side .nav li.shop a img.button-off{  
              opacity: 1;
            }
            .homeMain .side .nav li.shop a img.button-on{
              opacity: 0;
            }
            .homeMain .side .nav li.shop a:hover img.button-on{
              opacity: 1;
            }
            .homeMain .side .nav li.shop a:hover img.button-off{
              opacity: 0;
            }

.news {
  margin-left: 65px;
  margin-bottom: 100px; }
  .news .newsttl {
	font-family: 'Lora', serif;
	font-size: 28px;
    margin-bottom: 1em; }
  .news table {
    border-collapse: collapse;
    margin-left: 2em;
    margin-bottom: 3em; }
    .news table tbody tr.release td {
      border-bottom: 1px dotted #ddd;
      padding-bottom: 1.5em;
      vertical-align: top; }
    .news table tbody td {
      padding: 6px 15px 6px 0; }
    .news table tbody tr.release td img{
	    width: 170px;
	    height: auto;
    }

.profile {
  margin-bottom: 3em; }
  .profile::after {
    clear: both;
    content: "";
    display: table; }
  .profile img {
    float: left;
    width: 300px;
    height: auto; }
  .profile .prof_body {
    margin-left: 330px;
    width: 500px; }
    .profile .prof_body h1 {
      /*font-family: 'Lora', serif;*/
      font-family: 'Hind', sans-serif;
      font-size: 36px;
      margin-top: 0;
      margin-bottom: .6em;
      font-weight: 500;
      line-height: 1; }

.gallery {
  margin-bottom: 50px; }
  .gallery .ttl {
    margin-bottom: .8em; }
  .gallery ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .gallery ul li {
      display: inline-block;
      margin-right: .5em;
      height: 80px;
      width: 80px;
      line-height: 0; }
      .gallery ul li a {
        display: block;
        border: 1px dotted #ddd;
        padding: 6px;
        background-color: #fff; }
        .gallery ul li a:hover {
          background-color: #eee;
          border: 1px solid #ddd; }
      .gallery ul li a img{
        width: 100%;
        height: auto;
      }

.videos {
  padding-bottom: 5em; }
  .videos h2 {
    margin-bottom: 4em; }
  .videos .video {
    margin-left: 20px;
    margin-bottom: 45px; }
    .videos .video h3 {
      margin-bottom: .5em;
      font-weight: normal;
      font-size: 16px; }
  .videos .video_container {
    background-color: #f2f2f2;
    padding: 20px 25px;
    width: 610px; }

header {
  width: 850px;
  position: relative; }
  header .logo {
    padding-top: 40px;
    padding-left: 40px; }
  header .logo a{
    font-size: 22px;
    font-family: 'Hind', sans-serif;
    font-weight: 500; 
    color: #333;
    text-decoration: none;
  }
  header .logo img{
    width: 150px;
    height: auto;
  }
  header .nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 45px;
    right: 20px; }
    header .nav li {
      display: inline-block; }
      header .nav li a {
        text-decoration: none; }
        header .nav li a:hover {
          color: #aaa;
          transition: .3s; }
      header .nav li.hz-shop {
        width: 100px;
        margin-left: 1.5em;
        position: relative;
        top: -14px;
      }
        header .nav li.hz-shop a{
          width: 100%;
          display: block;
          position: relative;
        }
          header .nav li.hz-shop a img{
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            top: 0;
            transition: .3s;
          }
            header .nav li.hz-shop a img.button-off{  
              opacity: 1;
            }
            header .nav li.hz-shop a img.button-on{
              opacity: 0;
            }
            header .nav li.hz-shop a:hover img.button-on{
              opacity: 1;
            }
            header .nav li.hz-shop a:hover img.button-off{
              opacity: 0;
            }

footer {
  width: 850px;
  position: relative;
  /*.contact{
    position: absolute;
    left: 80px;
    top: 10px;
  }*/ }
  footer address {
    text-align: right;
    font-style: normal;
    display: block;
    padding: 10px 0; }
