@charset "utf-8";

/*===============================
 全体共通
===============================*/
body {
  background: #fff;
  color: #333;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 18px;
  line-height: 2;
  transition: all .5s;
  position: relative;
}

ul,ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

main img {
  width: 100%;
}

@media screen and (max-width:640px) {
  body {
    font-size: 16px;
  }
}

/*---------- PC・スマホ切り替え ----------*/
.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width:640px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

/*---------- 背景 ----------*/
/*
.bg_1 {
  background: #1c293f;
}
*/

.bg_yellow {
  background: #f9f7f2;
  border-radius: 20px;
}

.bg_rblue {
  background: #dfeef1;
  border-radius: 20px;
}

/*---------- 枠 ----------*/
.wrapper { /* メイン横幅 */
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px;
}

.box_1000 { /* 横幅1000px枠 */
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
}

.box_yellow {
  border: 4px solid #fee361;
  background: #fff;
  border-radius: 20px;
}

@media screen and (max-width:640px) {
  .wrapper {
    padding: 0 15px;
  }
}

/*---------- リンク ----------*/
a {
  color: #3571ca;
  transition: all .5s;
}

a:hover {
  text-decoration: none;
}

/*---------- ボタン ----------*/
/* ブルーボタン */
.btn_bl {
  border: 2px solid #0290a8;
  border-radius: 100vw;
  background: #0290a8;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 25px;
  transition: all .5s;
}

.btn_bl:hover {
  background: #fff;
  color: #1092b9;
  cursor: pointer;
}

/* ホワイトボタン */
.btn_wt {
  border: 2px solid #0290a8;
  border-radius: 100vw;
  background: #fff;
  color: #0290a8;
  display: inline-block;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 25px;
  transition: all .5s;
}

.btn_wt:hover {
  background: #0290a8;
  color: #fff;
  cursor: pointer;
}

/* ホワイトボタン大 */
.btn_l_wt {
  border: 4px solid #0290a8;
  border-radius: 100vw;
  background: #fff;
  color: #0290a8;
  display: inline-block;
  font-weight: bold;
  font-size: 150%;
  line-height: 1.5;
  padding: 15px 60px;
  transition: all .5s;
}

.btn_l_wt:hover {
  background: #0290a8;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* レッドボタン */
.btn_rd {
  border: 2px solid #e02727;
  border-radius: 100vw;
  background: #e02727;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 25px;
  transition: all .5s;
}

.btn_rd:hover {
  background: #fff;
  color: #e02727;
  cursor: pointer;
}

.btn_rd:disabled {
  opacity: 0.6;
  background: #ccc;
  border: 2px solid #ccc;
}

.btn_rd:disabled:hover {
  color: #fff;
  cursor: auto;
}


/*---------- 見出し ----------*/
h2, h3, h4 {
  color: #0290a8;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

/* 英字 */
.title_about {
  background: url(../images/common/title_about.svg) no-repeat top center / auto 30px;
}

.title_business {
  background: url(../images/common/title_business.svg) no-repeat top center / auto 30px;
}

.title_fish {
  background: url(../images/common/title_fish.svg) no-repeat top center / auto 30px;
}

.title_guide {
  background: url(../images/common/title_guide.svg) no-repeat top center / auto 30px;
}

.title_inquiry {
  background: url(../images/common/title_inquiry.svg) no-repeat top center / auto 30px;
}

.title_itemcategory {
  background: url(../images/common/title_itemcategory.svg) no-repeat top center / auto 30px;
}

.title_news {
  background: url(../images/common/title_news.svg) no-repeat top center / auto 30px;
}

.title_onlineshop {
  background: url(../images/common/title_onlineshop.svg) no-repeat top center / auto 30px;
}

.title_popularitems {
  background: url(../images/common/title_popularitems.svg) no-repeat top center / auto 30px;
}

.title_privacypolicy {
  background: url(../images/common/title_privacypolicy.svg) no-repeat top center / auto 30px;
}

.title_terms {
  background: url(../images/common/title_terms.svg) no-repeat top center / auto 30px;
}

.title_transaction {
  background: url(../images/common/title_transaction.svg) no-repeat top center / auto 30px;
}

@media screen and (max-width:640px) {
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 26px;
  }
}


/*---------- マーカー ----------*/
.marker {
  background: linear-gradient(transparent 50%,#fee361 50%);
}

/*---------- バッジ ----------*/
/* ブルーバッジ */
.badge_bl {
  border: 2px solid #0290a8;
  border-radius: 100px;
  color: #0290a8;
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  padding: 1px 15px;
  margin: 0 10px 5px 0;
}

/* レッドバッジ */
.badge_rd {
  border: 2px solid #e02727;
  border-radius: 100px;
  color: #e02727;
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  padding: 1px 15px;
  margin: 0 10px 5px 0;
}


/*---------- テーブル ----------*/
.uk-table caption {
  background: #041d30;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 10px;
}

.uk-table th {
  color: #333;
  font-weight: bold;
  font-size: 16px;
  vertical-align: top;
}

.uk-table th,
.uk-table td {
  box-sizing: border-box;
  border-bottom: 1px dotted #ccc;
  word-break: break-all;
}

.uk-table tr:last-child th,
.uk-table tr:last-child td {
  border: none;
}

@media screen and (max-width:640px) {
  .uk-table th,
  .uk-table td {
    display: block;
  }
  .uk-table th {
    border-bottom: none;
  }
  .uk-table td {
    padding: 0 12px 16px;
  }
}


/*===============================
 header
===============================*/
header {
  position: relative;
  z-index: 150;
}

/*---------- logo ----------*/
header h1,
header .logo {
  font-size: 12px;
  margin: 10px 0;
  width: 350px;
}

header h1 a:hover,
header .logo a:hover {
  opacity: 0.6;
}

header h1 img,
header .logo img,
header h1 a,
header .logo a {
  color: #333;
  display: block;
  width: 100%;
}

@media screen and (max-width:1220px) {
  header h1,
  header .logo {
    width: 30%;
  }
}

@media screen and (max-width:1100px) {
  header h1,
  header .logo {
    width: 25%;
  }
}

@media screen and (max-width:960px) {
  header h1,
  header .logo {
    width: 40%;
  }
}

@media screen and (max-width:640px) {
  header h1,
  header .logo {
    width: 70%;
  }
}

/*---------- header_nav_pc ----------*/
.uk-navbar-container {
  background: transparent !important;
  margin-top: 5px;
}

/*.uk-navbar-container.active {
  display: block;
}*/

.uk-navbar-nav li a {
  color: #0290a8;
  font-size: 16px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: bold;
  min-height: 30px;
}

.uk-navbar-nav li:hover a {
  opacity: 0.7;
  color: #0290a8;
}

.uk-navbar-nav li:nth-of-type(4),
.uk-navbar-nav li:nth-of-type(5) {
  position: relative;
}

.uk-navbar-nav li:nth-of-type(4)::after {
  content: "ご家庭向け商品";
  color: #0290a8;
  background: #fee361;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: bold;
  padding: 1px;
  text-align: center;
  width: 100px;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.uk-navbar-nav li:nth-of-type(5)::after {
  content: "お店・事業者様向け商品";
  color: #0290a8;
  background: #fee361;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: bold;
  padding: 1px;
  text-align: center;
  width: 144px;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.uk-navbar-dropdown {
  width: 250px;
}

@media screen and (max-width:1220px) {
  .uk-navbar-nav {
    gap: 15px;
  }
}

@media screen and (max-width:960px) {
  .header_nav_tel {
    display: none;
  }
  .uk-navbar-container {
    display: none;
    /*
    box-sizing: border-box;
    background: #fff !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    padding: 5vw;
    */
  }
  /*
  .uk-navbar-nav {
    margin: 40px 0 0;
    display: block;
  }
  .uk-navbar-nav li {
    display: block;
  }
  .uk-navbar-nav li a {
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    display: block;
    min-height: auto;
    padding: 7px;
    width: 100%;
  }
  .uk-navbar-nav li a span {
    display: none;
  }
  .uk-navbar-dropdown {
    display: block;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-left: 1em;
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
  }
    */
}

/*---------- ハンバーガーメニュー ----------*/
.nav_btn {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1200;
  background: #fff;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  padding: 0;
}

.nav_btn span{
  display: inline-block;
  transition: all .5s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #041d30;
  width: 45%;
}

.nav_btn span:nth-of-type(1) {
  top:15px; 
}

.nav_btn span:nth-of-type(2) {
  top:23px;
}

.nav_btn span:nth-of-type(3) {
  top:31px;
}

.nav_btn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.nav_btn.active span:nth-of-type(2) {
  opacity: 0;
}

.nav_btn.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

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

/*---------- SP nav ----------*/
.header_nav_sp {
  display: none;
  background: #36b7d6;
  box-sizing: border-box;
  padding: 5vw;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
}
 
.header_nav_sp.active {
  display: block;
}

.header_nav_sp_inner {
  box-sizing: border-box;
  height: 100%;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.header_nav_sp_inner::-webkit-scrollbar{
  display: none;
}

.header_nav_sp_logo {
  margin-bottom: 15px;
  text-align: center;
}

.header_nav_sp_logo img {
  width: 50%;
}

.header_nav_sp ul {
  margin-bottom: 30px;
}

.header_nav_sp li {
  border-top: 1px dotted #fff;
}

.header_nav_sp li:nth-of-type(5),
.header_nav_sp li:nth-of-type(6) {
  border-top: 1px dotted #fff;
  margin-left: 2em;
}

.header_nav_sp li:first-of-type {
  border: none;
}

.header_nav_sp li a {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
}

.header_nav_sp li:nth-of-type(5) a,
.header_nav_sp li:nth-of-type(6) a,
.header_nav_sp li:last-of-type a {
  font-size: 16px;
  font-weight: normal;
}

.header_nav_sp li a span {
  color: #0290a8;
  background: #fff;
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
  padding: 1px 5px;
  margin-left: 1em;
}

.header_nav_sp nav div {
  text-align: center;
}

.header_nav_sp nav div:nth-of-type(2) a,
.header_nav_sp nav div:nth-of-type(3) {
  color: #fffa02;
}

.header_nav_sp nav div:nth-of-type(2),
.header_nav_sp nav div:nth-of-type(3) {
  margin-right: auto;
  margin-left: auto;
  width: 80%;
}

.header_nav_sp nav div + div {
  margin-top: 20px;
}


/*===============================
 main
===============================*/



/*===============================
 topページ
===============================*/
.top_h2 {
  padding-top: 40px;
}

/*---------- メインビジュアル ----------*/
.mainvisual {
  position: relative;
}

.mainvisual::after {
  background: url(../images/top/bg_mainvisual.png) no-repeat center center / 100% auto;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.mainvisual_logo {
  color: #fff;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 10px #333;
  width: 90%;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index: 100;
}

.mainvisual_logo strong {
  font-size: 70px;
  font-weight: 500;
}

.mainvisual img {
  width: 100%;
}

.mainvisual_pc {
  display: block;
}

.mainvisual_sp {
  display: none;
}

@media screen and (max-width:960px) {
  .mainvisual::after {
    background: url(../images/top/bg_mainvisual_sp.png) no-repeat center center / 100% auto;
  }
  .mainvisual_pc {
    display: none;
  }
  
  .mainvisual_sp {
    display: block;
  }
}

@media screen and (max-width:640px) {
  .mainvisual_logo {
    font-size: 4vw;
  }
  .mainvisual_logo strong {
    font-size: 8vw;
  }
}

/*---------- 星野水産について ----------*/
.top_about {
  background-image: url(../images/common/asari.png),
                    url(../images/common/ebi.png),
                    url(../images/common/ika.png),
                    url(../images/common/tako.png),
                    url(../images/common/sakana.png);
  background-repeat: no-repeat;
  background-size: 130px 130px;
  background-position: top left,
                        top right,
                        center left 60px,
                        center right 20px,
                        bottom 30px left;
}

.top_about .uk-flex-middle h3,
.top_about .uk-flex-middle p {
  text-shadow: 0 0 3px #fff,
                0 0 3px #fff,
                0 0 3px #fff,
                0 0 3px #fff,
                0 0 3px #fff;
}

@media screen and (max-width:960px) {
  .top_about {
    background-size: 18vw 18vw;
    background-position: top left,
                          top right,
                          top 51% left,
                          top 51% right,
                          bottom 10vw left;
  }
}


/*---------- 取り扱い商材一覧 ----------*/
.top_products {
  background: #f9f7f2;
  position: relative;
}

.top_products::before {
  content: "";
  background: url(../images/common/bg_yellow_top.svg) no-repeat top center / 100% auto;
  display: block;
  height: 5vw;
  width: 100%;
  position: absolute;
  top: -5vw;
  left: 0;
}

.top_products::after {
  content: "";
  background: url(../images/common/bg_yellow_bottom.svg) no-repeat top center / 100% auto;
  display: block;
  height: 5vw;
  width: 100%;
  position: absolute;
  bottom: -5vw;
  left: 0;
}

.top_products figure {
  margin: 0;
}

.top_products h3 {
  margin: 0;
  font-size: 120%;
}



/*---------- 人気商品・取り扱い商品カテゴリー ----------*/
/* 人気商品 */
.top_shopping {
  background: url(../images/common/bg_splash.png) repeat top center / 1000px auto;
}

.top_shopping .box_yellow figure {
  position: relative;
}

.top_shopping .box_yellow figure::after {
  content: "";
  display: block;
  width: 85%;
  height: 60px;
  position: absolute;
  top: -20px;
  left: 40px;
}

.top_shopping .box_yellow:nth-of-type(1) figure::after {
  background: url(../images/top/top_shopping_popular_1.svg) no-repeat left center / auto 100%;
}

.top_shopping .box_yellow:nth-of-type(2) figure::after {
  background: url(../images/top/top_shopping_popular_2.svg) no-repeat left center / auto 100%;
  height: 75px;
}

.top_shopping .box_yellow:nth-of-type(3) figure::after {
  background: url(../images/top/top_shopping_popular_3.svg) no-repeat left center / auto 100%;
}

.top_shopping .box_yellow img {
  border-radius: 20px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 取り扱い商品カテゴリー */
.shopping_category a:hover {
  opacity: 0.6;
}

.shopping_category img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 7px 7px 0 #ddedec;
}

.shopping_category h3 {
  color: #333;
  font-size: 130%;
  margin: 0;
}


/*---------- 業者・飲食店の方へ ----------*/
.top_business {
  background: #f9f7f2;
  position: relative;
}

.top_business::before {
  content: "";
  background: url(../images/common/bg_yellow_top.svg) no-repeat top center / 100% auto;
  display: block;
  height: 5vw;
  width: 100%;
  position: absolute;
  top: -5vw;
  left: 0;
}

.top_business::after {
  content: "";
  background: url(../images/common/bg_yellow_bottom.svg) no-repeat bottom center / 100% auto;
  display: block;
  height: 5vw;
  width: 100%;
  position: absolute;
  bottom: -5vw;
  left: 0;
}

/*---------- お知らせ ----------*/
.top_news_list > div > div {
  background: #f9f7f2;
  border-radius: 20px;
}

.top_news_list a {
  color: #333;
}

.top_news_list img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.top_news_list p {
  font-weight: bold;
  margin: 0;
}


/*===============================
 下層ページ共通
===============================*/
/*---------- 見出し ----------*/
.title {
  background-position: center;
  background-size: cover;
  text-align: center;
  padding: 60px 0;
  position: relative;
}

.title::before {
  background-color: rgba(0,131,137,0.7);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
}

.title h1 {
  color: #fff;
  font-family: "Kiwi Maru", serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  padding-top: 30px;
  position: relative;
}

.title h1 span {
  font-size: 24px;
}

@media screen and (max-width:640px) {
  .title {
    padding: 150px 0 60px;
  }
  .title h1 {
    font-size: 6vw;
  }
  .title h1 span {
    font-size: 4vw;
  }
}

/*---------- パンくずリスト ----------*/
.uk-breadcrumb {
  margin: 15px 0 30px;
}

/*---------- ページ内リンク ----------*/
.page_link ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.page_link_5 li {
  width: calc(100% / 5 - 10px);
}

.page_link_6 li {
  width: calc(100% / 6 - 10px);
}

.page_link a {
  display: block;
  background: #dfeef1;
  border-radius: 20px;
  color: #0290a8;
  font-weight: bold;
  padding: 10px 25px 20px;
  text-align: center;
  transition: all .5s;
  position: relative;
}

.page_link a:hover {
  box-shadow: 0px 0px 5px 0px rgba(2, 144, 168, 0.8);
}

.page_link a::after {
  content: "\f107";
  font-family: "Fontawesome";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.page_link img {
  width: 80%;
}

@media screen and (max-width:800px) {
  .page_link_5 li {
    width: calc(100% / 2 - 10px);
  }
  .page_link_6 li {
    width: calc(100% / 3 - 10px);
  }
  .page_link a {
    padding: 10px 15px 20px;
  }
  .page_link img {
    width: 100%;
  }
}


/*===============================
 お知らせ
===============================*/
.news_list .date {
  color: #666;
  font-size: 16px;
}

.news_list h3 {
  border-bottom: 2px dotted #0290a8;
  font-size: 140%;
  margin: 0;
}

.news_list a {
  font-weight: bold;
}

.news_list a:hover {
  opacity: 0.6;
}

.news_list img {
  width: 40%;
}

@media screen and (max-width:640px) {
  .news_list img {
    width: 100%;
  }
}


/*===============================
 星野水産について
===============================*/

/*---------- 加工風景・生産工程 ----------*/
.process li + li {
  margin-top: 60px;
}

.process li {
  position: relative;
}

.process li::after {
  content: "\f063";
  color: #0290a8;
  font-family: "Fontawesome";
  font-size: 40px;
  position: absolute;
  bottom: -65px;
  left: 50%;
  transform: translateX(-50%);
}

.process li:last-child::after {
  content: none;
}

.process figcaption {
  line-height: 1.4;
  text-align: center;
  font-size: 80%;
}

.process img {
  width: 100%;
}

/*---------- 経営理念 ----------*/
.philosophy {
  color: #0290a8;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
}

/*---------- リンク ----------*/
.link_list a {
  display: block;
}

.link_list a:hover {
  opacity: 0.7;
}

.link_list img {
  border: 1px solid #ccc;
}


/*===============================
 取り扱い商材
===============================*/
.products h2 {
  border-bottom: #0290a8 4px dotted;
  padding: 80px 0 10px;
}

.products #ebi h2 {
  background: url(../images/common/ebi.png) no-repeat top center / 80px auto;
}

.products #tako h2 {
  background: url(../images/common/tako.png) no-repeat top center / 80px auto;
}

.products #ika h2 {
  background: url(../images/common/ika.png) no-repeat top center / 80px auto;
}

.products #asari h2 {
  background: url(../images/common/asari.png) no-repeat top center / 80px auto;
}

.products #sakana h2 {
  background: url(../images/common/sakana.png) no-repeat top center / 80px auto;
}

.products #kako h2 {
  background: url(../images/common/kako.png) no-repeat top center / 80px auto;
}

.product_list + .product_list {
  border-top: 1px dotted #ccc;
}

.product_badge_list li span {
  color: #0290a8;
  border: 2px solid #0290a8;
  border-radius: 100px;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 10px;
}

/*===============================
 オンラインショップ（商品一覧）
===============================*/
.shopping {
  background-image: url(../images/common/sakana.png),
                    url(../images/common/ebi.png),
                    url(../images/common/ika.png),
                    url(../images/common/tako.png);
  background-repeat: no-repeat;
  background-size: 130px 130px;
  background-position: top 28% left,
                        top 28% right,
                        top 60% left 50px,
                        top 60% right 50px;
}

@media screen and (max-width:640px) {
  .shopping {
    background: none;
  }
  .shopping_cookingimg {
    background-image: url(../images/common/sakana.png),
                      url(../images/common/ebi.png),
                      url(../images/common/ika.png),
                      url(../images/common/tako.png);
    background-repeat: no-repeat;
    background-size: 15vw 15vw;
    background-position: top left,
                          top right,
                          bottom left,
                          bottom right;
  }
}

.shopping_list .popular {
  position: relative;
}

.shopping_list .popular::after {
  content: "";
  display: block;
  width: 75px;
  height: 75px;
  background: url(../images/shopping/icon_popular.svg) no-repeat center center / 100% auto;
  position: absolute;
  top: -13px;
  right: -13px;
}

.shopping_list a {
  display: block;
}

.shopping_list a:hover .btn_bl {
  background: #fff;
  color: #1092b9;
}

.shopping_list .awaiting {
  position: relative;
}

.shopping_list .awaiting figure {
  filter: brightness(60%);
}

.shopping_list .awaiting::after {
  content: "入荷待ち";
  color: #0290a8;
  background: #fff;
  border: 2px solid #0290a8;
  font-weight: bold;
  display: inline-block;
  padding: 3px 10px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -70%);
}

.shopping_list figure {
  margin: 0;
}

.shopping_list img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.shopping_list .uk-card-body {
  padding: 15px;
}

.shopping_list h3 {
  font-size: 24px;
}

.shopping_list p {
  color: #e02727;
  font-weight: bold;
  font-size: 90%;
  line-height: 1.4;
}

.shopping_list p strong {
  font-size: 150%;
}

.shopping_list p:last-child {
  margin: 0;
  text-align: center;
}

/*===============================
 オンラインショップ（商品詳細）
===============================*/
.shopping_detail_img img {
  width: 100%;
}

.mySwiper img:hover {
  filter: brightness(60%);
  cursor: pointer;
}

.shopping_detail_awaiting {
  background: #e02727;
  border-radius: 100px;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 10px 25px;
  margin: 10px 0 0;
}

.shopping_detail_price {
  color: #e02727;
  font-weight: bold;
}

.shopping_detail_price strong {
  font-size: 180%;
}

.shopping_detail select {
  border-radius: 5px;
  padding: 5px 15px;
  text-align: center;
}

.shopping_detail_guide i {
  color: #0290a8;
}

.spinner-container {
  font-weight: bold;
  display: flex;
  justify-content: center;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.spinner-container .spinner {
  width: 70px;
  padding: 0;
  text-align: center;
  border: 2px solid #ccc;
  background: none;
  font-weight: bold;
  font-size: 20px;
  outline: none;
}

.spinner-container .spinner::-webkit-inner-spin-button,
.spinner-container .spinner::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.spinner-container .spinner-sub,
.spinner-container .spinner-add {
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
  line-height: 35px;
  margin: 0 10px;
}

.spinner-container .disabled {
  opacity: 0.3;
  cursor: inherit;
}

.shopping_info { /*業務用商品一覧でも使用*/
  background: #f9f7f2;
  margin: 5vw 0;
  position: relative;
}

.shopping_info::before {
  content: "";
  background: url(../images/common/bg_yellow_top.svg) no-repeat top center / 100% auto;
  display: block;
  height: 5vw;
  width: 100%;
  position: absolute;
  top: -5vw;
  left: 0;
}

.shopping_info::after {
  content: "";
  background: url(../images/common/bg_yellow_bottom.svg) no-repeat bottom center / 100% auto;
  display: block;
  height: 5vw;
  width: 100%;
  position: absolute;
  bottom: -5vw;
  left: 0;
}

.shopping_info table th {
  box-sizing: border-box;
  width: 8em;
}

.shopping_info figcaption {
  text-align: center;
  font-size: 80%;
}

@media screen and (max-width:640px) {
  .shopping_detail_awaiting {
    display: block;
    margin: 10px auto;
  }
  .shopping_info table th {
    width: 100%;
  }
}


/*===============================
 お買い物ガイド
===============================*/
.guide img {
  border: 1px solid #ccc;
}

/*===============================
 特定商取引法に基づく表記
===============================*/


/*===============================
 業者・飲食店の方へ
===============================*/
.business_list h3 {
  border-bottom: #0290a8 4px dotted;
  padding: 80px 0 10px;
}

.business_list h4 {
  margin: 20px 0;
}

/* 対応可能な加工内容 */
#processable figure {
  margin: 0;
}

#processable img {
  width: 150px;
}

/* 業務用商品紹介 */
.business_list figure {
  margin: 0;
}

.business_list img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.business_list .uk-card-body {
  padding: 15px;
}

.business_list h4,
.uk-modal-dialog h4 {
  font-size: 1.5rem;
  margin: 0 0 10px;
}

.business_list .badge_rd,
.business_list .badge_bl {
  border-width: 1px;
  font-size: 12px;
  padding: 1px 10px;
  margin: 0 8px 5px 0;
}

.business_list .whilesupplieslast {
  position: relative;
}

.business_list .whilesupplieslast::after {
  content: "";
  display: block;
  width: 75px;
  height: 75px;
  background: url(../images/business/icon_whilesupplieslast.svg) no-repeat center center / 100% auto;
  position: absolute;
  top: -13px;
  right: -13px;
}

.uk-modal-dialog {
  width: 90%;
}

.uk-modal-dialog img {
  width: 100%;
}

@media screen and (max-width:640px) {
  .uk-modal-dialog {
    width: 100%;
  }
}

/* 新着商品 */
.business_list#new h3 {
  background: url(../images/common/new.png) no-repeat top center / 80px auto;
}

/* メヒカリ商品 */
.business_list#mehikari h3 {
  background: url(../images/common/sakana.png) no-repeat top center / 80px auto;
}

/* エビ商品 */
.business_list#ebi h3 {
  background: url(../images/common/ebi.png) no-repeat top center / 80px auto;
}

/* 真ダコ商品 */
.business_list#tako h3 {
  background: url(../images/common/tako.png) no-repeat top center / 80px auto;
}

/* ニギス商品 */
.business_list#nigisu h3 {
  background: url(../images/common/nigisu.png) no-repeat top center / 80px auto;
}

/* その他 */
.business_list#other h3 {
  background: url(../images/common/ei.png) no-repeat top center / 80px auto;
}

/* お問い合わせ追従ボタン */
.fix_content {
  background: #0290a8;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  writing-mode: vertical-rl;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  z-index: 1000;
}

.fix_content p {
  margin: 0;
}

.fix_content a {
  color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 18px;
}

@media screen and (max-width:960px) {
  .fix_content {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 20px;
    writing-mode: horizontal-tb;
    width: 80%;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
  }
}

/* ご相談から納品までの流れ */
#flow ul {
  width: 450px;
  margin: 0 auto;
}

#flow ul li {
  font-weight: bold;
  position: relative;
}

#flow ul li::after {
  content: "\f309";
  color: #94dce7;
  font-family: 'Fontawesome';
  font-size: 2rem;
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
}

#flow ul li:last-child::after {
  content: none;
}

#flow ul li + li {
  margin-top: 50px;
}

#flow ul li p {
  border: 2px solid #36b7d6;
}

#flow ul li p::before {
  color: #fff;
  background: #36b7d6;
  display: inline-block;
  padding: 1px 15px;
  margin-right: 0.5em;
}

#flow ul li:nth-of-type(1) p::before {
  content: "1";
}
#flow ul li:nth-of-type(2) p::before {
  content: "2";
}
#flow ul li:nth-of-type(3) p::before {
  content: "3";
}
#flow ul li:nth-of-type(4) p::before {
  content: "4";
}

@media screen and (max-width:480px) {
  #flow ul {
    width: 100%;
  }
}



/*===============================
 プライバシーポリシー
===============================*/
.privacy ul li {
  margin-left: 1em;
}

.privacy ul li:nth-of-type(1)::before {
  content: "(1)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(2)::before {
  content: "(2)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(3)::before {
  content: "(3)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(4)::before {
  content: "(4)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(5)::before {
  content: "(5)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(6)::before {
  content: "(6)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(7)::before {
  content: "(7)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(8)::before {
  content: "(8)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(9)::before {
  content: "(9)";
  margin-left: -1em;
}

.privacy ul li:nth-of-type(10)::before {
  content: "(10)";
  margin-left: -1em;
}



/*===============================
 お問い合わせ
===============================*/
.contact .mfp_achroma,
.contact .mfp_colored {
  background-color: transparent !important;
}

.contact #mailformpro .uk-input,
.contact #mailformpro .mfp_checked,
.contact #mailformpro .uk-textarea,
.contact #mailformpro .uk-radio {
  box-shadow: none !important;
}

.contact #mailformpro .mfp_not_checked,
.contact #mailformpro .mfp_checked {
  border: none !important;
}

.contact #mailformpro .uk-textarea {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

.contact .mfp_element_submit,
.contact .mfp_element_reset,
.contact .mfp_element_button,
.contact .mfp_next,
.contact .mfp_prev {
  text-shadow: none;
}

.contact .mfp_element_button {
  background: none;
  border: none;
}

.contact #mfp_button_send {
  border: 2px solid #0290a8;
  border-radius: 100vw;
  background: #0290a8;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 25px;
  transition: all .5s;
}

.contact #mfp_button_send:hover {
  background: #fff;
  color: #1092b9;
  cursor: pointer;
}

.contact #mfp_button_cancel {
  border: 2px solid #0290a8;
  border-radius: 100vw;
  background: #fff;
  color: #0290a8;
  display: inline-block;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 25px;
  transition: all .5s;
}

.contact #mfp_button_cancel:hover {
  background: #0290a8;
  color: #fff;
  cursor: pointer;
}


/*===============================
 footer
===============================*/
footer {
  background: #36b7d6;
  color: #fff;
  margin-top: 5vw;
  position: relative;
}

footer::before {
  background: url(../images/common/bg_footer.svg) no-repeat top center / 100% auto;
  content: "";
  display: block;
  height: 5vw;
  width: 100%;
  position: absolute;
  top: -5vw;
  left: 0;
}

footer a {
  color: #fff;
}

footer a:hover {
  color: #fff;
  text-decoration: underline;
}

/*---------- logo ----------*/
.footer_logo {
  margin: 0 0 20px;
}

.footer_logo img {
  width: 150px;
}

@media screen and (max-width:640px) {
  .footer_logo img {
    width: 45%;
  }
}

/*---------- nav ----------*/
footer nav {
  position: relative;
}

footer nav::after {
  content: "";
  display: block;
  background: url(../images/common/line_wave.svg) no-repeat bottom center / 60% auto;
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: -40px;
  left: 0;
}

footer nav li + li {
  padding: 5px 0 0;
}

footer nav ul:nth-of-type(2) li:nth-child(n+2) {
  padding-left: 1em;
}

@media screen and (max-width:640px) {
  footer nav ul {
    margin: 0 !important;
  }
}

/*---------- footer contact ----------*/
.footer_contact div:first-child a,
.footer_contact div {
  color: #fffa02;
}

.footer_contact div:first-child a:hover {
  text-decoration: none;
}



/*===============================
 ショッピングカート
===============================*/
.shoppingcart_header {
  text-align: center;
  margin: 0 auto;
}

.shoppingcart_souryou span {
  color: red;
  font-weight: bold;
  background: #f9f7f2;
  padding: 15px;
}

.shoppingcart_table {
  border-collapse: collapse;
  margin: 0 auto 20px;
  line-height: 1.5;
  width: 100%;
}

.shoppingcart_table th,
.shoppingcart_table td {
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 8px;
}

.shoppingcart_table th {
  background: #daf1f6;
  color: #36b7d6;
}

.shoppingcart_table td {
  text-align: center;
}

.shoppingcart_table2 {
  border-collapse: collapse;
  margin: 0 auto 20px;
  line-height: 1.5;
  width: 100%;
}

.shoppingcart_table2 th,
.shoppingcart_table2 td {
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 8px;
  max-width: 100%;
}

.shoppingcart_table2 th {
  background: #daf1f6;
  color: #36b7d6;
}

.shoppingcart_table2 td {
  text-align: center;
}

.shoppingcart_table3 {
  border-collapse: collapse;
  margin: 0 auto 20px;
  line-height: 1.5;
  width: 100%;
}

.shoppingcart_table3 th,
.shoppingcart_table3 td {
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 8px;
  max-width: 100%;
}

.shoppingcart_table3 th {
  background: #fbefde;
  color: #f59301;
}

.shoppingcart_table select,
.shoppingcart_table2 select,
.shoppingcart_table3 select {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shoppingcart_table textarea,
.shoppingcart_table2 textarea,
.shoppingcart_table3 textarea {
  box-sizing: border-box;
  width: 100%;
}

@media screen and (max-width:640px) {
  .shoppingcart_table2 th,
  .shoppingcart_table2 td,
  .shoppingcart_table3 th,
  .shoppingcart_table3 td {
    display: block;
  }
  .shoppingcart_table3 th {
    border-bottom: none;
  }
  .shoppingcart_table select,
  .shoppingcart_table2 select,
  .shoppingcart_table3 select {
    width: 100%;
  }
}