@charset "UTF-8";

/*---------------------------- 共通部分 ----------------------------*/

html, body, header, nav, article, section, aside, footer,
div, span, p, h1, h2, h3, h4,
ul, ol, li, dl, dt, dd,
table, tr, th, td, tbody, thead, tfoot {
  margin: 0;
  padding: 0;
}

header, nav, article, section, aside, footer {
  display: block;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a:link {
  color: #583822;
}

a:visited {
  color: #583822;
}

a:hover {
  color: #765c47;
}

p {
  margin: 15px 0 15px 0;
  line-height: 1.7;
  letter-spacing: 0.05em;
}


/*---------------------------- スマートフォン向けのスタイル ----------------------------*/
@media only screen and (max-width: 779px) {
  div.float {
    text-align: center;
  }


  .float h1 {
    width: 100%;
    display: block;
    margin: auto;
    float: none;
  }

  .float ul {
    width: 100px;
    margin: 50px auto;
    display: block;
    float: none;
    padding-left: 0;
  }

  .float li {
    display: block;
    margin: 5px auto;
    color: #0066cc;

  }

  .float li a {
    color: #0066cc;
  }

  .float li a:hover {
    color: #6699cc;
    /*  background-color: #f7f4ec; */
  }

  /*---------------------------- ページ全体の指定 ----------------------------*/

  body {
    width: 100%;
    font: 87.5% 'ヒラギノ角ゴ pro W3', "Hiragino KaKu Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
    color: #333333;
    letter-spacing: 0.05em;
    -webkit-text-size-adjust: 100%;
  }


  /*---------- メイン ----------*/

  #main {
    background-color: #ffffff;
  }


  /*---------- ヘッダー ----------*/

  #header {
    width: 100%;
    height: auto;
    padding: 0 0 4px 0;
    line-height: 1.6;
  }

  .logo h1 {
    margin-left: 10px;
    float: left;
  }


  /* スライドショー*/
  #contents .photo-show {
    width: 100%;
    padding-top: 48.125%;
    position: relative;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .image {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  @keyframes slide1 {
    0% {
      opacity: 0;
    }

    6% {
      opacity: 1;
    }

    25% {
      opacity: 1;
    }

    40% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  #contents .aa

  /* １枚目の画像 */
    {
    animation-name: slide1;
    animation-duration: 20s;
    animation-iteration-count: infinite;
  }

  #contents .bb

  /* 2枚目の画像 */
    {
    animation-name: slide1;
    animation-delay: 5s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    opacity: 0;
  }

  #contents .cc

  /* 3枚目の画像 */
    {
    animation-name: slide1;
    animation-delay: 10s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    opacity: 0;
  }

  #contents .dd

  /* 4枚目の画像 */
    {
    animation-name: slide1;
    animation-delay: 15s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    opacity: 0;
  }

  /*---------- メインコンテンツ ----------*/

  #container {
    padding: 0;
  }

  /*---------- コンテンツ ----------*/

  #contents {
    padding: 13px 0 25px 0;
    font-size: 1em;
  }

  #contents p {
    margin: 0 4px 0 4px;
    padding: 2px;
    line-height: 2.0;
  }


  /*---------- 4コンテンツ・ボックス ----------*/

  .box {
    width: 100%;
    text-align: center;
    margin: 0 auto 0 auto;
  }

  .box:after {
    content: "";
    display: block;
    clear: both;
  }

  .box p {
    text-align: center;
  }

  .box p a {
    text-decoration: none;
    color: #333333;
  }


  .box1 {
    width: 50%;
    padding: 4px;
    margin: 4px;
    overflow: hidden;
  }

  .box1 img {
    width: 100%;
    cursor: pointer;
    transition-duration: 0.3s;
  }

  .box1:hover img {
    opacity: 0.6;
    transition-duration: 0.3s;
  }

  .box2 {
    width: 50%;
    padding: 4px;
    margin: 4px;
    overflow: hidden;
  }

  .box2 img {
    width: 100%;
    cursor: pointer;
    transition-duration: 0.3s;
  }

  .box2:hover img {
    opacity: 0.6;
    transition-duration: 0.3s;
  }

  .box3 {
    width: 50%;
    padding: 4px;
    margin: 4px;
    overflow: hidden;
  }

  .box3 img {
    width: 100%;
    cursor: pointer;
    transition-duration: 0.3s;
  }

  .box3:hover img {
    opacity: 0.6;
    transition-duration: 0.3s;
  }


  .box4 {
    width: 50%;
    padding: 4px;
    margin: 4px;
    overflow: hidden;
  }

  .box4 img {
    width: 100%;
    cursor: pointer;
    transition-duration: 0.3s;
  }

  .box4:hover img {
    opacity: 0.6;
    transition-duration: 0.3s;
  }

  .box8 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #e0efff;
    border-left: solid 7px #156aad;
  }

  .box8 p {
    margin: 0;
    padding: 0;
  }

  /*---------- フッター ----------*/

  #footer {
    width: auto;
    padding: 20px 0 0 0;
    color: #333333;
    line-height: 1;
    text-align: center;
  }

  #footer p {
    padding: 10px;
    color: #555555;
  }

  #footer a {
    color: #555555 !important;
  }

  #footer a:hover {
    color: #777777 !important;
  }

  #footer a:visited {
    color: #555555;
  }

  /* フッター コピーライト */

  #footer .copy {
    margin: 10px 0 0 0 !important;
    padding: 10px;
    font-size: 0.92em;
    color: #fffffc;
    background-color: #564732;
  }

  #footer .copy a {
    color: #fffffc !important;
    text-decoration: none;
  }

  #footer .copy a:hover {
    color: #eeeeee !important;
    text-decoration: none;
  }

  #footer .copy a:visited {
    color: #fffffc;
    text-decoration: none;
  }

  /*---------- 文字装飾 ----------*/

  span.big {
    font-size: 1.12em;
    line-height: 1.9;
  }

  span.b_big {
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1;
    margin-left: 8px;
    color: #606060;
  }

  span.b_big_x {
    font-weight: bold;
    font-size: 1.4em;
    margin-left: 8px;
    color: #404040;
  }

}