/* トップ・CSS */

/* Twitter埋め込み・幅調整 */
.twitter-tweet {
    width: 380px !important;
    height: 255px !important;
  }

  /* スマートフォン用 */
@media all and (max-width: 480px) {

.timeline-Widget{max-width: 100%;}
.twitter-tweet{width: 94% !important;}

}


/* ３カラムバナーのレスポンシブ対応 */
.parent {
/*  background: lightblue; */
  display: flex;
  margin-left: 3%;
  margin-right: 3%;
}
.child {
/*  background: lightgreen;*/
  width: 400px;
  margin-left: 3%;
}

@media screen and (max-width: 800px) {
  .parent {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 400px) {
  .parent {
    display: block;
  }
}





.bkgc{
  background:#000080;
  color:white;
}

h2 span{
position: relative;
display: inline-block;
padding: 0 55px;
}

h2 span:before,h2 span:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}

h2 span:before {left:0;}
h2 span:after {right: 0;}

.phonemain {
 display:none;
}

.section__block--top-page {
  max-width: 1100px;
}

.slider {
  margin-top: 0;
}
.slider .bx-wrapper {
  margin-bottom: 0;
}
.slider .bx-wrapper .bx-caption {
  text-align: center;
  top: 0;
  bottom: auto;
}

#slider img {
  display: block;
  margin: 0 auto;
}

.banner__section {
  margin-top: 2px;
  margin-bottom:10px;
}

.banner-list__unit .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}

.container{
  margin-bottom:20px;
}
/*-------  ここからtopics  --------*/
.topics-column {
  float:left;
  vertical-align: top;
  width: 50%;
  background-color: #fff;
}

.topics-column1 {
  float:left;
  vertical-align: top;
  width: 50%;
  background-color: #fff;
  text-align: left;
}


.topics-column ul {
  padding: 20px 0 30px 0;
  margin-right:0px;
}

.topics-column li {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding: 25px 0;
}

.scroll-news {
  text-align: left;
  width:100%;
  height:300px;
  background-color:#fff;
  white-space:normal;
  }

.scroll-news li{
  list-style-type:none;
}


.twitter-tweet{
  float:left;
  width:100%;
  height:300px;
  background-color:#fff;
  white-space:normal;
  overflow-y: scroll;
  /*縦方向はスクロール可*/
  overflow-x: hidden;
  /*横方向はスクロール不可*/
}

.imgbanner{
  margin-bottom:10px;
}


.news__lists {
  list-style-type: none;
  margin: 0 0 2em;
}

.news__list {
  margin-bottom: .5em;
}

.news__date {
  margin-right: 1em;
}


/* --- リストエリア --- */

.section__title-h2 img {
width: 90%;
max-width: 100%;
height: auto;
border: 0;
vertical-align: middl
}

ul.scroll-news {
width: 100%; /* リストエリアの幅 */
margin: 0;
padding: 0;
border-top: 1px #808080 dotted; /* リストエリアの上境界線 */
list-style-type: none;
}

/* --- リスト項目 --- */
ul.scroll-news li {
padding: 20px 15px; /* リスト項目のパディング（上下、左右） */
border-bottom: 1px #808080 dotted; /* リスト項目の下境界線 */
}

/* --- 項目内容 --- */
ul.scroll-news dl {
width: 100%;
margin: 0;
font-size: 80%;

}

/* --- 写真エリア --- */
ul.scroll-news dt.photo {
width: 150px; /* 写真エリアの幅 */
float: left;
}


/* --- キャプションエリア --- */
ul.scroll-news dt.title,
ul.scroll-news dd {
margin: 0 0 0 150px; /* キャプションエリアのマージン（上右下左） */
}

/* --- タイトルエリア --- */
ul.scroll-news dt.title {
margin-bottom: 5px; /* タイトルエリアの下マージン */
line-height: 120%;
}

/* --- コメントエリア --- */
ul.scroll-news dd {
line-height: 150%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

.next{
  clear:both;
}


.floatclear{
  clear:both;
}

/*-------  ここまでtopics  --------*/
.color-red{
  color:red;
}

.tenpo-container {
  max-width: 1920px;
  width: 100%;
  padding: 0 5px 0 0;
  margin: 0 auto;
}


.tenpo-heading {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.tenpo-heading h2 {
  font-weight: normal;
}

.tenpo {
  float: left;
  width: 25%;
}

.tenpo-icon {
  position: relative;
  margin-left:5px;
  margin-right:5px;
}

.tenpo-wrapper {
  padding-bottom: 80px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #f7f7f7;
  text-align: center;
}


.tenpo-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 16px;
  color: black;
  font-weight:bold;
}

.tenpo-clear {
  clear: left;
}

/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {
  .tenpo {
    width: 50%;
    margin-bottom: 50px;
  }

.twitter-tweet{
  width:100%;
}
 .topics-column{
   width:100%;
  }
}


/* スマホ向けレイアウト */
@media all and (max-width: 670px) {
.slider{
  display:none;
  }


 .tenpo {
    width: 100%;
  }

 .tenpo-container {
  width: 100%;
}

 .tenpo-wrapper {
  padding-left:0%;
  padding-right: 0%;
    padding-bottom: 10px;
}

 .tenpo-heading {
  padding-top: 20px;
  padding-bottom: 10px;
}

.tenpo-icon {
  margin-left:5px;
}


.twitter-tweet{
  width:100%;
}

 .topics-column{
   width:100%;
  }
  .topics-column1{
   width:100%;
  }

  .scroll-news{
    height:auto;
  }

/* --- 写真エリア --- */
ul.scroll-news dt.photo {
width: 100%; /* 写真エリアの幅 */
}


/* --- タイトルエリア --- */
ul.scroll-news dt.title {
width:100%;
float:left;
  margin-left:auto;
  text-align:center;
}

/* --- コメントエリア --- */
ul.scroll-news dd {
float:left;
width:100%;
margin-left:0;
clear:both;
}


}









/* TOP写真スライドショー */
.wrapper { position: relative;
width: 100%;
height: 400px;
    overflow: hidden;
    }


  /* 文字のスライド */
 .main_imgBox2 { position: relative;
z-index: 20; }

.main_img2 {
    z-index:20;
    opacity: 0;
    width: 100%;
    height: 400px;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime2 48s 0s infinite;/* 8枚のスライドを6秒づつ、42秒かけて再生 */
    animation: anime2 48s 0s infinite;}/* infiniteによって再生をループ */

/* 写真のスライド */
.main_imgBox { position: relative;
z-index: 10; }

.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 400px;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 48s 0s infinite;/* 8枚のスライドを6秒づつ、42秒かけて再生 */
    animation: anime 48s 0s infinite;}/* infiniteによって再生をループ */




    .a001{
       background-image: url("https://file001.shop-pro.jp/PA01270/394/img/001.png");
        background-position: center center;
        background-repeat: no-repeat;
       width: 100%;
      height: 400px;
      }
      .a002{
         background-image: url("https://file001.shop-pro.jp/PA01270/394/img/002.png");
          background-position: center center;
          background-repeat: no-repeat;
          width: 100%;
        height: 400px;
        }

    .a003{
       background-image: url("https://file001.shop-pro.jp/PA01270/394/img/003.png");
        background-position: center center;
        background-repeat: no-repeat;
       width: 100%;
      height: 400px;
      }

    .a004{
         background-image: url("https://file001.shop-pro.jp/PA01270/394/img/004.png");
          background-position: center center;
          background-repeat: no-repeat;
         width: 100%;
        height: 400px;
        }

  .a005{
        background-image: url("https://file001.shop-pro.jp/PA01270/394/img/005.png");
        background-position: center center;
        background-repeat: no-repeat;
        width: 100%;
        height: 400px;
            }

.a006{
  background-image: url("https://file001.shop-pro.jp/PA01270/394/img/006.png");
                        background-position: center center;
                        background-repeat: no-repeat;
                       width: 100%;
                      height: 400px;
                      }

/* 文化の味わいを、暮らしに。 */
                      .a007{
                        background-image: url("https://file001.shop-pro.jp/PA01270/394/img/007.png");
                                              background-position: center center;
                                              background-repeat: no-repeat;
                                             width: 100%;
                                            height: 400px;
                                            }
/*インターバル用*/
.a008{
    background-image: url("https://file001.shop-pro.jp/PA01270/394/img/008.png");
    background-position: center center;
      background-repeat: no-repeat;
      width: 100%;
      height: 400px;
    }


.b001{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/001.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

.b002{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/002.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

.b003{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/003.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

.b004{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/004.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

.b005{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/005.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

.b006{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/006.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

/* 子供 */
.b007{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/007.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

/* 大川水産ロゴ */
.b008{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/008.jpg");
    background-position: center center;
    background-repeat: no-repeat;
   width: 100%;
  height: 400px;
  }

/* 白紙 */
  .b009{
     background-image: url("https://file001.shop-pro.jp/PA01270/394/img/009.jpg");
      background-position: center center;
      background-repeat: no-repeat;
     width: 100%;
    height: 400px;
    }


    .main_img2:nth-of-type(2) { /*1枚目*/
          -webkit-animation-delay: 6s;
          animation-delay: 6s; }

    .main_img2:nth-of-type(3) {
          -webkit-animation-delay: 12s;
          animation-delay: 12s; }

    .main_img2:nth-of-type(4) {
          -webkit-animation-delay: 18s;
          animation-delay: 18s; }

    .main_img2:nth-of-type(5) {
          -webkit-animation-delay: 24s;
          animation-delay: 24s; }

    .main_img2:nth-of-type(6) {
          -webkit-animation-delay: 30s;
          animation-delay: 30s; }

    .main_img2:nth-of-type(7) {
          -webkit-animation-delay: 36s;
          animation-delay: 36s; }

    .main_img2:nth-of-type(8) {/* 7枚目 */
          -webkit-animation-delay: 42s;
          animation-delay: 42s; }

          .main_img2:nth-of-type(9) {/* 8枚目 */
                -webkit-animation-delay: 48s;
                animation-delay: 48s; }




.main_img:nth-of-type(2) { /*1枚目*/
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

.main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

.main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

.main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

.main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

.main_img:nth-of-type(7) {
      -webkit-animation-delay: 36s;
      animation-delay: 36s; }

.main_img:nth-of-type(8) {/* 7枚目 */
      -webkit-animation-delay: 42s;
      animation-delay: 42s; }

      .main_img:nth-of-type(9) {/* 8枚目 */
            -webkit-animation-delay: 48s;
            animation-delay: 48s; }


/* キーフレーム設定 */
@keyframes anime {
  0% {
        opacity: 0;/* 透明度の変更 */
    }
    6% {/* 3秒目から3秒目かけてフェードイン（100÷48=2。2x3＝6%） */
        opacity: 1;
    }
    12% {/* 6秒目。（2x6＝12%） */
        opacity: 1;/* ↓次のスライドが表示されるので、ここから３秒かけてフェードアウト。*/
    }
     18% {/* 9秒目。（2x9＝18%） */
        opacity: 0;
        transform: scale(1.2) ;/* 1.2倍まで画像がズームされる */
         z-index:9;/* 8枚目より1枚目が上に来るようにz-indexを一つ下げています */
    }
    100% { opacity: 0 }/* 100%＝48秒 */
}

/* キーフレーム設定2 */
@keyframes anime2 {
  0% {
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    12% {
        opacity: 1;
    }
     18% {
        opacity: 0;
        transform: scale(1.0) ;
         z-index:19;
    }
    100% { opacity: 0 }
}



/*スマートフォン用*/
@media all and (max-width: 480px) {

/* 写真スライド */
.b001{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp001.jpg");
   background-size: cover;
   background-position: center;
  }

.b002{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp002.jpg");
   background-size: cover;
   background-position: center;
  }

.b003{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp003.jpg");
   background-size: cover;
   background-position: center;
  }

.b004{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp004.jpg");
   background-size: cover;
   background-position: center;
  }

.b005{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp005.jpg");
   background-size: cover;
   background-position: center;
  }

.b006{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp006.jpg");
   background-size: cover;
   background-position: center;
  }


/* 文字スライド */

.a001,.a002,.a003,.a004,.a005,.a006,.a007,.a008{background-size: 97%;}

/*
.a007{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp007.png");
   background-size:cover;
   background-position: center;
  background-size: 97%;
  }*/


.b007{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp007.jpg");
   background-size: cover;
   background-position: center;
  }

.b008{
   background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp008.jpg");
   background-size: cover;
   background-position: center;
  }

  .b009{
     background-image: url("https://file001.shop-pro.jp/PA01270/394/img/sp009.jpg");
     background-size: cover;
     background-position: center;
    }

}