@charset "UTF-8";

/* 開発環境用 */
#header.pane-header, .pane-footer {
  display: none;
}
h2::after {
  display: none;
}


/* ---------------------------------------
	Reset
--------------------------------------- */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
  border: 0;
}
body {
  color: #000000;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
  font-size: 18px;
  line-height: 2.0em;
}
img {
  width: 100%;
}
a {
  text-decoration: none;
}


.pcOnly {
  display: block !important;
}
.spOnly {
  display: none !important;
}
@media screen and (max-width:768px) {
  .pcOnly {
    display: none !important;
  }
  .spOnly {
    display: block !important;
  }
}


.slick-prev,
.slick-next {
  color: rgba(0, 0, 0, 0);
  width: 64px;
  height: 100%;
  border: none;
  background: transparent;
  position: absolute;
  cursor: pointer;
  transition: 1s;
  z-index: 8000;
}
.slick-prev {
  top: 0;
  left: 0;
}
.slick-next {
  top: 0;
  right: 0;
}
.slick-prev::before,
.slick-prev::after,
.slick-next::before,
.slick-next::after {
  transition: 1s;
}
.slick-disabled,
.slick-disabled::before,
.slick-disabled::after {
  display: none !important;
}

#chicken_broth {
  color: #000000;
  background: #ffffff;
  margin: 0 0 64px;
}
#chicken_broth .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#chicken_broth .linkBtn {
  width: 560px;
  margin: 0 auto;
}
#chicken_broth .linkBtn a {
  font-family: serif;
  color: #ffffff;
  font-size: 24px;
  line-height: 72px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  height: 72px;
  position: relative;
  display: inline-block;
  background: #cc9900;
  border-radius: 36px;
}
#chicken_broth .linkBtn a::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 0;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  top: 27px;
  right: 32px;
}
@media screen and (max-width:768px) {
  #chicken_broth .linkBtn {
    width: 90%;
  }
  #chicken_broth .linkBtn a {
    font-size: 20px;
  }
}


/* メニューリンク */
#headerNav {
  width: 100%;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9700;
}
#headerNav #lpCartBtn {
  position: fixed;
  top: 18px;
  right: 160px;
  z-index: 9800;
}
#headerNav #lpCartBtn a {
  color: #ffffff;
  font-size: 18px;
  line-height: 32px;
  font-weight: bold;
  font-family: serif;
  background: #5b4a2f;
  padding: 0 16px;
  border-radius: 4px;
  display: inline-block;
}
#headerNav #lpNav.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(233, 216, 155, 0.95);
  transition: right 0.75s ease;
  padding: 32px 48px;
  z-index: 9400;
}
#headerNav #lpNav.menu.open {
  right: 0;
}
#headerNav #lpMenuBtn {
  width: 110px;
  height: 32px;
  border: 1px #5b4a2f solid;
  border-radius: 4px;
  background: #fbf7ee;
  position: fixed;
  top: 18px;
  right: 40px;
  cursor: pointer;
}
#headerNav #lpMenuBtn p {
  color: #5b4a2f;
  font-size: 18px;
  line-height: 32px;
  font-weight: bold;
  font-family: serif;
  padding: 0 8px;
  display: inline-block;
}
#headerNav #lpNav .menuBtn {
  position: fixed;
  top: 20px;
  right: 50px;
  width: 30px;
}
#lpNav .menuBtn span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #5b4a2f;
  margin: 5px 0;
  transition: 0.4s;
}
#headerNav #lpNav #lpMenuBtn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#headerNav #lpNav #lpMenuBtn.active span:nth-child(2) {
  opacity: 0;
}
#headerNav #lpNav #lpMenuBtn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}
#headerNav #lpNav .menuList {
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
  padding: 48px 0;
}
#headerNav #lpNav .menuList li {
  margin: 0 0 16px;
  border-bottom: 1px #5b4a2f solid;
}
#headerNav #lpNav .menuList li a {
  font-size: 18px;
  line-height: 2em;
  font-weight: bold;
  width: 100%;
  position: relative;
  display: inline-block;
}
#headerNav #lpNav .menuList li a:link,
#headerNav #lpNav .menuList li a:visited,
#headerNav #lpNav .menuList li a:hover,
#headerNav #lpNav .menuList li a:active {
  color: #5b4a2f;
}
#headerNav #lpNav .menuList li a::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0;
  border-top: solid 2px #5b4a2f;
  border-right: solid 2px #5b4a2f;
  transform: rotate(45deg);
  position: absolute;
  top: 12px;
  right: 8px;
}
@media screen and (max-width:768px) {
  #headerNav #lpMenuBtn {
    top: 8px;
    right: 16px;
    z-index: 9500;
  }
  #headerNav #lpNav::before {
    content: '';
    width: 100%;
    height: 48px;
    background: #fbf7ee;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    border-bottom: 1px #ECE5D5 solid;
  }
  #headerNav #lpMenuBtn .menuBtn {
    top: 10px;
    right: 27px;
  }
  #headerNav #lpNavLogo {
    width: 50%;
    height: 40px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
  }
}


/* MV */
#lpHeader {
  width: 100%;
  height: 680px;
  background: url('/sb/img/pages/chicken_broth/202604/mv_bg_pc.jpg') no-repeat top left;
  background-size: 100%;
  position: relative;
  margin: 0 0 100px;
  z-index: 1;
}
#lpHeader .sbLogo {
  width: 180px;
  position: absolute;
  top: 8px;
  left: 32px;
}
#lpHeader .lpHeaderInner {
  max-width: 1200px;
  height: 680px;
  margin: 0 auto;
  position: relative;
}
#lpHeader .lpHeaderInner .title {
  width: 200px;
  position: absolute;
  right: 16px;
  bottom: 40px;
}
#lpHeader .lpHeaderInner .text {
  width: 300px;
  position: absolute;
  right: 250px;
  bottom: 40px;
}
#lpHeader .lpHeaderInner .fpa {
  width: 150px;
  position: absolute;
  bottom: -40px;
  left: 16px;
}
#lpHeader .lpHeaderInner .notice {
  width: 280px;
  position: absolute;
  bottom: -40px;
  left: 200px;
}
#lpHeader .lpHeaderInner .notice p {
  color: #333333;
  font-size: 11px;
  line-height: 2em;
  text-align: center;
}
@media screen and (max-width:768px) {
  #lpHeader {
    height: auto;
    background: none;
    margin: 0 auto 48px;
    padding: 48px 0 0;
  }
}


/*  */
#chicken_broth article {
  z-index: 1;
}
#chicken_broth section {
  padding: 80px 0;
  position: relative;
}
#chicken_broth section .sectionInner {
  width: 1200px;
  margin: 0 auto;
}
#chicken_broth section h2 {
  width: 680px;
  margin: 0 auto 40px;
}
@media screen and (max-width:768px) {
  #chicken_broth section {
    padding: 48px 0;
  }
  #chicken_broth section .sectionInner {
    width: 100%;
  }
  #chicken_broth section h2 {
    width: 96%;
    margin: 0 auto 32px;
  }
}


/* 差し込み画像 */
#chicken_broth .wideImg {
  width: 100%;
  padding: 0;
}


/* こだわり */
#specially {
  background: #e9d89b;
}
#specially .specially-slide {
  width: 100%;
  padding: 0;
  background: #ffffff;
}
#specially .specially-slide .slick-item {
  width: 100%;
  padding: 32px 64px;
}
#specially .specially-slide .slick-prev::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 35px);
  left: -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #cc9900;
}
#specially .specially-slide .slick-prev::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 20px);
  left: -34px;
  width: 0px;
  height: 0px;
  border: 20px solid transparent;
  border-right: 20px solid #fff;
}
#specially .specially-slide .slick-next::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 35px);
  right: -34px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #cc9900;
}
#specially .specially-slide .slick-next::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 20px);
  right: -34px;
  width: 0px;
  height: 0px;;
  border: 20px solid transparent;
  border-left: 20px solid #fff;
}
#specially .specially-slide h3 {
  width: 270px;
  margin: 0 auto;
}
#specially .specially-slide figure {
  width: 500px;
  margin: 0 auto 32px;
}
#specially .specially-slide p {
  font-size: 18px;
  line-height: 2em;
  width: 100%;
}
@media screen and (max-width:768px) {
  #specially .speciallyInner {
    background: #ffffff;
    margin: 16px 4% 0;
    padding: 24px 4%;
  }
  #specially .speciallyInner h3 {
    width: 80%;
    margin: 0 auto 24px;
  }
  #specially .speciallyInner figure {
    width: 100%;
    margin: 0 auto 24px;
  }
  #specially .speciallyInner p {
    font-size: 14px;
    line-height: 2em;
  }
}


/* 基本の使い方 */
#basic {
}
#basic p {
  font-size: 15px;
  line-height: 1.5em;
}
#basic .nfl {
  width: 52%;
  height: 490px;
  position: relative;
}
#basic .nfl figure {
  width: 70%;
  position: absolute;
  top: 0;
  left: 0;
}
#basic .nfl figcaption {
  width: 45%;
  position: absolute;
  top: 0;
  right: 0;
}
#basic .nfl figcaption h3 {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.5em;
  font-weight: bold;
  text-align: center;
  background: #cc9900;
  padding: 4px;
}
#basic .nfl p {
  position: absolute;
  bottom: 0;
  left: 0;
}
#basic .nfl dl {
  text-align: left;
  padding: 8px 16px;
  border: 1px #cc9900 solid;
}
#basic .nfl dl dt {
  width: 50%;
}
#basic .nfl dl dd {
  width: 50%;
}
#basic .dilute {
  width: 42%;
}
#basic .dilute dl {
  font-size: 17px;
  line-height: 2em;
  text-align: center;
}
#basic .dilute dl dt {
  text-align: center;
  width: 50%;
  padding: 4px 0 0;
  border-bottom: 1px #cc9900 solid;
}
#basic .dilute dl dt.title {
  color: #ffffff;
  font-weight: bold;
  background: #cc9900;
  padding: 0;
  border-right: 1px #fff solid;
}
#basic .dilute dl dt.title:nth-of-type(even) {
  border-right: none;
}
#basic .dilute dl dt.title span {
  font-size: 14px;
}
#basic .dilute dl dd {
  width: 50%;
  padding: 4px 0 0;
  border-bottom: 1px #cc9900 solid;
}
#basic .dilute p {
  margin: 16px 0 0;
}
@media screen and (max-width:768px) {
  #basic .sectionInner {
    padding: 0 4%;
  }
  #basic .nfl {
    width: 100%;
    height: auto;
    order: 2;
  }
  #basic .nfl figure {
    width: 70%;
    margin: 0 auto;
    padding: 24px 0;
    position: relative;
  }
  #basic .nfl figcaption {
    font-size: 16px;
    line-height: 2em;
    width: 100%;
    position: relative;
  }
  #basic .nfl p {
    font-size: 14px;
    line-height: 2em;
    margin: 16px 0 0;
    position: relative;
  }
  #basic .dilute {
    width: 100%;
    order: 1;
  }
  #basic .dilute dl {
    font-size: 16px;
    line-height: 1.5em;
  }
  #basic .dilute dl dt,
  #basic .dilute dl dd {
    padding: 8px 0 4px;
  }
  #basic .dilute dl dt.title {
    padding: 8px 0;
  }
}


/* レシピ */
#recipe {
  width: 100%;
}
#recipe .slick-item a {
  color: #ffffff;
  position: relative;
  padding: 4px;
  display: block;
}
#recipe .slick-item a p {
  position: absolute;
  left: 4px;
  bottom: 4px;
  color: #ffffff;
  font-size: 20px;
  line-height: 28px;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 8px);
  height: 76px;
  padding: 8px 16px;
  overflow: hidden;
}
#recipe .text {
  font-size: 24px;
  line-height: 1.5em;
  font-weight: bold;
  font-family: serif;
  text-align: center;
  margin: 40px 0;
}
@media screen and (max-width:768px) {
  #recipe .slick-item a p {
    font-size: 15px;
    line-height: 18px;
    height: 50px;
    padding: 8px 12px;
  }
  #recipe .text {
    font-size: 20px;
    line-height: 1.5em;
  }
}


#recipe .recipe-slide {
  overflow: hidden;
}
#recipe .recipe-slide .slick-item ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
#recipe .recipe-slide .slick-item ul li {
  width: calc(100% / 2);
}
#recipe .recipe-slide .slick-next::before,
#recipe .recipe-slide .slick-next::after {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  left: 0;
  width: 40px;
  height: 4px;
  border-radius: 8px;
  background-color: #ffffff;
  transform-origin: calc(100% - 1.5px) 50%;
}
#recipe .recipe-slide .slick-prev::before,
#recipe .recipe-slide .slick-prev::after {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  right: 0;
  width: 40px;
  height: 4px;
  border-radius: 8px;
  background-color: #ffffff;
  transform-origin: 1.5px 50%;
}
#recipe .recipe-slide .slick-prev::before,
#recipe .recipe-slide .slick-next::before {
  transform: rotate(60deg);
}
#recipe .recipe-slide .slick-prev::after,
#recipe .recipe-slide .slick-next::after {
  transform: rotate(-60deg);
}
#recipe .recipe-slide .slick-dots {
  background: #ffffff;
  width: 800px;
  height: 10px;
  margin: 16px auto 0;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
}
#recipe .recipe-slide .slick-dots li {
  width: 100%;
  height: 10px;
  background: #beb4a7;
  border: 3px #ffffff solid;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 1s;
}
#recipe .recipe-slide .slick-dots li.slick-active {
  background: #403930;
}
#recipe .recipe-slide .slick-dots button {
  height: 8px;
  border: none;
  position: absolute;
  top: -50px;
  left: 0;
}
@media screen and (max-width:768px) {
  #recipe .recipe-slide .slick-prev,
  #recipe .recipe-slide .slick-next {
    width: 40px;
  }
  #recipe .recipe-slide .slick-next::before,
  #recipe .recipe-slide .slick-next::after,
  #recipe .recipe-slide .slick-prev::before,
  #recipe .recipe-slide .slick-prev::after {
    background-color: #000000;
    width: 30px;
    height: 3px;
  }
  #recipe .recipe-slide .slick-dots {
    width: 85%;
  }
}


/* 読みもの */
#reading .readingList {
  width: 850px;
  margin: 0 auto;
}
#reading .readingList li {
  padding: 0 0 24px;
}
@media screen and (max-width:768px) {
  #reading .readingList {
    width: 92%;
  }
}


/* 商品情報 */
#detail {
  padding: 64px 0;
}
#detail .text {
  font-size: 17px;
  line-height: 2em;
  width: 54%;
  margin: 0 0 48px;
}
#detail .text h3 {
  font-size: 26px;
  line-height: 1.5em;
  font-weight: bold;
  font-family: serif;
  margin: 0 0 16px;
}
#detail .text dl {
  margin: 0 0 16px;
}
#detail .text dl dt {
  width: 15%;
}
#detail .text dl dd {
  width: 85%;
  position: relative;
}
#detail .text dl dd::before {
  content: '：';
  display: block;
  position: absolute;
  left: -1.25em;
}
#detail .text dl dt.allergy {
  width: 28%;
}
#detail .text dl dd.allergy {
  width: 72%;
}
#detail .text p {
  font-size: 15px;
  line-height: 2em;
}
#detail .image {
  width: 40%;
}
@media screen and (max-width:768px) {
  #detail .sectionInner {
    padding: 0 4%;
  }
  #detail .image {
    width: 70%;
    margin: 0 auto;
    order: 1;
  }
  #detail .text {
    font-size: 16px;
    line-height: 1.5em;
    width: 100%;
    order: 2;
  }
  #detail .text p {
    font-size: 14px;
    line-height: 1.5em;
  }
  #detail .text h3 {
    font-size: 22px;
    line-height: 1.5em;
    text-align: center;
    margin: 24px auto;
  }
  #detail .text dl dt {
    width: 27%;
    padding: 4px 0;
  }
  #detail .text dl dd {
    width: 73%;
    padding: 4px 0;
  }
  #detail .text dl dt.allergy {
    width: 50%;
  }
  #detail .text dl dd.allergy {
    width: 50%;
  }
}


/* Q&A */
#qa {
  background: #fbf7ee;
  padding: 64px 0;
}
#qa #qaList {
  max-width: 1100px;
  margin: 0 auto;
}
#qa #qaList dt {
  font-size: 20px;
  line-height: 1.5em;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  margin: 16px 0 0;
  padding: 16px 32px;
  background: #ddc98c;
  transition: 0.5s ease;
}
#qa #qaList dt span {
  font-size: 30px;
  line-height: 1.5em;
  font-weight: bold;
  font-family: serif;
  padding: 0 8px 0 0;
  display: inline-block;
}
#qa #qaList dt::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 3px;
  background: #ffffff;
  transform: translateY(-50%);
}
#qa #qaList dt::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 3px;
  background: #ffffff;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
#qa #qaList dt.is-open::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
#qa #qaList dt.is-open {
  color: #ffffff;
  background: #cc9900;
}
#qa #qaList dd {
  font-size: 18px;
  line-height: 1.5em;
  background: #ffffff;
  padding: 32px 48px;
}
@media screen and (max-width:768px) {
  #qa .sectionInner {
    width: 100%;
    padding: 0 4%;
  }
  #qa #qaList dt {
    font-size: 16px;
    line-height: 1.5em;
    font-weight: bold;
    padding: 8px 48px 16px 4%;
  }
  #qa #qaList dt span {
    font-size: 22px;
    line-height: 1.5em;
    font-weight: bold;
    font-family: serif;
    padding: 0 8px 0 0;
    display: inline-block;
  }
  #qa #qaList dd {
    font-size: 14px;
    line-height: 1.5em;
    padding: 24px 6%;
  }
}


/* 関連商品 */
#lineup {
  width: 100%;
}
#lineup .lineupList {
  width: 850px;
  margin: 0 auto;
}
#lineup .lineupList li {
  padding: 0 0 24px;
}
@media screen and (max-width:768px) {
  #lineup .sectionInner {
    width: 100%;
    padding: 0 4%;
  }
  #lineup .lineupList {
    width: 100%;
  }
}