*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where([hidden]:not([hidden=until-found])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}
:where(body) {
  block-size: 100%;
  block-size: 100dvb;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role=button], [role=option]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(button) {
  border-style: solid;
}

:where(a) {
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(:focus-visible) {
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px;
}

:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.7;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  background: #fff;
}

a {
  display: block;
  text-decoration: none;
  color: #333;
  transition: ease 0.3s;
  cursor: pointer;
}

picture, figure {
  display: inline-block;
}

footer {
  padding: 20px 0 0;
  border-top: 6px solid rgb(0, 108, 182);
}
footer #footerNav h3 {
  max-width: 1200px;
  margin: auto auto 15px;
  font-weight: bold;
  color: rgb(0, 108, 182);
}
footer #footerNav ul {
  max-width: 1120px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px auto;
}
footer #footerNav ul li {
  font-size: 16px;
  display: block;
  width: 48.5%;
}
footer #footerNav ul li a {
  text-decoration: none;
  color: rgb(0, 108, 182);
  display: block;
  border-radius: 100vh;
  border: 2px solid rgb(0, 108, 182);
  padding: 10px 30px;
  margin: 10px 0;
  background-image: url(../img/nav_arr.svg);
  background-repeat: no-repeat;
  background-position: right 3% bottom 50%;
  background-size: 13px 12px;
}
footer #footerNav ul li a:hover {
  background-color: #D4E6F3;
}
footer #footerNav ul li a span {
  font-size: 13px;
  padding-right: 5px;
}
@media only screen and (max-width: 1024px) {
  footer {
    padding: 0;
  }
  footer #footerNav {
    padding: 2vh 2vw;
  }
  footer #footerNav ul {
    width: calc(100% - 30px);
    margin: 1vw auto;
  }
  footer #footerNav ul li {
    width: 100%;
  }
  footer #footerNav ul li a {
    padding: 10px 30px;
    margin: 5px 0;
    background-position: right 4% bottom 50%;
    background-size: 15px 14px;
  }
  footer #footerNav ul li a span {
    font-size: 11px;
    display: block;
  }
}
@media only screen and (max-width: 599px) {
  footer #footerNav {
    padding: 0;
    margin-bottom: 30px;
  }
  footer #footerNav h3 {
    padding-left: 20px;
    padding-top: 15px;
  }
  footer #footerNav ul {
    width: 100%;
    margin: 0 auto;
  }
  footer #footerNav ul li {
    width: 100%;
    font-size: 13px;
  }
  footer #footerNav ul li a {
    border-radius: 0;
    border: none;
    border-bottom: 2px solid rgb(0, 108, 182);
    padding: 10px 20px;
    margin: 0;
    background-position: right 4% bottom 50%;
    background-size: 13px 12px;
  }
  footer #footerNav ul li:nth-child(1) {
    border-top: 2px solid rgb(0, 108, 182);
  }
}
footer .crcp {
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  padding: 25px;
}

/* recommends */
.recommends .wrap {
  width: 100%;
  margin: auto;
  text-align: left;
}
@media screen and (max-width: 1240px) {
  .recommends .wrap {
    width: 100%;
    padding: 0 4.6vw;
  }
}
.recommends .wrapper {
  max-width: 1120px;
  margin: auto;
  text-align: left;
}
@media screen and (max-width: 1240px) {
  .recommends .wrapper {
    width: 100%;
    padding: 0 4.6vw;
  }
}
.recommends .hdrLg {
  width: 100%;
  text-align: left;
  margin: 0 auto;
  padding: 15px 30px;
  position: absolute;
}
.recommends .hdrLg img {
  width: 120px;
}
@media screen and (max-width: 1240px) {
  .recommends .hdrLg {
    padding: 20px 30px;
  }
  .recommends .hdrLg img {
    width: 150px;
  }
}
@media screen and (max-width: 768px) {
  .recommends .hdrLg {
    padding: 15px 20px;
  }
  .recommends .hdrLg img {
    width: 20%;
  }
}
.recommends .mv {
  max-width: 1500px;
  margin: 0 auto;
  background: url("../img/mv-bg.png") no-repeat top right;
  background-size: 840px 450px;
  text-align: center;
}
.recommends .mv .mv-ttl {
  padding-top: 50px;
  max-width: 1075px;
  margin: 0 auto;
}
.recommends .mv .mv-txt {
  max-width: 500px;
  margin: auto;
}
@media screen and (max-width: 1240px) {
  .recommends .mv {
    background-size: 80%;
  }
  .recommends .mv .mv-txt {
    margin-top: 5vw;
  }
}
.recommends .subNav {
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 1.25vw, 20px);
  margin: clamp(40px, 10vw, 80px) auto;
}
.recommends .subNav li {
  width: calc(20% - 1.25vw);
}
.recommends .subNav li a img {
  width: 100%;
  transition: ease 0.3s;
}
.recommends .subNav__01.on img, .recommends .subNav__01:hover img {
  filter: brightness(0) saturate(100%) invert(87%) sepia(26%) saturate(7112%) hue-rotate(347deg) brightness(97%) contrast(92%);
}
.recommends .subNav__02.on img, .recommends .subNav__02:hover img {
  filter: brightness(0) saturate(100%) invert(51%) sepia(86%) saturate(424%) hue-rotate(163deg) brightness(93%) contrast(92%);
}
.recommends .subNav__03.on img, .recommends .subNav__03:hover img {
  filter: brightness(0) saturate(100%) invert(62%) sepia(63%) saturate(851%) hue-rotate(295deg) brightness(95%) contrast(89%);
}
.recommends .subNav__04.on img, .recommends .subNav__04:hover img {
  filter: brightness(0) saturate(100%) invert(80%) sepia(43%) saturate(4267%) hue-rotate(7deg) brightness(103%) contrast(98%);
}
.recommends .subNav__05.on img, .recommends .subNav__05:hover img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(31%) saturate(730%) hue-rotate(56deg) brightness(98%) contrast(93%);
}
@media screen and (max-width: 768px) {
  .recommends .subNav li {
    width: calc(33.3333333333% - 10px);
  }
}
.recommends .section {
  padding-bottom: 60px;
}
.recommends .head {
  margin-bottom: 60px;
}
.recommends .head__ttl {
  margin: 0 auto 20px auto;
}
.recommends .head__ttl figure {
  margin-top: -20px;
}
.recommends .bgWhite {
  background: #fff;
  max-width: 1240px;
  border-radius: 2.6vw;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 40px;
}
.recommends .item__text {
  padding-left: 20px;
  margin-top: 15px;
}
.recommends .item__text .copy {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 15px;
  position: relative;
}
.recommends .item__text .copy::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: 0;
  left: -20px;
  width: 8px;
  height: 100%;
  background: #ccc;
  border-radius: 4px;
}
.recommends .item__text .name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.5;
}
.recommends .item__text .name small {
  font-size: 13px;
  display: block;
}
.recommends .item__btn a {
  display: block;
  text-align: center;
  margin: 20px auto auto;
  width: 240px;
  padding: 5px;
  border-radius: 10px;
  background: #ccc;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.recommends .item__btn a:hover {
  opacity: 0.8;
}
.recommends *[data-col="2-1"] {
  width: calc(50% - 20px);
}
@media screen and (max-width: 768px) {
  .recommends *[data-col="2-1"] {
    width: 100%;
  }
}
.recommends *[data-col="3-1"] {
  width: calc(33% - 15px);
}
@media screen and (max-width: 1240px) {
  .recommends *[data-col="3-1"] {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 768px) {
  .recommends *[data-col="3-1"] {
    width: 100%;
  }
}
.recommends *[data-col="3-2"] {
  width: calc(66% - 15px);
}
@media screen and (max-width: 1240px) {
  .recommends *[data-col="3-2"] {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 768px) {
  .recommends *[data-col="3-2"] {
    width: 100%;
  }
}
.recommends *[data-col="4-1"] {
  width: calc(50% - 10px);
}
@media screen and (max-width: 1240px) {
  .recommends *[data-col="4-1"] {
    width: 100%;
  }
}
.recommends *[data-btn=left] a {
  margin-left: -20px;
}
@media screen and (max-width: 768px) {
  .recommends *[data-btn=left] a {
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .recommends .products {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .recommends .item {
    width: 100%;
    margin: auto auto 50px;
  }
  .recommends .item:last-child {
    margin-bottom: 20px;
  }
  .recommends .item__btn a {
    width: 70%;
    padding: 10px 5px;
    font-size: min(4.0066777963vw, 24px);
  }
}
.recommends .notice {
  padding: 2vh 0;
  font-size: 11px;
  text-align: right;
}
.recommends .crcp {
  background-color: #93b1dd;
  color: rgb(0, 108, 182);
}

/* led */
.led {
  background: rgb(254, 243, 231);
}
.led .item__btn a {
  background: rgb(255, 168, 16);
}
.led .head__ttl {
  max-width: 523px;
  margin-left: 0;
}
@media screen and (min-width: 1240px) {
  .led .head__ttl {
    margin-left: -55px;
  }
}
@media screen and (max-width: 768px) {
  .led .head__ttl img {
    max-height: 80px;
  }
}
.led .item__text .copy::before {
  background: rgb(255, 168, 16);
}
.led .products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.led .led__01 .item__pic {
  margin-bottom: 20px;
}
.led .led__01 .item__illu {
  max-width: 295px;
}
@media screen and (max-width: 768px) {
  .led .led__01 .flexBox {
    flex-direction: column-reverse;
  }
  .led .led__01 .item__text {
    width: 100%;
  }
}
.led .led__02 .item__illu {
  max-width: 230px;
}
.led .led__02 .icoBox {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.led .led__02 .icoBox__ico {
  width: 120px;
  margin-top: -40px;
}
.led .led__02 .icoBox__text {
  width: calc(100% - 140px);
}
@media screen and (max-width: 768px) {
  .led .led__02 .icoBox__ico {
    margin-top: 0;
  }
  .led .led__02 .flexBox {
    flex-direction: column-reverse;
  }
  .led .led__02 .item__text {
    width: 100%;
  }
}

/* safety */
.safety {
  background: rgb(227, 244, 253);
}
.safety .item__btn a {
  background: rgb(0, 152, 248);
}
.safety .head__ttl {
  max-width: 470px;
  margin-left: 0;
}
@media screen and (min-width: 1240px) {
  .safety .head__ttl {
    margin-left: -55px;
  }
}
@media screen and (max-width: 768px) {
  .safety .head__ttl img {
    max-height: 80px;
  }
}
.safety .item__text .copy::before {
  background: rgb(0, 152, 248);
}
.safety .products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 60px 20px;
}
@media screen and (max-width: 768px) {
  .safety .products {
    gap: 0;
  }
}
.safety .safety__01 {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.safety .safety__01 .flexBox {
  height: 100%;
  flex-direction: column;
}
.safety .safety__01 .movie {
  max-width: 280px;
}
@media screen and (max-width: 1240px) {
  .safety .safety__01 .item__pic {
    width: 80%;
    margin: auto;
    text-align: center;
  }
  .safety .safety__01 .flexBox {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: center;
    border: 1px solid pink;
  }
}
@media screen and (max-width: 768px) {
  .safety .safety__01 .item__pic {
    width: 100%;
  }
  .safety .safety__01 .flexBox {
    flex-direction: column;
  }
  .safety .safety__01 .item__text {
    width: calc(100% - 20px);
  }
}
.safety .safety__02 .item__pic {
  margin-left: -40px;
}
@media screen and (max-width: 768px) {
  .safety .safety__02 {
    margin-left: auto;
  }
}
.safety .safety__03 .item__pic {
  margin-top: -30px;
  margin-right: max(-60px, -4.6vw);
}
@media screen and (max-width: 1240px) {
  .safety .safety__03 .item__pic {
    margin-top: 0;
  }
}
.safety .safety__03 .item__text {
  width: 100%;
  margin-top: max(-8.6vw, -130px);
}
@media screen and (max-width: 1240px) {
  .safety .safety__03 .item__text {
    margin-top: 0;
  }
}

/* heatstroke */
.heatstroke {
  background: rgb(253, 238, 236);
}
.heatstroke .item__btn a {
  background: rgb(251, 121, 172);
}
.heatstroke .head__ttl {
  max-width: 615px;
  margin-left: 0;
}
@media screen and (min-width: 1240px) {
  .heatstroke .head__ttl {
    margin-left: -55px;
  }
}
@media screen and (max-width: 768px) {
  .heatstroke .head__ttl img {
    max-height: 80px;
  }
}
.heatstroke .item__text .copy::before {
  background: rgb(251, 121, 172);
}
.heatstroke .bgWhite {
  padding-top: 0;
}
.heatstroke .products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0px 20px;
}
.heatstroke .heatstroke__01 {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .heatstroke .heatstroke__01 {
    gap: 0;
  }
}
.heatstroke .heatstroke__01 .item__pic {
  max-width: 570px;
  width: calc(60% - 20px);
  margin-top: -30px;
}
.heatstroke .heatstroke__01 .item__text {
  max-width: 345px;
  width: 40%;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .heatstroke .heatstroke__01 .item__pic {
    width: 100%;
  }
  .heatstroke .heatstroke__01 .item__text {
    width: 100%;
  }
}
.heatstroke .heatstroke__02 {
  align-self: flex-end;
}
.heatstroke .heatstroke__02 .item__text {
  align-self: flex-end;
}
@media screen and (max-width: 1240px) {
  .heatstroke .heatstroke__02 .item__pic {
    width: 80%;
    margin: 30px auto 0;
  }
  .heatstroke .heatstroke__02 .flexBox {
    flex-direction: column;
  }
}
.heatstroke .heatstroke__03 .item__pic {
  max-width: 480px;
  margin: auto;
}
@media screen and (max-width: 1240px) {
  .heatstroke .heatstroke__03 .flexBox {
    flex-direction: column;
  }
}

/* disaster */
.disaster {
  background: rgb(254, 248, 219);
}
.disaster .item__btn a {
  background: rgb(245, 197, 0);
}
.disaster .head__ttl {
  max-width: 802px;
  margin-left: 0;
}
@media screen and (min-width: 1240px) {
  .disaster .head__ttl {
    margin-left: -55px;
  }
}
@media screen and (max-width: 768px) {
  .disaster .head__ttl img {
    max-height: 110px;
  }
}
.disaster .item__text .copy::before {
  background: rgb(245, 197, 0);
}
.disaster .products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0px 20px;
}
.disaster .disaster__sttl {
  margin-bottom: 40px;
  position: relative;
}
.disaster .disaster__sttl::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  transform: translateY(-50%);
}
.disaster .disaster__sttl .sttl-txt {
  display: inline-block;
  background: #fff;
  position: relative;
  padding-right: 10px;
  max-width: 138px;
}
.disaster .disaster__sttl .sttl-illu {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
}
.disaster .disaster__01 {
  margin-bottom: clamp(60px, 10vw, 80px);
}
.disaster .disaster__01 .disaster__sttl::before {
  background: #2c2f9f;
}
.disaster .disaster__01 .disaster__sttl .sttl-illu {
  margin-right: max(-60px, -4.6vw);
  width: clamp(100px, 10vw, 150px);
}
@media screen and (max-width: 768px) {
  .disaster .disaster__01 .item01 .flexBox {
    flex-direction: column;
    gap: 10px;
  }
  .disaster .disaster__01 .pic01 {
    width: 90%;
  }
  .disaster .disaster__01 .pic02 {
    display: flex;
    justify-content: space-between;
  }
  .disaster .disaster__01 .pic02 figure {
    width: 48%;
  }
}
.disaster .disaster__02 {
  margin-bottom: clamp(60px, 10vw, 80px);
}
.disaster .disaster__02 .disaster__sttl::before {
  background: #f39500;
}
.disaster .disaster__02 .disaster__sttl .sttl-illu {
  margin-right: max(-50px, -4.2vw);
  width: clamp(70px, 8.5vw, 120px);
}
.disaster .disaster__02 .products {
  align-items: end;
}
.disaster .disaster__02 .item01 .item__pic {
  margin: auto;
  max-width: 360px;
}
.disaster .disaster__03 .disaster__sttl::before {
  background: #9c502e;
}
.disaster .disaster__03 .disaster__sttl .sttl-illu {
  margin-right: max(-60px, -4.6vw);
  width: clamp(120px, 10vw, 220px);
  top: -1vw;
}
.disaster .disaster__03 .item01 {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 60px;
}
.disaster .disaster__03 .item01 figure {
  width: 49.5%;
}
@media screen and (min-width: 1240px) {
  .disaster .disaster__03 .item01 .item__pic {
    display: flex;
    justify-content: space-between;
    width: calc(75% - 10px);
  }
  .disaster .disaster__03 .item01 .item__text {
    width: calc(25% - 10px);
  }
}
@media screen and (max-width: 1240px) {
  .disaster .disaster__03 .item01 {
    flex-direction: column;
  }
  .disaster .disaster__03 .item01 .item__pic {
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
  }
  .disaster .disaster__03 .item01 .item__text {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .disaster .disaster__03 .item01 {
    flex-direction: column;
  }
  .disaster .disaster__03 .item01 figure {
    width: 100%;
  }
  .disaster .disaster__03 .item01 .item__pic {
    flex-direction: column;
  }
  .disaster .disaster__03 .item01 .item__pic, .disaster .disaster__03 .item01 .item__text {
    width: 100%;
  }
}
.disaster .disaster__03 .item02 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 1240px) {
  .disaster .disaster__03 .item02 {
    flex-direction: column;
  }
  .disaster .disaster__03 .item02 .item__pic, .disaster .disaster__03 .item02 .movie {
    margin: auto;
    width: 80%;
  }
}
.disaster .disaster__03 .item03 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 1240px) {
  .disaster .disaster__03 .item03 {
    flex-direction: column;
    height: fit-content;
  }
  .disaster .disaster__03 .item03 .item__pic {
    margin: auto;
    width: 80%;
  }
}

/* emergencyfood */
.emergencyfood {
  background: rgb(239, 248, 223);
}
.emergencyfood .item__btn a {
  background: rgb(92, 181, 49);
}
.emergencyfood .head__ttl {
  max-width: 412px;
  margin-left: 0;
}
@media screen and (min-width: 1240px) {
  .emergencyfood .head__ttl {
    margin-left: -55px;
  }
}
@media screen and (max-width: 768px) {
  .emergencyfood .head__ttl img {
    max-height: 80px;
  }
}
.emergencyfood .item__text .copy::before {
  background: none;
}
.emergencyfood .item__text {
  padding-left: 0;
}
.emergencyfood .item__btn a {
  margin-left: 0;
}
.emergencyfood .bgWhite {
  padding-top: 20px;
}
.emergencyfood .recipe {
  margin-bottom: 80px;
}
.emergencyfood .recipe__ttl {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.emergencyfood .recipe__ttl .ttl {
  max-width: 375px;
  margin-right: 2vw;
}
.emergencyfood .recipe__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .emergencyfood .recipe__pic {
    order: 1;
    width: calc(50% - 10px);
  }
  .emergencyfood .recipe__step {
    order: 2;
    width: calc(50% - 10px);
  }
  .emergencyfood .recipe__material {
    order: 3;
    width: calc(66% - 10px);
  }
  .emergencyfood .recipe__illu {
    order: 4;
    width: calc(33% - 10px);
  }
}
.emergencyfood .recipe__step {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.emergencyfood .recipe__step .sttl {
  max-width: 450px;
  margin-bottom: 20px;
}
.emergencyfood .recipe__step .step {
  width: calc(100% - 200px);
}
.emergencyfood .recipe__step .step li {
  position: relative;
  counter-increment: num;
  margin: auto auto 15px 25px;
}
.emergencyfood .recipe__step .step li::before {
  content: counter(num);
  position: absolute;
  left: -25px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #ef858c;
  background: #fff;
  border: 1px solid #ef858c;
  display: grid;
  place-content: center;
  font-size: 14px;
  font-weight: bold;
}
.emergencyfood .recipe__step .pic {
  width: 190px;
}
.emergencyfood .recipe__step .pic figure {
  margin-bottom: 10px;
}
.emergencyfood .recipe__material .sttl {
  background: #ef858c;
  padding: 3px 10px;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  border-radius: 2px;
}
.emergencyfood .recipe__material .quantity {
  display: flex;
  justify-content: space-between;
}
.emergencyfood .recipe__material .quantity > div {
  width: 48%;
}
.emergencyfood .recipe__material .quantity li {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.emergencyfood .recipe__material .quantity li::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  transform: translateY(-50%);
  border-bottom: 3px dotted #666;
  z-index: 0;
}
.emergencyfood .recipe__material .quantity li.name_01 {
  margin-top: 15px;
}
.emergencyfood .recipe__material .quantity li.name_01 span:first-child {
  padding-left: 0;
}
.emergencyfood .recipe__material .quantity li.name_02 {
  margin-top: 10px;
}
.emergencyfood .recipe__material .quantity li.name_02::before {
  border-bottom: none;
}
.emergencyfood .recipe__material .quantity li span {
  position: relative;
  display: block;
  z-index: 2;
  background: #fff;
}
.emergencyfood .recipe__material .quantity li span:first-child {
  padding-right: 5px;
  padding-left: 16px;
}
.emergencyfood .recipe__material .quantity li span:last-child {
  padding-left: 5px;
}
.emergencyfood .recipe__illu {
  display: grid;
  place-content: center;
}
.emergencyfood .recipe__illu .link {
  margin: 20px auto;
  text-align: left;
  width: fit-content;
}
.emergencyfood .recipe__illu .link a {
  font-size: 13px;
  line-height: 1.5em;
  position: relative;
}
.emergencyfood .recipe__illu .link a::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: -20px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("../img/05-linkarrow.png") no-repeat;
  background-size: contain;
}
.emergencyfood .recipe__illu .link a:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  .emergencyfood .recipe__item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
  }
  .emergencyfood .recipe__item .pic {
    width: 380px;
  }
}
@media screen and (max-width: 1240px) {
  .emergencyfood .recipe__ttl {
    flex-direction: column;
    align-items: start;
  }
  .emergencyfood .recipe__step {
    flex-direction: column;
  }
  .emergencyfood .recipe__step .step {
    width: 100%;
  }
  .emergencyfood .recipe__step .pic {
    margin: 10px auto;
    text-align: center;
  }
  .emergencyfood .recipe__material {
    width: calc(66% - 10px);
    margin-bottom: 40px;
  }
  .emergencyfood .recipe__material .quantity {
    flex-direction: column;
  }
  .emergencyfood .recipe__material .quantity > div {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .emergencyfood .recipe__material {
    width: 100%;
  }
}
.emergencyfood .tasting__ttl {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.emergencyfood .tasting__ttl .ttl {
  max-width: 500px;
  margin-right: 2vw;
}
.emergencyfood .tasting__inner {
  display: grid;
  grid-template-columns: 22.3214285714% 51.7857142857% 22.3214285714%;
  gap: 10px;
  justify-content: space-between;
}
@media screen and (max-width: 1240px) {
  .emergencyfood .tasting__inner {
    grid-template-columns: 35% 30% 35%;
  }
}
.emergencyfood .tasting__inner .item01 {
  grid-column-start: 1;
  grid-row-start: 1;
}
.emergencyfood .tasting__inner .item02 {
  grid-column-start: 1;
  grid-row-start: 2;
}
.emergencyfood .tasting__inner .item03 {
  grid-column-start: 3;
  grid-row-start: 1;
}
.emergencyfood .tasting__inner .item04 {
  grid-column-start: 3;
  grid-row-start: 2;
}
.emergencyfood .tasting__inner .pic-pc {
  grid-row: span 2/span 2;
  grid-column-start: 2;
  grid-row-start: 1;
  align-content: center;
}
.emergencyfood .tasting .fukidashi {
  border-radius: 8px;
  padding: 5px 10px 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  color: #fff;
  font-size: 14px;
}
.emergencyfood .tasting .fukidashi .name {
  font-size: 13px;
}
.emergencyfood .tasting .item01 .fukidashi {
  background: #f5af23;
}
@media screen and (min-width: 768px) {
  .emergencyfood .tasting .item01 .fukidashi::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #f5af23;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    clip-path: polygon(100% 70%, 0 10%, 0 80%);
  }
  .emergencyfood .tasting .item01 .fukidashi figure {
    width: 175px;
  }
}
.emergencyfood .tasting .item02 .fukidashi {
  background: #5ec1c7;
}
@media screen and (min-width: 768px) {
  .emergencyfood .tasting .item02 .fukidashi::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #5ec1c7;
    right: -20px;
    top: 70%;
    transform: translateY(-50%);
    clip-path: polygon(100% 30%, 0 20%, 0 80%);
  }
  .emergencyfood .tasting .item02 .fukidashi .flexBox {
    align-items: center;
  }
  .emergencyfood .tasting .item02 .fukidashi figure {
    width: 100px;
  }
}
.emergencyfood .tasting .item03 .fukidashi {
  background: #f5af23;
}
@media screen and (min-width: 768px) {
  .emergencyfood .tasting .item03 .fukidashi::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 20px;
    background: #f5af23;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    clip-path: polygon(100% 70%, 100% 10%, 0 80%);
  }
  .emergencyfood .tasting .item03 .fukidashi figure {
    width: 170px;
  }
}
.emergencyfood .tasting .item04 .fukidashi {
  background: #5ec1c7;
}
@media screen and (min-width: 768px) {
  .emergencyfood .tasting .item04 .fukidashi::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 20px;
    background: #5ec1c7;
    left: -20px;
    top: 70%;
    transform: translateY(-50%);
    clip-path: polygon(100% 80%, 100% 20%, 0 30%);
  }
  .emergencyfood .tasting .item04 .fukidashi figure {
    width: 160px;
  }
}
@media screen and (max-width: 768px) {
  .emergencyfood .tasting__ttl {
    flex-direction: column;
    align-items: start;
  }
  .emergencyfood .tasting__inner {
    display: block;
  }
  .emergencyfood .tasting__inner .item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .emergencyfood .tasting__inner .item .item__text {
    width: 100%;
  }
  .emergencyfood .tasting__inner .fukidashi {
    width: 48.5%;
    justify-content: center;
  }
  .emergencyfood .tasting__inner .pic-sp {
    width: 48.5%;
  }
}
@media screen and (max-width: 768px) {
  .emergencyfood .item__btn a {
    margin: auto;
  }
}

.flexBox {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .flexBox {
    align-items: center !important;
  }
}

.flexBox.item__inner {
  gap: 20px;
}

*[data-display=pc] {
  display: block;
}

*[data-display=pc-tab] {
  display: block;
}

*[data-display=tab] {
  display: none;
}

*[data-display=sp] {
  display: none;
}

@media screen and (max-width: 1240px) {
  *[data-display=pc] {
    display: none;
  }
  *[data-display=pc-tab] {
    display: block;
  }
  *[data-display=tab] {
    display: block;
  }
  *[data-display=sp] {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  *[data-display=pc] {
    display: none;
  }
  *[data-display=pc-tab] {
    display: none;
  }
  *[data-display=tab] {
    display: block;
  }
  *[data-display=sp] {
    display: block;
  }
}
.photo {
  position: relative;
}
.photo .caption {
  position: absolute;
}

.caption {
  font-size: 12px;
}

.caption[data-cap=right-bottom] {
  right: 5px;
  bottom: 5px;
  text-align: right;
}
@media screen and (max-width: 1240px) {
  .caption[data-cap=right-bottom] {
    bottom: -20px;
  }
}

.caption[data-cap=right] {
  text-align: right;
}

.mb-00 {
  margin-bottom: 0 !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}/*# sourceMappingURL=style.css.map */