.foodeducation {
  padding-top: calc(100 / var(--full-width) * 100vw);
}
.s .foodeducation {
  padding-top: calc(65 / var(--sp-full-width) * 100vw);
}

/**********************************
* 共通  
**********************************/
.foodeducation .c-title {
  margin-bottom: calc(30 / var(--full-width) * 100vw);
}
.s .foodeducation .c-title {
  margin-bottom: calc(35 / var(--sp-full-width) * 100vw);
}

/* section */
section {
  padding: calc(100 / var(--full-width) * 100vw) calc(170 / var(--full-width) * 100vw);
}
section:first-of-type {
  padding-top: calc(64 / var(--full-width) * 100vw);
}
.s section {
  padding: calc(100 / var(--sp-full-width) * 100vw) calc(40 / var(--sp-full-width) * 100vw)
    calc(120 / var(--sp-full-width) * 100vw);
}
.s section:first-of-type {
  padding-top: calc(110 / var(--sp-full-width) * 100vw);
}

/* ◎見出し */
section h2 {
  display: flex;
  align-items: center;
  gap: calc(20 / var(--full-width) * 100vw);
  font-size: calc(24 / var(--full-width) * 100vw);
  line-height: 1;
}
section h2::before {
  content: '';
  width: calc(32 / var(--full-width) * 100vw);
  height: calc(32 / var(--full-width) * 100vw);
  flex-shrink: 0;
  display: inline-block;
  background-image: url(../img/icon-headline.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.s section h2 {
  gap: calc(28 / var(--sp-full-width) * 100vw);
  font-size: calc(36 / var(--sp-full-width) * 100vw);
  line-height: 1.2;
}
.s section h2::before {
  width: calc(48 / var(--sp-full-width) * 100vw);
  height: calc(48 / var(--sp-full-width) * 100vw);
}

/* 小見出し */
section h3 {
  margin-block: calc(64 / var(--full-width) * 100vw) calc(25 / var(--full-width) * 100vw);
  font-size: calc(20 / var(--full-width) * 100vw);
  line-height: 1;
  padding-bottom: calc(16 / var(--full-width) * 100vw);
  border-bottom: calc(2 / var(--full-width) * 100vw) solid #f62828;
}
.s section h3 {
  margin-block: calc(70 / var(--sp-full-width) * 100vw) calc(30 / var(--sp-full-width) * 100vw);
  font-size: calc(32 / var(--sp-full-width) * 100vw);
  line-height: 1.2;
  padding-bottom: calc(16 / var(--sp-full-width) * 100vw);
  border-bottom: 2px solid #f62828;
}

h2 + h3 {
  margin-top: calc(40 / var(--full-width) * 100vw);
}
.s h2 + h3 {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
}

/* テキスト */
.section-text {
  font-size: calc(16 / var(--full-width) * 100vw);
  letter-spacing: calc(-1 / var(--full-width) * 100vw);
  line-height: 1.4;
}
.s .section-text {
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

.section-text span {
  display: block;
  margin-top: calc(5 / var(--full-width) * 100vw);
  font-size: calc(14 / var(--full-width) * 100vw);
  letter-spacing: calc(1 / var(--full-width) * 100vw);
}
.s .section-text span {
  margin-top: calc(5 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

/* コンテナ */
.common-containerHead {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: calc(10 / var(--full-width) * 100vw) 0 calc(6 / var(--full-width) * 100vw);
  font-size: calc(16 / var(--full-width) * 100vw);
  border-radius: calc(12 / var(--full-width) * 100vw) calc(12 / var(--full-width) * 100vw) 0 0;
}
.s .common-containerHead {
  padding: calc(15 / var(--sp-full-width) * 100vw) 0 calc(7 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
  border-radius: calc(12 / var(--sp-full-width) * 100vw) calc(12 / var(--sp-full-width) * 100vw) 0 0;
}

.common-containerHead span {
  font-weight: 700;
  display: block;
  background-image: linear-gradient(90deg, #f99e37 25%, #f62828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.common-containerBody {
  padding: calc(30 / var(--full-width) * 100vw) calc(20 / var(--full-width) * 100vw);
  font-size: calc(16 / var(--full-width) * 100vw);
  border-radius: 0 0 calc(12 / var(--full-width) * 100vw) calc(12 / var(--full-width) * 100vw);
  border: 1px solid #999;
  border-top: none;
  background-color: #fff;
}
.s .common-containerBody {
  padding: calc(40 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
  border-radius: 0 0 calc(12 / var(--sp-full-width) * 100vw) calc(12 / var(--sp-full-width) * 100vw);
}

/**********************************
* アンカーリンク一覧  
**********************************/
.foodeducation-ancor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(560 / var(--full-width) * 100vw);
  gap: calc(45 / var(--full-width) * 100vw) calc(25 / var(--full-width) * 100vw);
  margin: 0 auto;
}
.s .foodeducation-ancor {
  width: 100%;
  gap: calc(55 / var(--sp-full-width) * 100vw) calc(30 / var(--sp-full-width) * 100vw);
}

.foodeducation-ancor li a {
  display: block;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  font-size: calc(24 / var(--full-width) * 100vw);
  padding: calc(20 / var(--full-width) * 100vw) 0 calc(16 / var(--full-width) * 100vw);
  width: calc(170 / var(--full-width) * 100vw);
  border-radius: calc(16 / var(--full-width) * 100vw);
  border: calc(2 / var(--full-width) * 100vw) solid #999;
  position: relative;
}
.s .foodeducation-ancor li a {
  font-size: calc(28 / var(--sp-full-width) * 100vw);
  padding: calc(20 / var(--sp-full-width) * 100vw) 0;
  width: calc(202 / var(--sp-full-width) * 100vw);
  border-radius: calc(16 / var(--sp-full-width) * 100vw);
  border: calc(2 / var(--sp-full-width) * 100vw) solid #999;
}

.foodeducation-ancor li a span {
  display: block;
  position: absolute;
  bottom: -35%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(36 / var(--full-width) * 100vw);
  height: calc(36 / var(--full-width) * 100vw);
  background: url(../img/icon-ancor.png) no-repeat center / contain;
  transition: transform 0.3s ease;
}
.s .foodeducation-ancor li a span {
  width: calc(43 / var(--sp-full-width) * 100vw);
  height: calc(43 / var(--sp-full-width) * 100vw);
}
.foodeducation-ancor li a:hover span {
  transform: translate(-50%, 10%);
}

/**********************************
* BASIC  
**********************************/
/* 見出し下テキスト */
.basic-text {
  margin-top: calc(30 / var(--full-width) * 100vw);
  font-size: calc(16 / var(--full-width) * 100vw);
  text-align: center;
}
.s .basic-text {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
  letter-spacing: calc(-2.3 / var(--sp-full-width) * 100vw);
}

/* タブ */
.basic-tab {
  margin-top: calc(90 / var(--full-width) * 100vw);
  position: relative;
  display: flex;
  column-gap: calc(20 / var(--full-width) * 100vw);
}
.s .basic-tab {
  margin-top: calc(80 / var(--sp-full-width) * 100vw);
  column-gap: calc(40 / var(--sp-full-width) * 100vw);
  overflow-x: scroll;
  white-space: nowrap;
}
.basic-tab::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #999;
}

.basic-tab-item {
  position: relative;
  z-index: 2;
  height: calc(58 / var(--full-width) * 100vw);
  padding-inline: calc(20 / var(--full-width) * 100vw);
  font-size: calc(18 / var(--full-width) * 100vw);
  font-weight: 600;
  background-color: #fa9600;
  color: #fff;
  border: 1px solid #fa9600;
  border-top: calc(8 / var(--full-width) * 100vw) solid #fa9600;
  border-bottom: 1px solid #999;
  border-radius: calc(6 / var(--full-width) * 100vw) calc(6 / var(--full-width) * 100vw) 0 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition:
    color 0.3s,
    background-color 0.3s,
    border-color 0.3s;
}
.s .basic-tab-item {
  height: calc(120 / var(--sp-full-width) * 100vw);
  padding-inline: calc(40 / var(--sp-full-width) * 100vw);
  padding-bottom: calc(10 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
  border-top: calc(20 / var(--sp-full-width) * 100vw) solid #fa9600;
  border-radius: calc(6 / var(--sp-full-width) * 100vw) calc(6 / var(--sp-full-width) * 100vw) 0 0;
}

.basic-tab-item._selected {
  background-color: #fff;
  color: #000;
  border: 1px solid #999;
  border-top: calc(8 / var(--full-width) * 100vw) solid #fa9600;
  border-bottom: none;
  cursor: default;
  pointer-events: none;
}
.s .basic-tab-item._selected {
  border-top: calc(20 / var(--sp-full-width) * 100vw) solid #fa9600;
  padding-bottom: 0;
}

/* BASICコンテンツ */
.basic-content {
  display: none;
  margin-top: calc(50 / var(--full-width) * 100vw);
}
.s .basic-content {
  margin-top: calc(50 / var(--sp-full-width) * 100vw);
}
.basic-content[data-basic='1'] {
  display: block;
}

.basic-content-line {
  display: flex;
  column-gap: calc(40 / var(--full-width) * 100vw);
}
.s .basic-content-line {
  flex-direction: column;
  row-gap: calc(30 / var(--sp-full-width) * 100vw);
}

.basic-content-lineImg {
  flex-shrink: 0;
}

.basic-content-lineImg img {
  width: calc(440 / var(--full-width) * 100vw);
}
.s .basic-content-lineImg img {
  width: 100%;
}

.basic-content-lineImg p {
  margin-top: calc(10 / var(--full-width) * 100vw);
  font-size: calc(16 / var(--full-width) * 100vw);
  font-weight: bold;
  text-align: center;
}
.s .basic-content-lineImg p {
  margin-top: calc(30 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

.basic-content-lineImg span {
  font-size: calc(12 / var(--full-width) * 100vw);
  text-align: center;
  display: block;
}
.s .basic-content-lineImg span {
  font-size: calc(24 / var(--sp-full-width) * 100vw);
}
.s .basic-role .basic-content-lineImg span {
  text-align: left;
}

.basic-content-lineImg img + span {
  margin-top: calc(10 / var(--full-width) * 100vw);
}
.s .basic-content-lineImg img + span {
  margin-top: calc(30 / var(--sp-full-width) * 100vw);
}

.basic-content-lineText {
  display: flex;
  flex-direction: column;
  row-gap: calc(15 / var(--full-width) * 100vw);
}
.s .basic-content-lineText {
  row-gap: calc(20 / var(--sp-full-width) * 100vw);
}

.basic-content-lineText p {
  font-size: calc(16 / var(--full-width) * 100vw);
  letter-spacing: calc(-1 / var(--full-width) * 100vw);
}
.s .basic-content-lineText p {
  font-size: calc(28 / var(--sp-full-width) * 100vw);
  letter-spacing: calc(-2 / var(--sp-full-width) * 100vw);
}

.basic-content-lineText span {
  font-size: calc(12 / var(--full-width) * 100vw);
  vertical-align: super;
  line-height: 1;
}
.s .basic-content-lineText span {
  font-size: calc(24 / var(--sp-full-width) * 100vw);
}

/* BASICコンテンツ① */
.basic-workList {
  display: flex;
  column-gap: calc(32 / var(--full-width) * 100vw);
}
.s .basic-workList {
  flex-direction: column;
  row-gap: calc(48 / var(--sp-full-width) * 100vw);
}

.basic-workItem {
  width: calc(346 / var(--full-width) * 100vw);
}
.s .basic-workItem {
  width: 100%;
}

.basic-workItem .common-containerBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(15 / var(--full-width) * 100vw);
  min-height: calc(295 / var(--full-width) * 100vw);
}
.s .basic-workItem .common-containerBody {
  row-gap: calc(40 / var(--sp-full-width) * 100vw);
  min-height: none;
}

.basic-workItem-img {
  height: calc(145 / var(--full-width) * 100vw);
}
.s .basic-workItem-img {
  height: calc(230 / var(--sp-full-width) * 100vw);
}
.basic-workItem-img img {
  width: auto;
  height: 100%;
}

.basic-workItem-text {
  letter-spacing: calc(-1 / var(--full-width) * 100vw);
}

.basic-work .basic-content-line {
  margin-top: calc(65 / var(--full-width) * 100vw);
}
.s .basic-work .basic-content-line {
  margin-top: calc(65 / var(--sp-full-width) * 100vw);
}

/* BASICコンテンツ② */
.basic-role .basic-content-line {
  margin-top: calc(32 / var(--full-width) * 100vw);
}
.s .basic-role .basic-content-line {
  margin-top: calc(32 / var(--sp-full-width) * 100vw);
}

.basic-role .common-containerBody {
  min-width: calc(618 / var(--full-width) * 100vw);
}

.basic-role-headline {
  font-weight: 700;
  color: #ff0800;
}

.basic-role-text + .basic-role-headline {
  margin-top: calc(24 / var(--full-width) * 100vw);
}
.s .basic-role-text + .basic-role-headline {
  margin-top: calc(24 / var(--sp-full-width) * 100vw);
}

/**********************************
* Q&A  
**********************************/
.foodeducation-faq {
  padding-inline: calc(270 / var(--full-width) * 100vw);
}

.faq-item + .faq-item {
  margin-top: calc(32 / var(--full-width) * 100vw);
}
.s .faq-item + .faq-item {
  margin-top: calc(50 / var(--sp-full-width) * 100vw);
}

/* アコーディオン */
.faq-item-head {
  padding: calc(18 / var(--full-width) * 100vw) calc(32 / var(--full-width) * 100vw)
    calc(13 / var(--full-width) * 100vw);
  font-weight: 700;
  text-align: left;
  position: relative;
  border-radius: calc(12 / var(--full-width) * 100vw);
  transition: border-radius 0.3s ease 0.3s;
}
.s .faq-item-head {
  padding: calc(24 / var(--sp-full-width) * 100vw) calc(95 / var(--sp-full-width) * 100vw)
    calc(18 / var(--sp-full-width) * 100vw) calc(40 / var(--sp-full-width) * 100vw);
  border-radius: calc(12 / var(--sp-full-width) * 100vw);
}

.faq-item-head::before,
.faq-item-head::after {
  display: block;
  content: '';
  position: absolute;
  top: 47%;
  right: 2.5%;
  width: calc(24 / var(--full-width) * 100vw);
  height: calc(2 / var(--full-width) * 100vw);
  background-color: #fff;
  transition: transform 0.3s ease;
}
.s .faq-item-head::before,
.s .faq-item-head::after {
  right: 6%;
  width: calc(24 / var(--sp-full-width) * 100vw);
  height: calc(2 / var(--sp-full-width) * 100vw);
}
.faq-item-head::after {
  transform: rotate(-90deg);
}

.faq-item-head._open {
  border-radius: calc(12 / var(--full-width) * 100vw) calc(12 / var(--full-width) * 100vw) 0 0;
  transition: border-radius 0s;
}
.s .faq-item-head._open {
  border-radius: calc(12 / var(--sp-full-width) * 100vw) calc(12 / var(--sp-full-width) * 100vw) 0 0;
}
.faq-item-head._open::after {
  transform: rotate(0);
}

.faq-item-body {
  display: none;
  border: none;
  padding: calc(30 / var(--full-width) * 100vw) calc(40 / var(--full-width) * 100vw);
}
.s .faq-item-body {
  padding: calc(40 / var(--sp-full-width) * 100vw);
}

/* Q1 */
.faq-item-headline {
  margin-top: calc(20 / var(--full-width) * 100vw);
  font-weight: 700;
  color: #ff0800;
  position: relative;
  padding-left: calc(20 / var(--full-width) * 100vw);
}
.s .faq-item-headline {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
  padding-left: calc(26 / var(--sp-full-width) * 100vw);
  letter-spacing: calc(-2.4 / var(--sp-full-width) * 100vw);
}

.faq-item-headline::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  width: calc(10 / var(--full-width) * 100vw);
  height: calc(10 / var(--full-width) * 100vw);
  background-color: #ff0800;
  border-radius: 100%;
}
.s .faq-item-headline::after {
  width: calc(16 / var(--sp-full-width) * 100vw);
  height: calc(16 / var(--sp-full-width) * 100vw);
}

.faq-item-headline:last-of-type {
  margin-bottom: calc(20 / var(--full-width) * 100vw);
}
.s .faq-item-headline:last-of-type {
  margin-bottom: calc(35 / var(--sp-full-width) * 100vw);
}

.faq-item-text a {
  text-decoration: underline;
}

/* Q2 */
.faq-item-label {
  padding: calc(8 / var(--full-width) * 100vw) calc(16 / var(--full-width) * 100vw);
  background-color: #fa9600;
  color: #fff;
  font-weight: 700;
  width: fit-content;
  display: flex;
  align-items: center;
  column-gap: calc(10 / var(--full-width) * 100vw);
}
.s .faq-item-label {
  padding: calc(15 / var(--sp-full-width) * 100vw) calc(20 / var(--sp-full-width) * 100vw);
  column-gap: calc(18 / var(--sp-full-width) * 100vw);
}

.faq-item-label span {
  width: calc(32 / var(--full-width) * 100vw);
  height: calc(32 / var(--full-width) * 100vw);
  border-radius: 50px;
  background-color: #fff;
  color: #fa9600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s .faq-item-label span {
  width: calc(32 / var(--sp-full-width) * 100vw);
  height: calc(32 / var(--sp-full-width) * 100vw);
  padding-top: calc(4 / var(--sp-full-width) * 100vw);
}

.faq-item-label + .faq-item-text {
  margin-top: calc(15 / var(--full-width) * 100vw);
}
.s .faq-item-label + .faq-item-text {
  margin-top: calc(25 / var(--sp-full-width) * 100vw);
}

.faq-item-text + .faq-item-label {
  margin-top: calc(25 / var(--full-width) * 100vw);
}
.s .faq-item-text + .faq-item-label {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
}

/**********************************
* PRACTICE  
**********************************/
.foodeducation-practiceWrapper {
  display: flex;
  flex-direction: column;
  row-gap: calc(64 / var(--full-width) * 100vw);
}
.s .foodeducation-practiceWrapper {
  row-gap: calc(100 / var(--sp-full-width) * 100vw);
}

.practice-content {
  position: relative;
}

.foodeducation-practice-point {
  display: flex;
  align-items: center;
  gap: calc(6 / var(--full-width) * 100vw);
  line-height: 1;
}
.s .foodeducation-practice-point {
  align-items: flex-start;
  gap: calc(8 / var(--sp-full-width) * 100vw);
  line-height: 1.2;
}

.foodeducation-practice-point::before {
  content: '';
  width: calc(20 / var(--full-width) * 100vw);
  height: calc(20 / var(--full-width) * 100vw);
  flex-shrink: 0;
  display: inline-block;
  background-image: url(../img/icon-foodeducation-practice-point.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.s .foodeducation-practice-point::before {
  width: calc(30 / var(--sp-full-width) * 100vw);
  height: calc(30 / var(--sp-full-width) * 100vw);
}

.foodeducation-practice-point + .foodeducation-practice-point {
  margin-top: calc(5 / var(--full-width) * 100vw);
}
.s .foodeducation-practice-point + .foodeducation-practice-point {
  margin-top: calc(20 / var(--sp-full-width) * 100vw);
}

/********* モニタリング *********/
.monitoring-list,
.vegetables-list {
  display: flex;
  column-gap: calc(32 / var(--full-width) * 100vw);
  margin-top: calc(32 / var(--full-width) * 100vw);
}
.s .monitoring-list,
.s .vegetables-list {
  flex-direction: column;
  row-gap: calc(48 / var(--sp-full-width) * 100vw);
  margin-top: calc(80 / var(--sp-full-width) * 100vw);
}

.monitoring-item,
.vegetables-item {
  width: calc(534 / var(--full-width) * 100vw);
}
.s .monitoring-item,
.s .vegetables-item {
  width: 100%;
}

.monitoring-item-img {
  width: fit-content;
  height: calc(135 / var(--full-width) * 100vw);
  margin: 0 auto;
}
.s .monitoring-item-img {
  height: calc(200 / var(--sp-full-width) * 100vw);
}
.monitoring-item-img img {
  width: auto;
  height: 100%;
}

.monitoring-item-text {
  margin-top: calc(20 / var(--full-width) * 100vw);
}
.s .monitoring-item-text {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
}

/********* 野菜 *********/
.vegetables-item-img {
  width: calc(340 / var(--full-width) * 100vw);
  height: calc(164 / var(--full-width) * 100vw);
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.s .vegetables-item-img {
  width: calc(570 / var(--sp-full-width) * 100vw);
  height: calc(250 / var(--sp-full-width) * 100vw);
}

.vegetables-item:last-of-type .vegetables-item-img {
  width: calc(315 / var(--full-width) * 100vw);
  height: calc(185 / var(--full-width) * 100vw);
}
.s .vegetables-item:last-of-type .vegetables-item-img {
  width: calc(525 / var(--sp-full-width) * 100vw);
  height: calc(280 / var(--sp-full-width) * 100vw);
}

#vegetables .foodeducation-practice-point:nth-child(4) {
  margin-top: calc(30 / var(--full-width) * 100vw);
}
.s #vegetables .foodeducation-practice-point:nth-child(4) {
  margin-top: calc(30 / var(--sp-full-width) * 100vw);
}

.vegetables-item-headline {
  font-size: calc(20 / var(--full-width) * 100vw);
  font-weight: 700;
}
.s .vegetables-item-headline {
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

/* 野菜をおいしく食べる工夫 */
.vegetables-ingenuity {
  margin-top: calc(55 / var(--full-width) * 100vw);
  padding: calc(65 / var(--full-width) * 100vw) calc(110 / var(--full-width) * 100vw)
    calc(30 / var(--full-width) * 100vw);
  border-radius: calc(20 / var(--full-width) * 100vw);
  position: relative;
  display: flex;
  column-gap: calc(50 / var(--full-width) * 100vw);
}
.s .vegetables-ingenuity {
  margin-top: calc(65 / var(--sp-full-width) * 100vw);
  padding: calc(130 / var(--sp-full-width) * 100vw) calc(40 / var(--sp-full-width) * 100vw)
    calc(65 / var(--sp-full-width) * 100vw);
  border-radius: calc(20 / var(--sp-full-width) * 100vw);
  flex-direction: column;
  row-gap: calc(60 / var(--sp-full-width) * 100vw);
}

.vegetables-ingenuity-headline {
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(20 / var(--full-width) * 100vw);
  font-weight: bold;
  border-radius: 0 0 calc(12 / var(--full-width) * 100vw) 0;
  background-color: #fff;
}
.s .vegetables-ingenuity-headline {
  font-size: calc(32 / var(--sp-full-width) * 100vw);
  border-radius: 0 0 calc(12 / var(--sp-full-width) * 100vw) 0;
}

.vegetables-ingenuity-headline span {
  padding: calc(5 / var(--full-width) * 100vw) calc(15 / var(--full-width) * 100vw);
  display: block;
  background-image: linear-gradient(90deg, #f99e37, #f62828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.s .vegetables-ingenuity-headline span {
  padding: calc(16 / var(--sp-full-width) * 100vw) calc(32 / var(--sp-full-width) * 100vw);
}

.vegetables-ingenuity-imgWrapper {
  display: flex;
  column-gap: calc(20 / var(--full-width) * 100vw);
}
.s .vegetables-ingenuity-imgWrapper {
  flex-direction: column;
  row-gap: calc(40 / var(--sp-full-width) * 100vw);
}

.vegetables-ingenuity-img {
  width: calc(270 / var(--full-width) * 100vw);
}
.s .vegetables-ingenuity-img {
  width: 100%;
}

.vegetables-ingenuity-text {
  margin-top: calc(15 / var(--full-width) * 100vw);
  color: #fff;
}
.s .vegetables-ingenuity-text {
  margin-top: calc(35 / var(--sp-full-width) * 100vw);
}

/********* たんぱく質 *********/
/* 主な働き */
.protein-work-content {
  padding: calc(32 / var(--full-width) * 100vw);
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  column-gap: calc(30 / var(--full-width) * 100vw);
}
.s .protein-work-content {
  padding: calc(40 / var(--sp-full-width) * 100vw);
  flex-direction: column;
  align-items: flex-start;
  row-gap: calc(32 / var(--sp-full-width) * 100vw);
}

.s .protein-work-content .section-text {
  letter-spacing: calc(-2.4 / var(--sp-full-width) * 100vw);
}

.protein-work-headline {
  padding: calc(27 / var(--full-width) * 100vw) calc(13.5 / var(--full-width) * 100vw);
  border-radius: calc(12 / var(--full-width) * 100vw);
  font-size: calc(16 / var(--full-width) * 100vw);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background-image: linear-gradient(90deg, #f99e37, #f62828);
}
.s .protein-work-headline {
  padding: calc(27 / var(--sp-full-width) * 100vw) calc(38 / var(--sp-full-width) * 100vw);
  border-radius: calc(12 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

.protein-work-img {
  margin-top: calc(32 / var(--full-width) * 100vw);
}
.s .protein-work-img {
  margin-top: calc(50 / var(--sp-full-width) * 100vw);
}

/* 食品量の例 */
.protein-case {
  margin-top: calc(30 / var(--full-width) * 100vw);
  padding: calc(70 / var(--full-width) * 100vw) calc(60 / var(--full-width) * 100vw)
    calc(35 / var(--full-width) * 100vw);
  border-radius: calc(20 / var(--full-width) * 100vw);
  position: relative;
  color: #fff;
}
.s .protein-case {
  margin-top: calc(64 / var(--sp-full-width) * 100vw);
  padding: calc(165 / var(--sp-full-width) * 100vw) calc(40 / var(--sp-full-width) * 100vw)
    calc(65 / var(--sp-full-width) * 100vw);
  border-radius: calc(20 / var(--sp-full-width) * 100vw);
}

.protein-case-headline {
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(20 / var(--full-width) * 100vw);
  font-weight: bold;
  border-radius: 0 0 calc(12 / var(--full-width) * 100vw) 0;
  background-color: #fff;
}
.s .protein-case-headline {
  font-size: calc(32 / var(--sp-full-width) * 100vw);
  border-radius: 0 0 calc(12 / var(--sp-full-width) * 100vw) 0;
}

.protein-case-headline span {
  padding: calc(5 / var(--full-width) * 100vw) calc(15 / var(--full-width) * 100vw);
  display: block;
  background-image: linear-gradient(90deg, #f99e37, #f62828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.s .protein-case-headline span {
  padding: calc(16 / var(--sp-full-width) * 100vw) calc(32 / var(--sp-full-width) * 100vw);
  line-height: 1.3;
}

.protein-case-subheadline {
  margin-top: calc(25 / var(--full-width) * 100vw);
  font-size: calc(28 / var(--full-width) * 100vw);
  line-height: 1;
}
.s .protein-case-subheadline {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
  font-size: calc(32 / var(--sp-full-width) * 100vw);
}

.protein-case-text {
  margin-top: calc(10 / var(--full-width) * 100vw);
  font-size: calc(20 / var(--full-width) * 100vw);
}
.s .protein-case-text {
  margin-top: calc(20 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

.protein-case .section-text {
  margin-top: calc(10 / var(--full-width) * 100vw);
}
.s .protein-case .section-text {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
}

/********* 補食 *********/
/* 役割 */
.complementary-role {
  margin: calc(32 / var(--full-width) * 100vw) auto 0;
  width: calc(560 / var(--full-width) * 100vw);
}
.s .complementary-role {
  margin: calc(45 / var(--sp-full-width) * 100vw) auto 0;
  width: 100%;
}

/* おすすめアイテム */
.complementary-list {
  display: flex;
  flex-direction: column;
  row-gap: calc(65 / var(--full-width) * 100vw);
}
.s .complementary-list {
  row-gap: calc(75 / var(--sp-full-width) * 100vw);
}

.complementary-item {
  display: flex;
  column-gap: calc(55 / var(--full-width) * 100vw);
}
.s .complementary-item {
  flex-direction: column;
  align-items: center;
  row-gap: calc(60 / var(--sp-full-width) * 100vw);
}

.complementary-itemWrapper {
  width: calc(550 / var(--full-width) * 100vw);
  flex-shrink: 0;
}
.s .complementary-itemWrapper {
  width: 100%;
}

.complementary-item-text {
  margin-top: calc(30 / var(--full-width) * 100vw);
}
.s .complementary-item-text {
  margin-top: calc(45 / var(--sp-full-width) * 100vw);
}

.complementary-item-img {
  width: calc(470 / var(--full-width) * 100vw);
}
.s .complementary-item-img {
  width: calc(590 / var(--sp-full-width) * 100vw);
}

.complementary-item:last-of-type .complementary-item-img {
  width: calc(365 / var(--full-width) * 100vw);
  margin: 0 auto;
}
.s .complementary-item:last-of-type .complementary-item-img {
  width: calc(590 / var(--sp-full-width) * 100vw);
}

/********* 水分補給 *********/
/* ポイント */
.hydration-pointList {
  display: flex;
  column-gap: calc(30 / var(--full-width) * 100vw);
  margin-block: calc(25 / var(--full-width) * 100vw) calc(20 / var(--full-width) * 100vw);
}
.s .hydration-pointList {
  flex-direction: column;
  row-gap: calc(48 / var(--sp-full-width) * 100vw);
  margin-block: calc(65 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem {
  width: calc((100% - (30 / var(--full-width) * 100vw)) / 3);
}
.s .hydration-pointItem {
  width: 100%;
}

.hydration-pointItem .common-containerBody {
  padding-inline: calc(30 / var(--full-width) * 100vw);
  min-height: calc(641 / var(--full-width) * 100vw);
}
.s .hydration-pointItem .common-containerBody {
  padding-inline: calc(40 / var(--sp-full-width) * 100vw);
  min-height: none;
}

.hydration-pointItem h4.section-text {
  text-align: center;
}

.hydration-pointItem-container + h4.section-text {
  margin-top: calc(20 / var(--full-width) * 100vw);
}
.s .hydration-pointItem-container + h4.section-text {
  margin-top: calc(35 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem-container {
  padding: calc(20 / var(--full-width) * 100vw) calc(25 / var(--full-width) * 100vw);
  border-radius: calc(12 / var(--full-width) * 100vw);
  background-color: #f2f2f2;
}
.s .hydration-pointItem-container {
  padding: calc(40 / var(--sp-full-width) * 100vw) calc(30 / var(--sp-full-width) * 100vw);
  border-radius: calc(12 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem-container + .hydration-pointItem-container {
  margin-top: calc(12 / var(--full-width) * 100vw);
}
.s .hydration-pointItem-container + .hydration-pointItem-container {
  margin-top: calc(25 / var(--sp-full-width) * 100vw);
}

/* オレンジラベル */
.hydration-pointItem-label {
  font-size: calc(16 / var(--full-width) * 100vw);
  padding: calc(3 / var(--full-width) * 100vw) 0 calc(1 / var(--full-width) * 100vw);
  margin-bottom: calc(15 / var(--full-width) * 100vw);
  border-radius: 50px;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(90deg, #f99e37, #f62828);
}
.s .hydration-pointItem-label {
  font-size: calc(32 / var(--sp-full-width) * 100vw);
  padding: calc(6 / var(--sp-full-width) * 100vw) 0 calc(2 / var(--sp-full-width) * 100vw);
  margin-bottom: calc(30 / var(--sp-full-width) * 100vw);
}

* + .hydration-pointItem-label {
  margin-top: calc(7 / var(--full-width) * 100vw);
}
.s * + .hydration-pointItem-label {
  margin-top: calc(20 / var(--sp-full-width) * 100vw);
}

/* POINT1 */
.hydration-pointItem-reference {
  margin-top: calc(12 / var(--full-width) * 100vw);
  display: flex;
  justify-content: center;
  column-gap: calc(35 / var(--full-width) * 100vw);
}
.s .hydration-pointItem-reference {
  margin-top: calc(20 / var(--sp-full-width) * 100vw);
  column-gap: calc(75 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem-referenceImg {
  height: calc(45 / var(--full-width) * 100vw);
}
.s .hydration-pointItem-referenceImg {
  height: calc(90 / var(--sp-full-width) * 100vw);
}
.hydration-pointItem-referenceImg img {
  width: auto;
  height: 100%;
}

.hydration-pointItem-reference p:first-of-type {
  font-size: calc(20 / var(--full-width) * 100vw);
  font-weight: 900;
  background-image: linear-gradient(90deg, #f99e37, #f62828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
.s .hydration-pointItem-reference p:first-of-type {
  font-size: calc(40 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem-reference p:last-of-type {
  font-size: calc(14 / var(--full-width) * 100vw);
  line-height: 1;
  text-align: center;
}
.s .hydration-pointItem-reference p:last-of-type {
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

/* POINT2 */
.s .hydration-pointItem._point02 {
  margin-top: calc(70 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem._point02 .hydration-pointItem-container img {
  width: calc(165 / var(--full-width) * 100vw);
  margin-left: calc(15 / var(--full-width) * 100vw);
}
.s .hydration-pointItem._point02 .hydration-pointItem-container img {
  width: calc(250 / var(--sp-full-width) * 100vw);
  margin-left: calc(105 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem._point02 .section-text {
  margin-top: calc(15 / var(--full-width) * 100vw);
}
.s .hydration-pointItem._point02 .section-text {
  margin-top: calc(35 / var(--sp-full-width) * 100vw);
}

.hydration-pointItem._point02 .section-text + p {
  margin-top: calc(30 / var(--full-width) * 100vw);
  font-size: calc(14 / var(--full-width) * 100vw);
}
.s .hydration-pointItem._point02 .section-text + p {
  margin-top: calc(40 / var(--sp-full-width) * 100vw);
  font-size: calc(24 / var(--sp-full-width) * 100vw);
}

/* 参考テキスト */
.s #hydration > .section-text:last-of-type {
  position: absolute;
  top: 44%;
}

/* メリット */
.hydration-merit-content {
  margin-top: calc(32 / var(--full-width) * 100vw);
  padding: calc(32 / var(--full-width) * 100vw);
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  column-gap: calc(30 / var(--full-width) * 100vw);
}
.s .hydration-merit-content {
  padding: calc(40 / var(--sp-full-width) * 100vw);
  flex-direction: column;
  align-items: flex-start;
  row-gap: calc(32 / var(--sp-full-width) * 100vw);
}

.hydration-merit-headline {
  padding: calc(27 / var(--full-width) * 100vw) calc(13.5 / var(--full-width) * 100vw);
  border-radius: calc(12 / var(--full-width) * 100vw);
  font-size: calc(16 / var(--full-width) * 100vw);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background-image: linear-gradient(90deg, #f99e37, #f62828);
}
.s .hydration-merit-headline {
  padding: calc(27 / var(--sp-full-width) * 100vw) calc(38 / var(--sp-full-width) * 100vw);
  border-radius: calc(12 / var(--sp-full-width) * 100vw);
  font-size: calc(28 / var(--sp-full-width) * 100vw);
}

/**********************************
* 追従ボタン  
**********************************/
.foodeducation-fixedBtn {
  position: fixed;
  bottom: calc(40 / var(--full-width) * 100vw);
  right: calc(40 / var(--full-width) * 100vw);
  width: calc(120 / var(--full-width) * 100vw);
  z-index: 100;
  cursor: pointer;
}
.s .foodeducation-fixedBtn {
  bottom: calc(30 / var(--sp-full-width) * 100vw);
  right: calc(30 / var(--sp-full-width) * 100vw);
  width: calc(190 / var(--sp-full-width) * 100vw);
}