@charset "UTF-8";

/*---------------------------- PC向けのスタイル ----------------------------*/
/*2022/3/25追加 スライドショー
--media type（@mediaルール）の内部で@keyframesを指定すると動作しない（IE11のバグ）のため、ここで定義　*/
@keyframes slide1 {
  0% {
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@media print, screen and (min-width: 780px) {

  html {
    overflow-y: scroll;
  }


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

  body {
    width: 100%;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS P ゴシック", "MS P Gothic", sans-Serif;
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #333333;
    background-color: #ffffff;
    -webkit-text-size-adjust: none;
  }

  .img_a {
    display: block;
  }

  .img_b {
    display: none;
  }


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

  #main {
    width: 100%;
    overflow: hidden;
    margin: 0 auto 0 auto;
    padding: 0;
    text-align: center;
    background-color: #ffffff;
  }


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

  #header {
    width: 100%;
    height: 60px;
    /*-- 高さ --*/
    margin: 0 auto 0 auto;
    border-top: solid 2px #156aad;
  }


  /*2022/3/25追加　ヘッダー*/

  .logo h1 {
    max-width: 780px;
    margin-left: 30px;
    float: left;
  }

  .float ul {
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
    float: right;
  }

  .float li {
    display: inline-block;
    list-style: none;
    margin-right: 30px;
    padding: 10px;
    color: #0066cc;
  }

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

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

  /*ここまで*/

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

  #container {
    width: 1024px;
    margin: 0 auto 0 auto;
  }

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

  #contents {
    margin: 0;
    padding: 0 0 5px 0;
    font-size: 16px;
    width: 1024px;
    letter-spacing: 0.05em;
    text-align: left;
    line-height: 1;
  }

  #contents p {
    margin: 15px 0 15px 0;
    padding: 0 2px 0 2px;
    line-height: 1.7;
    font-size: 16px;
  }

  #contents h3 {
    margin: 0 0 10px 0;
    padding: 0px 10px 10px 8px;
    line-height: 1.2;
    font-size: 24px;
    color: #54351f;
    border-bottom: solid 4px #966934;
    text-align: center;
  }

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

  .box {
    width: 100%;
    margin: 0 auto 0 auto;
  }

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

  .box p {
    text-align: left;
  }

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

  .box1 {
    float: left;
    width: 23%;
    padding: 4px;
    margin: 0 4px 0 4px;
    overflow: hidden;
    background-color: #fff4ea;
  }

  .box1:hover {
    background-color: #e5f2ff;
  }

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

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

  .box2 {
    float: left;
    width: 23%;
    padding: 4px;
    margin: 0 4px 0 4px;
    overflow: hidden;
    background-color: #fff4ea;
  }

  .box2:hover {
    background-color: #e5f2ff;
  }

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

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

  .box3 {
    float: left;
    width: 23%;
    padding: 4px;
    margin: 0 4px 0 4px;
    overflow: hidden;
    background-color: #fff4ea;
  }

  .box3:hover {
    background-color: #e5f2ff;
  }

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

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

  .box4 {
    float: left;
    width: 23%;
    padding: 4px;
    margin: 0 4px 0 4px;
    overflow: hidden;
    background-color: #fff4ea;
  }

  .box4:hover {
    background-color: #e5f2ff;
  }

  .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;
  }

  /*---------- スライドショー ----------*/

  #contents .photo-show {
    width: 100%;
    height: 450px;
    position: relative;
    top: -20px;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0;
  }

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

  #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;
  }


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

  #footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0 0;
    text-align: center;
    font-size: 14px;
    color: #333333;
    line-height: 1.8;
    /*background-color: #f7f1e1; */
  }

  #footer a {
    color: #333333;
    font-size: 14px;
    text-decoration: none;
  }

  #footer a:hover {
    color: #555555;
    text-decoration: none;
  }


  /* フッター ナビゲーション */

  #footer .footer_nav ul {
    clear: both;
    width: 1010px;
    text-align: center;
    margin: 0 auto 0 auto;
    padding: 0 7px 10px 7px;
  }

  #footer .footer_nav li {
    margin: 0 0 20px 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    float: left;
    color: #333333;
  }

  #footer .footer_nav li a {
    padding: 0 16px 0 16px;
    font-size: 14px;
    text-align: center;
    display: inline;
    letter-spacing: 0.05em;
    text-decoration: none;
  }

  #footer .footer_nav li a:hover {
    color: #555555;
  }


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

  #footer .copy {
    margin: 0;
    padding: 10px 0 10px 0;
    font-size: 14px;
    color: #fffffc;
    background-color: #00457c;
  }

  #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;
  }

}


/*---------------------------- タブレット向けのスタイル ----------------------------*/
@media print, screen and (min-width:780px) and (max-width:1024px) {

  #main,
  #header h1,
  #header #header_inner,
  #container,
  #contents,
  .inners,
  #footer .footer_nav ul {
    width: 100%;
  }

  #h_nav li a {
    font-size: 11px;
  }

  .box {
    width: 100%;
  }

  .box1,
  .box2,
  .box3,
  .box4 {
    width: 23%;
  }
}

/*---------------------------- 共通部分（コンテンツ） ----------------------------*/

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

img.line {
  margin: 0 8px 4px 0;
  vertical-align: middle;
}

img.head_photo {
  margin: 0 0 16px 0;
}

hr.line {
  margin: 0 0 10px 0;
  padding: 2px 0 6px 0;
  border: 0;
  border-bottom: dotted 1px #666666;
}

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

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;
}