@charset "UTF-8";
/* CSS Document */
/* 全体 */
html {
  font-size: 62.5%; /* 1rem=10px */
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
  color: #333333;
  scroll-behavior: smooth;
}
h1 {
  font-size: 4rem;
  text-align: center;
}
h2 {
  font-size: 3.2rem;
  line-height: 4.8rem;
}
ul {
  list-style: disc inside;
  color: #CCBEA3;
}
ul li span {
  color: #333333;
}
a {
  color: #CCBEA3;
  text-decoration: underline;
}
p {
  font-size: 1.8rem;
  line-height: 3.2rem;
}
/* PCでのみ表示させる要素 */
.pc-only {
  display: block;
}
/* スマホでのみ表示させる要素 */
.sp-only {
  display: none;
}
/* ポップアップ時の背景 */
.black {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #333333;
  opacity: 0.6;
  z-index: 100;
}
.black.click1 {
  display: block;
}
.black.click2 {
  display: block;
}
/* 全体 スマホ版 */
@media(max-width:768px) {
  h1 {
    font-size: 3.2rem;
  }
  p {
    font-size: 1.6rem;
    line-height: 3rem;
  }
  /* PCでのみ表示させる要素 */
  .pc-only {
    display: none;
  }
  /* スマホでのみ表示させる要素 */
  .sp-only {
    display: block;
  }
}
/* 無料サンプルお申し込み */
.sample {
  position: fixed;
  width: 32rem;
  height: 11rem;
  bottom: 4rem;
  left: 3rem;
  background-image: url("img/sample.svg");
  background-size: cover;
  filter: drop-shadow(1rem 1rem 2rem #333333);
  z-index: 1000;
}
.sample:hover {
  background-image: url("img/sample-hover.svg");
}
/* 無料サンプルお申し込み スマホ版 */
@media(max-width:768px) {
  .sample {
    position: fixed;
    bottom: 2rem;
    left: calc(50vw - 16rem);
  }
}
/* fv */
.fv {
  text-align: center;
  color: #ffffff;
  width: 100vw;
  height: 100vh;
  background-image: url("img/fv.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.main-copy {
  font-size: 8rem;
  font-weight: 300;
  line-height: 10rem;
  padding-top: 4rem;
  filter: drop-shadow(0rem 0rem 1rem #333333);
}
.sub-copy {
  font-size: 2.4rem;
  line-height: 3.6rem;
  margin-top: 4rem;
  filter: drop-shadow(0rem 0rem 1rem #333333);
}
.fv img {
  width: 45rem;
  margin-top: 3rem;
}
/* fv スマホ版 */
@media(max-width:768px) {
  .fv {
    text-align: left;
    padding: 0 2rem;
    background-image: url("img/fv-sp.jpg");
  }
  .main-copy {
    font-size: 4.2rem;
    line-height: 5.6rem;
  }
  .sub-copy {
    font-size: 1.8rem;
    line-height: 3rem;
    margin-top: 2rem;
  }
  .fv img {
    width: 100%;
    margin-top: 2rem;
  }
}
/* サラのこだわり */
.kodawari {
  width: 100vw;
  padding: 12rem 0 16rem 0;
}
.kodawari-box {
  display: flex;
  width: calc(100% - 6rem);
  margin-top: 10rem;
}
.kodawari-p {
  width: calc(50% - 8rem);
}
.kodawari-point {
  color: #CCBEA3;
  font-size: 1.8rem;
}
.kodawari-number {
  font-size: 4rem;
}
.kodawari-p p {
  margin-top: 4rem;
}
.kodawari-box img {
  width: 50%;
}
.kodawari-left {
  margin-left: 6rem;
}
.kodawari-p-left {
  margin-right: 8rem;
}
.kodawari-p-right {
  margin-left: 8rem;
}
.kodawari-button {
  width: 36rem;
  height: 8rem;
  margin-top: 4rem;
  background-image: url("img/kodawari-button.svg");
  background-size: cover;
  transition: 0.5s;
}
.kodawari-button:hover {
  background-image: url("img/kodawari-button-hover.svg");
}
/* サラのこだわり */
@media(max-width:768px) {
  .kodawari {
    min-width: 34rem;
    padding: 8rem 0;
  }
  .kodawari-box-sp {
    margin-top: 6rem;
  }
  .kodawari-p-sp {
    width: calc(100% - 4rem);
    margin-left: 2rem;
  }
  .kodawari-p-sp h2 span {
    color: #CCBEA3;
    font-size: 2.4rem;
  }
  .kodawari-p-sp p {
    margin-top: 6rem;
  }
  .kodawari-box-sp img {
    width: 100%;
    margin-top: 4rem;
  }
  .kodawari-button-sp {
    width: 32rem;
    height: 7.1rem;
    margin: 4rem auto 0 auto;
    background-image: url("img/kodawari-button.svg");
    background-size: cover;
  }
}
/* サラの工場の衛生への取り組み */
.eisei {
  text-align: center;
  width: 100vw;
  padding: 10rem 16rem;
  background-image: url("img/eisei-bg.jpg");
}
.eisei-container {
  width: 100%;
  padding: 8rem 0;
  background-color: #ffffff;
}
.eisei-lead {
  text-align: center;
  margin-top: 3rem;
}
.eisei img {
  width: 40rem;
  margin-top: 4rem;
}
.eisei-container ul {
  text-align: left;
  font-size: 1.8rem;
  width: 64rem;
  margin: 4rem auto 0 auto;
}
.eisei-container ul li {
  margin-bottom: 2rem;
}
/* サラの工場の衛生への取り組み スマホ版 */
@media(max-width:768px) {
  .eisei {
    padding: 0;
  }
  .eisei-container {
    padding: 8rem 2rem;
  }
  .eisei-lead {
    text-align: left;
  }
  .eisei img {
    width: 100%;
    margin-top: 3rem;
  }
  .eisei-container ul {
    text-align: left;
    font-size: 1.6rem;
    line-height: 3rem;
    width: 100%;
    margin: 4rem auto 0 auto;
  }
  .eisei-container ul li {
    margin-bottom: 1rem;
  }
}
/* お客様の声 */
.okyakusama {
  color: #ffffff;
  width: 100vw;
  padding: 12rem 0;
  background-color: #333333;
}
.interview-container {
  width: calc(100% - 32rem);
  max-width: 96rem;
  margin: 10rem auto 0 auto;
  display: flex;
}
.interview-profile {
  width: 34rem;
  height: 34rem;
}
.interview-left {
  margin-right: 6rem;
}
.interview-right {
  margin-left: 6rem;
}
.interview-box h2 span {
  color: #CCBEA3;
  font-size: 2rem;
  line-height: 3rem;
}
.interview-box p {
  margin-top: 3rem;
}
/* ×ボタン */
.close1 {
  position: absolute;
  width: 6rem;
  height: 6rem;
  margin: -2rem 0 0 calc(100% - 4rem);
  background-image: url("img/close.svg");
  background-size: cover;
}
.close1:hover {
  background-image: url("img/close-hover.svg");
}
/* インタビュー本文 */
.bg {
  position: fixed;
  color: #333333;
  width: calc(100vw - 32rem);
  height: calc(100vh - 12rem);
  top: 6rem;
  left: 16rem;
  background-color: #ffffff;
  z-index: 200;
}
.contents {
  width: calc(100% - 18rem);
  height: calc(100% - 12rem);
  margin: 6rem 9rem;
  overflow: scroll;
}
.title {
  font-size: 3.2rem;
  line-height: 4.8rem;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 0.1rem solid #B3B3B3;
}
.title span {
  color: #CCBEA3;
  font-size: 2rem;
}
.headline {
  font-size: 2.4rem;
  line-height: 3.6rem;
  margin-bottom: 3rem;
}
.image {
  width: 100%;
  margin-bottom: 4rem;
}
.image img {
  width: 100%;
}
.bg p {
  margin-bottom: 6rem;
}
/* インタビュー1人目 */
#interview1 {
  width: 36rem;
  height: 8rem;
  margin-top: 3rem;
  background-image: url("img/interview.svg");
  background-size: cover;
  transition: 0.5s;
}
#interview1:hover {
  background-image: url("img/interview-hover.svg");
}
#interview1-contents {
  display: none;
}
#interview1-contents.click1 {
  display: block;
}
/* インタビュー2人目 */
#interview2 {
  width: 36rem;
  height: 8rem;
  margin-top: 3rem;
  background-image: url("img/interview.svg");
  background-size: cover;
  transition: 0.5s;
}
#interview2:hover {
  background-image: url("img/interview-hover.svg");
}
#interview2-contents {
  display: none;
}
#interview2-contents.click1 {
  display: block;
}
.interview-line {
  width: calc(100% - 32rem);
  max-width: 96rem;
  border-bottom: 0.1rem solid #B3B3B3;
  margin: 8rem auto;
}
/* そのほかこのようなシーンにも */
.scene {
  width: calc(100% - 32rem);
  max-width: 96rem;
  margin: 16rem auto;
}
.scene-lead {
  text-align: center;
  font-size: 3.6rem;
  line-height: 5rem;
}
.scene-container {
  display: flex;
  width: 100%;
  margin-top: 8rem;
}
.scene-box {
  width: 50%;
  padding: 2rem 4rem;
}
.scene-left {
  border-right: 0.1rem solid #B3B3B3;
}
.scene-box img {
  display: block;
  width: 34rem;
  margin: 0 auto 2rem auto;
}
.scene-box h2 {
  line-height: 3.6rem !important;
}
.scene-box h2 span {
  color: #CCBEA3;
  font-size: 2rem;
}
.scene-box p {
  margin-top: 3rem;
}
/* お客様の声 スマホ版 */
@media(max-width:768px) {
  .okyakusama {
    padding: 8rem 2rem;
    min-width: 34rem;
  }
  .interview-container {
    width: calc(100% - 2rem);
    margin: 3rem auto 0 auto;
    display: block;
  }
  .interview-profile {
    width: 32rem;
    height: 32rem;
    margin: 0 auto 3rem auto;
  }
  .interview-left {
    margin-right: 0;
  }
  .interview-right {
    margin-left: 0;
  }
  .interview-box h2 span {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
  .interview-box p {
    margin-top: 3rem;
  }
  /* ×ボタン */
  .close1 {
    width: 5rem;
    height: 5rem;
    margin: -1rem 0 0 calc(100% - 4rem);
  }
  /* インタビュー本文 */
  .bg {
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  .contents {
    width: calc(100% - 4rem);
    height: calc(100% - 10rem);
    margin: 5rem 2rem;
  }
  .title {
    font-size: 2.4rem;
    line-height: 3.6rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
  }
  .title span {
    font-size: 1.8rem;
  }
  .headline {
    font-size: 2rem;
    line-height: 3.2rem;
    margin-bottom: 2rem;
  }
  .image {
    margin-bottom: 3rem;
  }
  .bg p {
    margin-bottom: 3rem;
  }
  /* インタビュー1人目 */
  #interview1 {
    width: 32.4rem;
    height: 7.2rem;
    margin: 3rem auto 6rem auto;
  }
  /* インタビュー2人目 */
  #interview2 {
    width: 32.4rem;
    height: 7.2rem;
    margin: 3rem auto 0 auto;
  }
  .interview-line {
    display: none;
  }
  /* そのほかこのようなシーンにも */
  .scene {
    width: calc(100% - 4rem);
    margin: 10rem 2rem 4rem 2rem;
  }
  .scene-lead {
    font-size: 3.2rem;
    line-height: 4.6rem;
  }
  .scene-container {
    display: block;
    margin-top: 3rem;
  }
  .scene-box {
    width: 100%;
    padding: 0;
    margin-bottom: 6rem;
  }
  .scene-left {
    border-right: 0.1rem solid #333333;
  }
  .scene-box img {
    width: 32rem;
  }
  .scene-box h2 {
    text-align: center;
    line-height: 3rem !important;
  }
  .scene-box h2 span {
    color: #CCBEA3;
    font-size: 2rem;
  }
  .scene-box p {
    margin-top: 3rem;
  }
}
/* 商品ラインナップ */
/* 共通 */
.shouhin {
  margin: 12rem 0 16rem 0;
}
.shouhin-lead {
  text-align: center;
  margin: 4rem 0 6rem 0;
}
.shouhin-container {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  max-width: 150rem;
}
.shouhin-box {
  display: inline-block;
  vertical-align: bottom;
  width: 34rem;
  margin: 4rem 3.5rem;
}
.shouhin-img {
  width: 34rem;
  height: 34rem;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.5s;
}
.shouhin-title {
  text-align: center;
  font-size: 3.2rem;
  margin-bottom: 3rem;
}
.case {
  text-align: center;
  font-size: 1.6rem;
}
.price {
  text-align: center;
  font-size: 2rem;
}
.price span {
  font-size: 5rem;
}
.normal-price {
  text-align: center;
  font-size: 1.6rem;
  margin: 0 0 4rem 0;
}
.shouhin-p {
  text-align: left;
  margin: 0 0 3rem 0;
}
.underline {
  text-decoration: underline;
}
.kounyuu {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 2rem auto;
  background-image: url("img/kounyuu.svg");
  transition: 0.5s;
}
.kounyuu:hover {
  background-image: url("img/kounyuu-hover.svg");
}
/* 商品画像 */
/* ホワイトフランス */
#white-img {
  background-image: url("img/white-new.png");
}
#white-img:hover {
  background-image: url("img/white-new-hover.png");
}
/* かぼちゃほうれん草 */
#kabocha-img {
  background-image: url("img/kabocha-new.png");
}
#kabocha-img:hover {
  background-image: url("img/kabocha-new-hover.png");
}
/* レザンノア */
#rezannoa-img {
  background-image: url("img/rezannoa-new.png");
}
#rezannoa-img:hover {
  background-image: url("img/rezannoa-new-hover.png");
}
/* ぎっしり白黒ごまパン */
#goma-img {
  background-image: url("img/goma-new.png");
}
#goma-img:hover {
  background-image: url("img/goma-new-hover.png");
}
/* チーズテーブルロール */
#cheese-img {
  background-image: url("img/cheese-new.png");
}
#cheese-img:hover {
  background-image: url("img/cheese-new-hover.png");
}
/* 黒糖まるパン */
#kokutou-img {
  background-image: url("img/kokutou-new.png");
}
#kokutou-img:hover {
  background-image: url("img/kokutou-new-hover.png");
}
/* はちみつパン */
#hachimitsu-img {
  background-image: url("img/hachimitsu-new.png");
}
#hachimitsu-img:hover {
  background-image: url("img/hachimitsu-new-hover.png");
}
/* クランベリーくるみの練乳パン */
#cramberry-img {
  background-image: url("img/cramberry-new.png");
}
#cramberry-img:hover {
  background-image: url("img/cramberry-new-hover.png");
}
/* クランベリーくるみの練乳パン */
#yasai-img {
  background-image: url("img/yasai-new.png");
}
#yasai-img:hover {
  background-image: url("img/yasai-new-hover.png");
}
/* 全粒粉ドッグパン */
#zenryuhun-img {
  background-image: url("img/zenryuhun-new.png");
}
#zenryuhun-img:hover {
  background-image: url("img/zenryuhun-new-hover.png");
}
/* リッチミルクロール */
#milk-img {
  background-image: url("img/milk-new.png");
}
#milk-img:hover {
  background-image: url("img/milk-new-hover.png");
}
/* 五穀まるパン */
#gokoku-img {
  background-image: url("img/gokoku-new.png");
}
#gokoku-img:hover {
  background-image: url("img/gokoku-new-hover.png");
}
/* 成分表 */
/* ×ボタン */
.close2 {
  position: absolute;
  width: 6rem;
  height: 6rem;
  margin: -2rem 0 0 calc(100% - 4rem);
  background-image: url("img/close.svg");
  background-size: cover;
}
.close2:hover {
  background-image: url("img/close-hover.svg");
}
/* 成分表の画像 */
.seibun-box {
  width: 100%;
  height: 100%;
  padding: 4rem;
}
.seibun-box img {
  object-fit: contain;
}
/* ホワイトフランス */
#white {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#white:hover {
  background-image: url("img/seibun-hover.svg");
}
#white-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#white-seibun.click2 {
  display: block;
}
/* かぼちゃ＆ほうれん草 */
#kabocha {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#kabocha:hover {
  background-image: url("img/seibun-hover.svg");
}
#kabocha-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#kabocha-seibun.click2 {
  display: block;
}
/* レザンノア */
#rezannoa {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#rezannoa:hover {
  background-image: url("img/seibun-hover.svg");
}
#rezannoa-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#rezannoa-seibun.click2 {
  display: block;
}
/* ぎっしり白黒ごまパン */
#goma {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#goma:hover {
  background-image: url("img/seibun-hover.svg");
}
#goma-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#goma-seibun.click2 {
  display: block;
}
/* チーズテーブルロール */
#cheese {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#cheese:hover {
  background-image: url("img/seibun-hover.svg");
}
#cheese-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#cheese-seibun.click2 {
  display: block;
}
/* 黒糖まるパン */
#kokutou {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#kokutou:hover {
  background-image: url("img/seibun-hover.svg");
}
#kokutou-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#kokutou-seibun.click2 {
  display: block;
}
/* はちみつパン */
#hachimitsu {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#hachimitsu:hover {
  background-image: url("img/seibun-hover.svg");
}
#hachimitsu-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#hachimitsu-seibun.click2 {
  display: block;
}
/* クランベリーくるみの練乳パン */
#cramberry {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#cramberry:hover {
  background-image: url("img/seibun-hover.svg");
}
#cramberry-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#cramberry-seibun.click2 {
  display: block;
}
/* 野菜スティック */
#yasai {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#yasai:hover {
  background-image: url("img/seibun-hover.svg");
}
#yasai-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#yasai-seibun.click2 {
  display: block;
}
/* 全粒粉ドッグパン */
#zenryuhun {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#zenryuhun:hover {
  background-image: url("img/seibun-hover.svg");
}
#zenryuhun-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#zenryuhun-seibun.click2 {
  display: block;
}
/* リッチミルクロール */
#milk {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#milk:hover {
  background-image: url("img/seibun-hover.svg");
}
#milk-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#milk-seibun.click2 {
  display: block;
}
/* 五穀まるパン */
#gokoku {
  width: 34rem;
  height: 7rem;
  margin: 0 auto 0 auto;
  background-image: url("img/seibun.svg");
  transition: 0.5s;
}
#gokoku:hover {
  background-image: url("img/seibun-hover.svg");
}
#gokoku-seibun {
  display: none;
  position: fixed;
  width: 48rem;
  height: 68rem;
  top: calc(50vh - 34rem);
  left: calc(50vw - 24rem);
  background-color: #ffffff;
  z-index: 200;
}
#gokoku-seibun.click2 {
  display: block;
}
/* 商品ラインナップ スマホ版 */
@media(max-width:768px) {
  /* 共通 */
  .shouhin {
    margin: 8rem auto;
    width: calc(100vw - 4rem);
  }
  .shouhin-container {
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }
  .shouhin-box {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 2rem auto;
  }
  .shouhin-title {
    font-size: 2.4rem;
  }
  .price {
    font-size: 1.6rem;
  }
  .price span {
    font-size: 4rem;
  }
  .normal-price {
    font-size: 1.6rem;
    margin: 0 0 3rem 0;
  }
  .shouhin-p {
    text-align: left;
    margin: 0 0 2rem 0;
  }
  .kounyuu {
    width: 32rem;
    height: 8rem;
    margin: 0 auto 1.6rem auto;
    background-image: url("img/kounyuu-sp.svg");
  }
  .kounyuu:hover {
    background-image: url("img/kounyuu-sp.svg");
  }
  /* 成分表 */
  /* ×ボタン */
  .close2 {
    width: 5rem;
    height: 5rem;
    margin: -1rem 0 0 calc(100% - 4rem);
  }
  /* 成分表の画像 */
  .seibun-box {
    width: 100%;
    height: 100%;
    padding: 4rem 2rem;
  }
  .seibun-box img {
    object-fit: contain;
  }
  /* ホワイトフランス */
  #white {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #white:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #white-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* かぼちゃ&ほうれん草 */
  #kabocha {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #kabocha:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #kabocha-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* レザンノア */
  #rezannoa {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #rezannoa:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #rezannoa-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* ぎっしり白黒ごまパン */
  #goma {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #goma:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #goma-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* チーズテーブルロール */
  #cheese {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #cheese:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #cheese-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* 黒糖まるパン */
  #kokutou {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #kokutou:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #kokutou-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* はちみつパン */
  #hachimitsu {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #hachimitsu:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #hachimitsu-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* クランベリーくるみの練乳パン */
  #cramberry {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #cramberry:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #cramberry-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* 野菜スティック */
  #yasai {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #yasai:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #yasai-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* 全粒粉ドッグパン */
  #zenryuhun {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #zenryuhun:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #zenryuhun-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* リッチミルクロール */
  #milk {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #milk:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #milk-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
  /* 五穀まるパン */
  #gokoku {
    width: 32rem;
    height: 8rem;
    background-image: url("img/seibun-sp.svg");
  }
  #gokoku:hover {
    background-image: url("img/seibun-sp.svg");
  }
  #gokoku-seibun {
    display: none;
    position: fixed;
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    top: 2rem;
    left: 2rem;
  }
}
/* 商品ラインナップ リード文　タブレット版 */
/* リード文のみ表示崩れるのでタブレット版を用意 */
@media(max-width:500px) {
  .shouhin-lead {
    text-align: left;
    width: 100%;
    max-width: 49rem;
    margin: 3rem auto;
  }
}
/* サラのおはなし */
.ohanashi {
  width: 100vw;
  padding: 12rem 0 16rem 0;
  background-color: #F7F5F0;
}
.ohanashi-lead {
  text-align: center;
  margin-top: 4rem;
}
.ohanashi-box-1 {
  display: flex;
  width: calc(100% - 12rem);
  margin: 6rem 8rem 0 6rem;
}
.ohanashi-box-1 img {
  width: 48rem;
  margin-right: 8rem;
}
.ohanashi-box-1 p {
  margin-top: 4rem;
}
.ohanashi-box-2 {
  display: flex;
  align-items: end;
  width: calc(100% - 16rem);
  margin: -6rem 0 0 16rem;
}
.ohanashi-box-2 p {
  width: calc(100% - 16rem);
  margin-right: 8rem;
}
.ohanashi-box-2 img {
  width: 48rem;
}
/* サラのおはなし スマホ版 */
@media(max-width:500px) {
  .ohanashi {
    padding: 8rem 2rem;
    background-color: #F7F5F0;
  }
  .ohanashi-lead {
    text-align: left;
    margin-top: 3rem;
  }
  .ohanashi-box-sp {
    margin-top: 6rem;
  }
  .ohanashi-box-sp h2 {
    margin-top: 3rem;
  }
  .ohanashi-box-sp p {
    margin-top: 3rem;
  }
}
/* よくあるご質問 */
/* 共通 */
.shitsumon {
  width: calc(100vw - 32rem);
  max-width: 96rem;
  margin: 12rem auto 16rem auto;
}
.drawer-container {
  width: 100%;
  margin-top: 9rem;
}
.drawer {
  width: 100%;
  margin-top: 2rem;
  border-bottom: 1px solid #B3B3B3;
}
.drawer-head {
  font-size: 5rem;
  vertical-align: top;
  color: #CCBEA3;
}
.question-p {
  vertical-align: top;
  width: calc(100% - 11rem);
  margin: 1rem 0 0 2rem;
}
.answer-p {
  vertical-align: top;
  width: calc(100% - 7rem);
  margin: 1rem 0 0 2rem;
}
/* 質問1 */
#question-1 {
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
}
#answer-1 {
  display: none;
  width: 100%;
  margin-bottom: 3rem;
}
#drawer-button-1 {
  width: 2rem;
  height: 2rem;
  margin: 3rem 0 0 2rem;
  background-image: url("img/plus.svg");
  background-repeat: no-repeat;
}
/* 質問2 */
#question-2 {
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
}
#answer-2 {
  display: none;
  width: 100%;
  margin-bottom: 3rem;
}
#drawer-button-2 {
  width: 2rem;
  height: 2rem;
  margin: 3rem 0 0 2rem;
  background-image: url("img/plus.svg");
  background-repeat: no-repeat;
}
/* 質問3 */
#question-3 {
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
}
#answer-3 {
  display: none;
  width: 100%;
  margin-bottom: 3rem;
}
#drawer-button-3 {
  width: 2rem;
  height: 2rem;
  margin: 3rem 0 0 2rem;
  background-image: url("img/plus.svg");
  background-repeat: no-repeat;
}
/* クリックされた後の挙動 */
/* 質問１ */
#answer-1.open {
  display: flex !important;
}
#drawer-button-1.open {
  margin: 3rem 0 0 2rem;
  background-image: url("img/minus.svg");
}
/* 質問2 */
#answer-2.open {
  display: flex !important;
}
#drawer-button-2.open {
  margin: 3rem 0 0 2rem;
  background-image: url("img/minus.svg");
}
/* 質問3 */
#answer-3.open {
  display: flex !important;
}
#drawer-button-3.open {
  margin: 3rem 0 0 2rem;
  background-image: url("img/minus.svg");
}
/* よくあるご質問 スマホ版 */
@media(max-width:768px) {
  /* 共通 */
  .shitsumon {
    width: calc(100vw - 4rem);
    margin: 8rem auto 10rem auto;
  }
  .drawer-container {
    margin-top: 4rem;
  }
  .drawer {
    width: 100%;
    margin-top: 1rem;
  }
  .drawer-head {
    font-size: 4rem;
  }
  .question-p {
    width: calc(100% - 9rem);
    margin: 1rem 0 0 1rem;
  }
  .answer-p {
    width: calc(100% - 5rem);
    margin: 1rem 0 0 1rem;
  }
  /* 質問1 */
  #question-1 {
    margin-bottom: 2rem;
  }
  #answer-1 {
    margin-bottom: 2rem;
  }
  #drawer-button-1 {
    margin: 2rem 0 0 2rem;
  }
  /* 質問2 */
  #question-2 {
    margin-bottom: 2rem;
  }
  #answer-2 {
    margin-bottom: 2rem;
  }
  #drawer-button-2 {
    margin: 2rem 0 0 2rem;
  }
  /* 質問3 */
  question-3 {
    margin-bottom: 2rem;
  }
  #answer-3 {
    margin-bottom: 2rem;
  }
  #drawer-button-3 {
    margin: 2rem 0 0 2rem;
  }
}
/* 会社概要 */
.kaisha {
  width: calc(100vw - 32rem);
  max-width: 96rem;
  margin: 0 auto 16rem auto;
}
.kaisha table {
  width: 100%;
  margin: 5rem 0 0 0;
}
.kaisha tr {
  width: 100%;
  border-bottom: 1px solid #B3B3B3;
}
.kaisha th {
  font-size: 2.4rem;
  width: 18rem;
}
.kaisha td {
  font-size: 1.8rem;
  line-height: 3.2rem;
  padding: 3rem 0;
}
/* 会社概要 スマホ版 */
@media(max-width:768px) {
  .kaisha {
    width: calc(100vw - 4rem);
    margin: 0 auto 8rem auto;
  }
  .kaisha table {
    margin: 1rem 0 0 0;
  }
  .kaisha th {
    font-size: 2rem;
    display: block;
    width: 100%;
    padding: 2rem 0 0 0;
  }
  .kaisha td {
    font-size: 1.6rem;
    line-height: 3rem;
    display: block;
    width: 100%;
    padding: 1rem 0 2rem 0;
  }
}
/* お問い合わせ */
.otoiawase {
  width: 100vw;
  padding: 12rem 16rem;
  background-image: url("img/bg-otoiawase.jpg");
  background-size: 100%;
}
.otoiawase-container {
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 8rem 18rem;
  background-color: #ffffff;
}
.otoiawase-lead {
  text-align: center;
  margin: 3rem 0 6rem 0;
}
form {
  width: 100%;
}
.koumoku {
  width: 100%;
  margin: 0 0 1rem 0;
}
.required {
  color: #ffffff;
  font-size: 1.6rem;
  padding: 0 1rem;
  margin: 0 1rem 0 0;
  background-color: #CCBEA3;
  border-radius: 1rem;
}
input {
  font-size: 1.6rem;
}
input[type="text"] {
  width: 100%;
  height: 6rem;
  margin: 0 0 4rem 0;
  padding: 0.5rem 3rem;
  background-color: #F7F5F0;
  border-radius: 3rem;
}
input[type="email"] {
  width: 100%;
  height: 6rem;
  margin: 0 0 4rem 0;
  padding: 0.5rem 3rem;
  background-color: #F7F5F0;
  border-radius: 3rem;
}
input[type="tel"] {
  width: 100%;
  height: 6rem;
  margin: 0 0 4rem 0;
  padding: 0.5rem 3rem;
  background-color: #F7F5F0;
  border-radius: 3rem;
}
.radio-box {
  display: flex;
  margin: 0 0 4rem 0;
}
.radio-box div {
  margin: 0 3rem 0 0;
}
label {
  font-size: 1.6rem;
}
input[type="radio"] {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin: 0 1rem 0 0;
  background-color: #F7F5F0;
  border-radius: 50%;
  vertical-align: -0.2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #CCBEA3;
  content: '';
}
.sub {
  font-size: 1.6rem;
}
textarea {
  font-size: 1.6rem;
  line-height: 3rem;
  width: 100%;
  margin: 0 0 4rem 0;
  padding: 0.5rem 3rem;
  background-color: #F7F5F0;
  border-radius: 3rem;
}
.privacy {
  width: 28rem;
  margin: 0 auto 2rem auto;
}
input[type="checkbox"] {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin: 0 1rem 0 0;
  background-color: #F7F5F0;
  vertical-align: -0.2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="checkbox"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  background-color: #CCBEA3;
  content: '';
}
.soushin {
  text-align: center;
}
input[type="submit"] {
  width: 36rem;
  height: 8rem;
  background-image: url("img/soushin.svg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.5s;
}
input[type="submit"]:hover {
  background-image: url("img/soushin-hover.svg");
}
/* お問い合わせ スマホ版 */
@media(max-width:768px) {
  .otoiawase {
    padding: 2rem 2rem 5rem 2rem;
  }
  .otoiawase-container {
    padding: 2rem;
  }
  .otoiawase-lead {
    text-align: left;
    margin: 3rem 0 4rem 0;
  }
  .required {
    color: #ffffff;
    font-size: 1.6rem;
    border-radius: 2rem;
  }
  input[type="text"] {
    height: 5rem;
    padding: 0.5rem 2.5rem;
    border-radius: 2.5rem;
  }
  input[type="email"] {
    height: 5rem;
    padding: 0.5rem 2.5rem;
    border-radius: 2.5rem;
  }
  input[type="tel"] {
    height: 5rem;
    padding: 0.5rem 2.5rem;
    border-radius: 2.5rem;
  }
  .radio-box {
    display: block;
  }
  .radio-box div {
    margin: 0 0 1rem 0;
  }
  input[type="radio"] {
    margin: 0 0.6rem 0 0;
  }
  .sub {
    line-height: 2.4rem;
  }
  textarea {
    padding: 0.5rem 2.5rem;
    border-radius: 2.5rem;
  }
  .privacy {
    margin: 0 auto 1rem auto;
  }
  input[type="submit"] {
    width: 30rem;
    height: 6.6rem;
  }
}
/* フッター */
footer {
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
  position: relative;
  width: 100vw;
  padding: 1.2rem 0;
  background-color: #CCBEA3;
}
.pagetop {
  position: absolute;
  width: 6rem;
  height: 6rem;
  right: 2rem;
  bottom: 1rem;
  background-image: url("img/pagetop.svg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.5s;
}
.pagetop:hover {
  background-image: url("img/pagetop-hover.svg");
}