@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ トップページ ◇◆◇
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  slide
  
----------------------------------------------------------------------------------------------------*/

.mainSlide-warp {
  background:url(../image/pattern2.gif) repeat center center;
}

#mainSlide {
  position:relative;
  overflow:hidden;
}
  
#mainSlide:after {
  content:"";
  width:100%;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  z-index:6;
  pointer-events:none;
}

#mainSlide__slider {
  list-style:none;
  height:100%;
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%,0);
}

#mainSlide__slider:before,
#mainSlide__slider:after {
  content:"";
  width:100%;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
}

#mainSlide__slider:before {
  background:url(../image/top/slide/ika-head.png) no-repeat center bottom;
  background-size:contain;
}

#mainSlide__slider:after {
  background:url(../image/top/slide/ika-body.png) no-repeat center bottom;
  background-size:contain;
  z-index:5;
}

#mainSlide__slider li {
  float:left;
  text-align:center;
  position:relative;
}

#mainSlide__slider li a {
  display:block;
  height:100%;
}

#mainSlide__slider li p {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

#mainSlide__slider li.slide01 p:after { background-image:url(../image/top/slide/01_txt.png); }
#mainSlide__slider li.slide02 p:after { background-image:url(../image/top/slide/02_txt.png); }
#mainSlide__slider li.slide03 p:after { background-image:url(../image/top/slide/03_txt.png); }
#mainSlide__slider li.slide04 p:after { background-image:url(../image/top/slide/04_txt.png); }

#mainSlide__slider li p:after {
  content:"";
  width:100%;
  height:100%;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  left:0;
  top:0;
  opacity:0;
}

#mainSlide__slider li.animate p:after {
  opacity:1;
  -webkit-animation:bounceInUp 0.9s forwards;
  animation:bounceInUp 0.9s forwards;
}

@media print,screen and (min-width:641px) {
  #mainSlide {
    height:640px;
    background:url(../image/top/slide/fish.png) no-repeat center bottom;
  }
  
  #mainSlide:after {
    height:180px;
    background:url(../image/top/slide/wakame.png) no-repeat center bottom;
  }

  #mainSlide__slider {
    width:1980px;
  }
  
  #mainSlide__slider li {
    width:33.333333%;
  }
  
  #mainSlide__slider:before,
  #mainSlide__slider:after {
    height:92px;
  }
}

@media screen and (max-width:640px) {
  .mainSlide-warp {
    background-size:60% auto;
  }

  #mainSlide {
    height:0;
    padding-top:90%;
    background:url(../image/top/slide/fish_sp.png) no-repeat center top;
    background-size:contain;
  }
  
  #mainSlide:after {
    height:100%;
    background:url(../image/top/slide/wakame_sp.png) no-repeat center bottom;
    background-size:contain;
  }
  
  #mainSlide__slider {
    width:90%;
  }
  
  #mainSlide__slider:before,
  #mainSlide__slider:after {
    height:0;
    padding-top:19%;
  }
}


/*-----------------------------------------------------------------------------------
  arrows
-----------------------------------------------------------------------------------*/

#mainSlide__slider_arrow {
}

#mainSlide__slider_arrow .slick-prev,
#mainSlide__slider_arrow .slick-next {
  position:relative;
  font-size:0;
  line-height:0;
  color:#fff;
  display:inline-block;
  z-index:9;
  border-radius:100%;
  box-sizing:border-box;
  border-width:1px;
  border-style:solid;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  vertical-align:middle;
  background:url(../image/icon/arB.png) no-repeat center center;
  background-size:contain;
  background-color:#003e86;
  border-color:#fff;
}

#mainSlide__slider_arrow .slick-next {
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}

#mainSlide__slider_arrow .slick-prev { float:left; }
#mainSlide__slider_arrow .slick-next { float:right; }

@media print,screen and (min-width:641px) {
  #mainSlide__slider_arrow {
    width:660px;
    padding-top:520px;
    margin-left:auto;
    margin-right:auto;
  }

  #mainSlide__slider_arrow .slick-prev,
  #mainSlide__slider_arrow .slick-next {
    width:60px;
    height:60px;
  }
  
  #mainSlide__slider_arrow .slick-prev,
  #mainSlide__slider_arrow .slick-next {
    -webkit-transition:background ease 0.15s, border ease 0.15s;
    transition:background ease 0.15s, border ease 0.15s;
  }
  
  #mainSlide__slider_arrow .slick-prev:hover,
  #mainSlide__slider_arrow .slick-next:hover {
    background:url(../image/icon/arB-blue.png) no-repeat center center;
    background-size:contain;
    background-color:#fff;
    border-color:#fff;
  }

}

@media screen and (max-width:640px) {
  #mainSlide__slider_arrow {
    width:100%;
    margin-top:-50%;
  }
  
  #mainSlide__slider_arrow .slick-prev,
  #mainSlide__slider_arrow .slick-next {
    width:3rem;
    height:3rem;
    margin-top:1.5rem;
  }

  #mainSlide__slider_arrow .slick-prev { margin-left:1rem; }
  #mainSlide__slider_arrow .slick-next { margin-right:1rem; }
}


/*----------------------------------------------------------------------------------------------------

  人気ランキング
  
----------------------------------------------------------------------------------------------------*/

.ranking_hd {
  background-image:url(../image/top/ranking_hd.png);
}

.info_hd {
  background-image:url(../image/top/info_hd.png);
}
.info p span{
font-weight: bold;
font-size: 20px;
}

@media print,screen and (min-width:641px) {
  .ranking { padding-top:70px; padding-bottom:80px; }
  .info { padding-top:70px; padding-bottom:0px; }
}

@media screen and (max-width:640px) {
  .ranking { padding-top:2.25rem; padding-bottom:2.5rem; }
  .info { padding-top:2.25rem; padding-bottom:0rem; }
}

#ranking_list {
  position:relative;
}
  
#ranking__slider {
  list-style:none;
}

#ranking__slider li {
  float:left;
  text-align:right;
  position:relative;
  padding-top:1.5em;
  box-sizing:border-box;
}

#ranking__slider li.rank1:before { background-image:url(../image/icon/rank1.png); }
#ranking__slider li.rank2:before { background-image:url(../image/icon/rank2.png); }
#ranking__slider li.rank3:before { background-image:url(../image/icon/rank3.png); }
#ranking__slider li.rank4:before { background-image:url(../image/icon/rank4.png); }
#ranking__slider li.rank5:before { background-image:url(../image/icon/rank5.png); }

#ranking__slider li:before {
  content:"";
  display:inline-block;
  background-size:contain;
  background-position:center bottom;
  background-repeat:no-repeat;
  position:absolute;
  left:0.75rem;
  top:0;
  z-index:10;
}

#ranking__slider li a {
  display:block;
  background-color:#f2f4f5;
}

#ranking__slider li a,
#ranking__slider li a:visited,
#ranking__slider li a:hover { color:inherit; text-decoration:none; }

#ranking__slider li p.come {
  font-size:93.8%;
  text-align:left;
  line-height:1.6;
}

#ranking__slider li .price table {
  border-collapse:collapse;
  border:0;
  display:inline-block;
}

#ranking__slider li .price th,
#ranking__slider li .price td {
  font-weight:bold;
  box-sizing:border-box;
  line-height:1.6;
  vertical-align:bottom;
}

#ranking__slider li .price th {
  padding-right:0.75rem;
  padding-bottom:0.25em;
  font-size:87.5%;
  text-align:left;
}

#ranking__slider li .price td {
  font-size:118.8%;
  color:#ca0a14;
  white-space:nowrap;
  text-align:right;
}

@media print,screen and (min-width:641px) {
  #ranking_list {
    width:1188px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    padding-bottom:50px;
  }

  #ranking__slider li:before {
    width:3.5rem;
    height:4rem;
  }
  
  #ranking__slider li {
    width:25%;
    padding-left:4px;
    padding-right:4px;
    box-sizing:border-box;
  }

  #ranking__slider li p.come {
    padding:1.25rem 1.25rem 0.75rem 1.25rem;
  }
  
  #ranking__slider li .price {
    padding:0 1.25rem 1rem 1.25rem;
  }
  
  #ranking__slider li .photo {
    display:block;
    overflow:hidden;
  }
  
  #ranking__slider li .photo img {
    transition:transform 0.5s ease;
  }
  
  #ranking__slider li a:hover .photo img {
    transform:scale(1.1);
  }
  
  #ranking__slider li a {
    -webkit-transition:background ease 0.15s;
    transition:background ease 0.15s;
  }
  
  #ranking__slider li a:hover {
    background-color:#fff;
  }
}

@media screen and (max-width:640px) {
  #ranking_list {
    padding-left:0.375rem;
    padding-right:0.375rem;
  }

  #ranking__slider li:before {
    width:3.5rem;
    height:4rem;
  }
  
  #ranking__slider li {
    width:50%;
    padding-left:0.375rem;
    padding-right:0.375rem;
  }

  #ranking__slider li p.come {
    padding:1rem 1rem 0.5rem 1rem;
  }
  
  #ranking__slider li .price {
    padding:0 1rem 1rem 1rem;
  }
}

@media screen and (max-width:500px) {
  #ranking__slider li:before {
    width:3rem;
    height:4rem;
  }
}


/*-----------------------------------------------------------------------------------
  arrows
-----------------------------------------------------------------------------------*/

#ranking__slider_arrow .slick-prev,
#ranking__slider_arrow .slick-next {
  position:absolute;
  top:50%;
  margin-top:-20px;
  width:40px;
  height:40px;
  font-size:0;
  line-height:0;
  color:#fff;
  display:inline-block;
  z-index:9;
  border-radius:100%;
  box-sizing:border-box;
  border-width:1px;
  border-style:solid;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  vertical-align:middle;
  background:url(../image/icon/arB-blue.png) no-repeat center center;
  background-size:contain;
  background-color:#fff;
  border-color:#668bb6;
}

#ranking__slider_arrow .slick-next {
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}

#ranking__slider_arrow .slick-prev { left:-65px; }
#ranking__slider_arrow .slick-next { right:-65px; }

@media print,screen and (min-width:641px) {
  #ranking__slider_arrow .slick-prev,
  #ranking__slider_arrow .slick-next {
    -webkit-transition:background ease 0.15s, border ease 0.15s;
    transition:background ease 0.15s, border ease 0.15s;
  }
  
  #ranking__slider_arrow .slick-prev:hover,
  #ranking__slider_arrow .slick-next:hover {
    background:url(../image/icon/arB.png) no-repeat center center;
    background-size:contain;
    background-color:#003e86;
    border-color:#003e86;
  }
}

@media screen and (max-width:640px) {
  #ranking__slider_arrow { display:none; }
}


/*-----------------------------------------------------------------------------------
  ドット
-----------------------------------------------------------------------------------*/

#ranking__slider_dot {
  display:none;
}

@media screen and (max-width:640px) {
  #ranking__slider_dot {
    padding-top:1.25rem;
    padding-bottom:1.5rem;
    display:block;
    line-height:0;
  }
}


/*----------------------------------------------------------------------------------------------------

  ツチヤについて
  
----------------------------------------------------------------------------------------------------*/

.about-hd {
  background:url(../image/top/about_hd_bg.jpg) no-repeat center top;
  background-size:cover;
}

.about-hd h3 {
  background:url(../image/top/about_hd.png) no-repeat center center;
  background-size:contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

@media print,screen and (min-width:641px) {
  .about-hd h3 { height:300px; }
}

@media screen and (max-width:640px) {
  .about-hd h3 {
    height:0;
    padding-top:42%;
  }
}

.about {
  background:url(../image/pattern1.gif) repeat center top;
  position:relative;
  box-sizing:border-box;
}

.about p { font-size:112.5%; }

.about:before,
.about:after,
.about p:before {
  content:"";
  display:block;
  width:100%;
  position:absolute;
  left:0;
}

@media print,screen and (min-width:641px) {
  .about {
    height:710px;
    padding-top:65px;
  }
  
  .about p { line-height:2.2; }

  .about:before {
    height:653px;
    background:url(../image/top/about_photo1_pc.png) no-repeat center top;
    top:-56px;
  }
  
  .about:after {
    height:304px;
    background:url(../image/top/about_photo2_pc.png?v=2) no-repeat center top;
    bottom:70px;
  }
}

@media screen and (max-width:640px) {
  .about {
    padding-bottom:2.5rem;
  }
  
  .about p { position:relative; line-height:2; }
  
  .about p.first { padding-top:51%; }
  
  .about p.first:before {
    height:0;
    padding-top:50%;
    background:url(../image/top/about_photo1_sp.png) no-repeat center top;
    background-size:contain;
    top:0;
    margin-top:-5%;
  }
  
  .about p.last { padding-top:66%; }
  
  .about p.last:before {
    height:0;
    padding-top:62%;
    background:url(../image/top/about_photo2_sp.png?v=2) no-repeat center top;
    background-size:contain;
    top:0;
    margin-top:-1%;
  }
}


/*----------------------------------------------------------------------------------------------------

  支払い方法
  
----------------------------------------------------------------------------------------------------*/

.payment {
  background-color:#e2f3f8;
}

@media print,screen and (min-width:641px) {
  .payment { padding-bottom:70px; }
}


/*-----------------------------------------------------------------------------------
  クレジットカード
-----------------------------------------------------------------------------------*/

.creditcard_hd {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  position:relative;
  z-index:2;
}
  
.creditcard_body {
  font-size:112.5%;
  display:inline-block;
  background:url(../image/waveline.png) repeat-x left top;
  position:relative;
}

.creditcard_body:after {
  content:"";
  display:block;
  width:100%;
  height:8px;
  background:url(../image/waveline.png) repeat-x left bottom;
  position:absolute;
  left:0;
  bottom:0;
}

.creditcard_body span,
.creditcard_body b {
  display:inline-block;
  margin-left:0.25rem;
  margin-right:0.25rem;
  color:#1080b9;
}

.creditcard_body b {
  font-size:118.8%;
}

@media print,screen and (min-width:641px) {
  .creditcard_hd {
    height:150px;
    background:url(../image/top/creditcard_hd_pc.png) no-repeat center top;
    margin-top:-40px;
  }

  .creditcard_hd { margin-bottom:40px; }
  
  .creditcard_body {
    margin-top:50px;
    margin-bottom:50px;
    padding:2rem 1em;
  }
}

@media screen and (max-width:640px) {
  .creditcard {
    padding-left:0.75rem;
    padding-right:0.75rem;
  }
  
  .creditcard_hd {
    height:0;
    padding-top:21%;
    padding-top:-webkit-calc(135/640*100%);
    padding-top:calc(135/640*100%);
    background:url(../image/top/creditcard_hd_sp.png) no-repeat center top;
    background-size:contain;
    margin-top:-2.5%;
    margin-bottom:1.75rem;
  }
  
  .creditcard_list {
    display:block;
    height:0;
    padding-top:28.125%;
    padding-top:-webkit-calc(180/640*100%);
    padding-top:calc(180/640*100%);
    background:url(../image/top/creditcard-list_sp.png) no-repeat center top;
    background-size:contain;
  }
  
  .creditcard_list img {
    display:none;
  }
  
  .creditcard_body {
    margin-top:1.75rem;
    margin-bottom:1.75rem;
    padding:2rem 0.5rem;
  }
}

@media screen and (max-width:500px) {
  .creditcard_hd {
    margin-bottom:1.5rem;
  }
}


/*-----------------------------------------------------------------------------------
  支払い方法
-----------------------------------------------------------------------------------*/

.method-pay dt { color:#fff; }
.method-pay .daibiki dt { background-color:#14a064; }
.method-pay .web dt { background-color:#e4b122; }

.method-pay dd {
  background-color:#fff;
}

.method-pay dd img { margin-bottom:1.25rem; }
.method-pay dd .l-btn { margin-top:1.5rem; }

@media print,screen and (min-width:641px) {
  .method-pay {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .method-pay dl {
    width:580px;
    float:left;
  }
  
  .method-pay dl:last-child {
    float:right;
  }

  .method-pay dt img { max-height:70px; }
  
  .method-pay dd { padding:35px 30px; }
  .method-pay dd img { height:40px; }
}

@media screen and (max-width:640px) {
  .method-pay {
    padding-left:0.75rem;
    padding-right:0.75rem;
    padding-bottom:1rem;
  }
  
  .method-pay dl.web {
    margin-top:1.25rem;
    margin-bottom:0.25rem;
  }
  
  .method-pay dt img { max-height:3.5rem; }
  
  .method-pay dd { padding:2rem 1.5rem; }
  .method-pay dd img { max-height:35px; }
}


/*----------------------------------------------------------------------------------------------------

  footer
  
----------------------------------------------------------------------------------------------------*/

footer:before {
  content:"";
  display:block;
  width:100%;
  margin-top:0;
  background:url(../image/top/photoGallery.jpg) repeat-x center top;
  background-size:cover;
  -moz-animation:loop 60s linear infinite;
  animation:loop 60s linear infinite;
}

@media print,screen and (min-width:641px) {
  #ft {
    padding-top:60px;
  }
  
  footer:before {
    height:200px;
  }
}

@media screen and (max-width:640px) {
  footer:before {
    height:0;
    padding-top:22.2%;
    margin-top:0;
    padding-top:-webkit-calc(200/900*100%);
    padding-top:calc(200/900*100%);
  }
}