@-webkit-keyframes fvBeforeAnimation {
  0% {
    opacity: 1;
  }
  79.9% {
    opacity: 1;
  }
  87.9% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fvBeforeAnimation {
  0% {
    opacity: 1;
  }
  79.9% {
    opacity: 1;
  }
  87.9% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fvAfterAnimation {
  0% {
    opacity: 0;
  }
  91% {
    opacity: 0;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fvAfterAnimation {
  0% {
    opacity: 0;
  }
  91% {
    opacity: 0;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@media not screen and (min-width: 768px) {
  @-webkit-keyframes fvMoveAnimation {
    0% {
      left: 100%;
      opacity: 0;
    }
    4.99% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    14.98% {
      opacity: 1;
    }
    14.99% {
      left: 100%;
      opacity: 0;
    }
    15% {
      left: calc(50% + 7.6rem);
      opacity: 0;
    }
    15.01% {
      opacity: 1;
    }
    29.97% {
      opacity: 1;
    }
    29.98% {
      opacity: 0;
    }
    29.99% {
      left: calc(50% + 7.6rem);
      opacity: 0;
    }
    30% {
      left: calc(50% - 4.9rem);
      opacity: 0;
    }
    30.01% {
      opacity: 1;
    }
    44.97% {
      opacity: 1;
    }
    44.98% {
      opacity: 0;
    }
    44.99% {
      left: calc(50% - 4.9rem);
      opacity: 0;
    }
    45% {
      left: calc(50% - 17.47rem);
      opacity: 0;
    }
    45.01% {
      opacity: 1;
    }
    59.97% {
      opacity: 1;
    }
    59.98% {
      opacity: 0;
    }
    59.99% {
      left: calc(50% - 17.47rem);
      opacity: 0;
    }
    60% {
      left: calc(50% - 30rem);
      opacity: 0;
    }
    60.01% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    88% {
      opacity: 0;
    }
    100% {
      left: calc(50% - 30rem);
      opacity: 0;
    }
  }
  @keyframes fvMoveAnimation {
    0% {
      left: 100%;
      opacity: 0;
    }
    4.99% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    14.98% {
      opacity: 1;
    }
    14.99% {
      left: 100%;
      opacity: 0;
    }
    15% {
      left: calc(50% + 7.6rem);
      opacity: 0;
    }
    15.01% {
      opacity: 1;
    }
    29.97% {
      opacity: 1;
    }
    29.98% {
      opacity: 0;
    }
    29.99% {
      left: calc(50% + 7.6rem);
      opacity: 0;
    }
    30% {
      left: calc(50% - 4.9rem);
      opacity: 0;
    }
    30.01% {
      opacity: 1;
    }
    44.97% {
      opacity: 1;
    }
    44.98% {
      opacity: 0;
    }
    44.99% {
      left: calc(50% - 4.9rem);
      opacity: 0;
    }
    45% {
      left: calc(50% - 17.47rem);
      opacity: 0;
    }
    45.01% {
      opacity: 1;
    }
    59.97% {
      opacity: 1;
    }
    59.98% {
      opacity: 0;
    }
    59.99% {
      left: calc(50% - 17.47rem);
      opacity: 0;
    }
    60% {
      left: calc(50% - 30rem);
      opacity: 0;
    }
    60.01% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    88% {
      opacity: 0;
    }
    100% {
      left: calc(50% - 30rem);
      opacity: 0;
    }
  }
}
@media screen and (min-width: 768px) {
  @-webkit-keyframes fvMoveAnimation {
    0% {
      left: 100%;
      opacity: 0;
    }
    4.99% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    14.98% {
      opacity: 1;
    }
    14.99% {
      left: 100%;
      opacity: 0;
    }
    15% {
      left: calc(50% + 16rem);
      opacity: 0;
    }
    15.01% {
      opacity: 1;
    }
    29.97% {
      opacity: 1;
    }
    29.98% {
      opacity: 0;
    }
    29.99% {
      left: calc(50% + 16rem);
      opacity: 0;
    }
    30% {
      left: calc(50% - 7rem);
      opacity: 0;
    }
    30.01% {
      opacity: 1;
    }
    44.97% {
      opacity: 1;
    }
    44.98% {
      opacity: 0;
    }
    44.99% {
      left: calc(50% - 7rem);
      opacity: 0;
    }
    45% {
      left: calc(50% - 31rem);
      opacity: 0;
    }
    45.01% {
      opacity: 1;
    }
    59.97% {
      opacity: 1;
    }
    59.98% {
      opacity: 0;
    }
    59.99% {
      left: calc(50% - 31rem);
      opacity: 0;
    }
    60% {
      left: calc(50% - 54rem);
      opacity: 0;
    }
    60.01% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    88% {
      opacity: 0;
    }
    100% {
      left: calc(50% - 54rem);
      opacity: 0;
    }
  }
  @keyframes fvMoveAnimation {
    0% {
      left: 100%;
      opacity: 0;
    }
    4.99% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    14.98% {
      opacity: 1;
    }
    14.99% {
      left: 100%;
      opacity: 0;
    }
    15% {
      left: calc(50% + 16rem);
      opacity: 0;
    }
    15.01% {
      opacity: 1;
    }
    29.97% {
      opacity: 1;
    }
    29.98% {
      opacity: 0;
    }
    29.99% {
      left: calc(50% + 16rem);
      opacity: 0;
    }
    30% {
      left: calc(50% - 7rem);
      opacity: 0;
    }
    30.01% {
      opacity: 1;
    }
    44.97% {
      opacity: 1;
    }
    44.98% {
      opacity: 0;
    }
    44.99% {
      left: calc(50% - 7rem);
      opacity: 0;
    }
    45% {
      left: calc(50% - 31rem);
      opacity: 0;
    }
    45.01% {
      opacity: 1;
    }
    59.97% {
      opacity: 1;
    }
    59.98% {
      opacity: 0;
    }
    59.99% {
      left: calc(50% - 31rem);
      opacity: 0;
    }
    60% {
      left: calc(50% - 54rem);
      opacity: 0;
    }
    60.01% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    88% {
      opacity: 0;
    }
    100% {
      left: calc(50% - 54rem);
      opacity: 0;
    }
  }
}
/*---------------------------------------------*/
/*  common                                     */
/*---------------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  background-color: #FFF6ED;
}
body.hidden {
  overflow: hidden;
  position: relative;
}

.container {
  width: calc(100% - 4.8rem);
  max-width: 34.2rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container {
    width: calc(100% - 4.8rem);
    max-width: none;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media not screen and (min-width: 768px) {
  .pc {
    display: none !important;
  }
}
section {
  margin-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  section {
    margin-bottom: 20rem;
  }
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.4rem;
  margin-bottom: 5.6rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 2.8rem;
    line-height: 160%;
    letter-spacing: 0.6rem;
    margin-bottom: 12rem;
  }
}
h2 span {
  display: inline-block;
  position: relative;
  padding-bottom: 0.8rem;
}
h2 span::before, h2 span::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 0.2rem;
  bottom: 0;
  left: 0;
  background-color: #FFC832;
}
h2 span::after {
  width: 50%;
  background-color: #EA5520;
}
h2 small {
  vertical-align: super;
  font-weight: 500;
  font-size: 2rem;
}

a {
  color: #2B2B2B;
}

.spacing {
  letter-spacing: 0;
}

.indent {
  display: inline-block;
  text-indent: -0.2em;
}
@media screen and (min-width: 768px) {
  .indent {
    text-indent: -0.4em;
  }
}

/*---------------------------------------------*/
/*  header                                     */
/*---------------------------------------------*/
.header {
  width: 100%;
  height: 5.6rem;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  box-shadow: 0 0 0.6rem 0 rgba(0, 0, 0, 0.25);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media screen and (min-width: 768px) {
  .header {
    height: 12rem;
  }
}
.header::before {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.header.is-open::before {
  content: "";
  width: 100%;
  height: 100vh;
  background-color: rgba(57, 50, 48, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
}
.header.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.header .container {
  width: calc(100% - 4.8rem);
  max-width: none;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .header .container {
    width: calc(100% - 8rem);
  }
}
.header h1 {
  width: 17rem;
  height: auto;
}
@media screen and (min-width: 768px) {
  .header h1 {
    width: 31.6rem;
  }
}
.header h1 img {
  display: block;
  aspect-ratio: 318/50;
}
.header__drawer-open {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: #FFC832;
  position: relative;
  cursor: pointer;
}
.header__drawer-open span {
  width: 1.4rem;
  height: 0.2rem;
  border-radius: 999.9rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
}
.header__drawer-open span:first-child {
  top: calc(50% - 0.5rem);
}
.header__drawer-open span:last-child {
  top: calc(50% + 0.5rem);
}
.header__link {
  position: absolute;
}
@media screen and (min-width: 768px) {
  .header__link {
    position: static;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.header__menu {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: 37.4rem;
  height: auto;
  max-height: calc(100vh - 4.8rem);
  border-radius: 3.2rem;
  position: fixed;
  z-index: 100;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0.8rem 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  overflow: scroll;
}
@media screen and (min-width: 768px) {
  .header__menu {
    display: block !important;
    opacity: 1 !important;
    transition: none;
    width: 48rem;
    max-height: none;
    border-radius: 0;
    position: static;
    transform: none;
    background-color: transparent;
    box-shadow: none;
    text-align: left;
    overflow: hidden;
  }
}
@media screen and (min-width: 1440px) {
  .header__menu {
    width: auto;
  }
}
.header__menu.show {
  opacity: 1;
}
.header__menu ul {
  padding: 4.8rem 0 3.2rem;
}
@media screen and (min-width: 768px) {
  .header__menu ul {
    padding: 0;
    margin-bottom: -1.2rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (-webkit-max-content)[3];
    -ms-grid-columns: (max-content)[3];
    grid-template-columns: repeat(3, -webkit-max-content);
    grid-template-columns: repeat(3, max-content);
    -moz-column-gap: 4.8rem;
    column-gap: 4.8rem;
    align-items: center;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1440px) {
  .header__menu ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 3.2rem;
    margin-bottom: 0;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
  }
}
.header__menu ul li {
  margin-bottom: 4.2rem;
}
@media screen and (min-width: 768px) {
  .header__menu ul li {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
  }
}
@media screen and (min-width: 1440px) {
  .header__menu ul li {
    margin-bottom: 0;
  }
}
.header__menu ul li:first-child {
  margin-bottom: 3.2rem;
}
@media screen and (min-width: 768px) {
  .header__menu ul li:first-child {
    display: none;
  }
}
.header__menu ul li a {
  font-size: 1.4rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .header__menu ul li a {
    font-size: 1.5rem;
    font-weight: 500;
  }
}
@media screen and (min-width: 768px) {
  .header__menu ul li a:hover {
    text-decoration: underline;
  }
}
.header__menu ul li img {
  width: 24.8rem;
}
.header__drawer-close {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: #FFC832;
  position: absolute;
  top: 1.2rem;
  left: auto;
  right: 1.6rem;
  z-index: 10;
  cursor: pointer;
}
.header__drawer-close span {
  width: 1.4rem;
  height: 0.2rem;
  border-radius: 999.9rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #FFFFFF;
}
.header__drawer-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.header__cta {
  width: 100%;
  height: 7.2rem;
  position: fixed;
  z-index: 10;
  top: auto;
  bottom: 1.6rem;
  left: 0;
}
@media screen and (min-width: 768px) {
  .header__cta {
    width: auto;
    height: auto;
    position: static;
  }
}
.header__cta ul {
  width: calc(100% - 8rem);
  max-width: 31rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .header__cta ul {
    justify-content: center;
    width: auto;
    max-width: none;
    margin: 0;
  }
}
@media screen and (min-width: 768px) {
  .header__cta ul li:first-child {
    margin-right: 1.6rem;
  }
}
.header__cta ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  width: 14rem;
  height: 5.6rem;
  border-radius: 999.9rem;
  background-color: #EA5520;
  box-shadow: 0 0 0.8rem 0 rgba(0, 0, 0, 0.25);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .header__cta ul li a {
    font-size: 1.5rem;
    width: 14rem;
    height: 5.4rem;
  }
}

/*---------------------------------------------*/
/*  fv                                         */
/*---------------------------------------------*/
.fv {
  padding-top: 12rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .fv {
    overflow: visible;
    margin-bottom: 24rem;
    padding-top: 20rem;
  }
}
@media screen and (min-width: 768px) {
  .fv .container {
    width: calc(100% - 14.4rem);
    max-width: 113.6rem;
    margin: 0 auto;
    position: relative;
  }
}
.fv__logo {
  margin-bottom: 5.6rem;
}
@media screen and (min-width: 768px) {
  .fv__logo {
    margin-bottom: 7.6rem;
  }
}
.fv__logo img {
  width: 62rem;
  height: auto;
  aspect-ratio: 318/50;
}
.fv p {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8em;
  letter-spacing: 0.5rem;
  margin-left: 1.2rem;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .fv p {
    font-size: 3rem;
    line-height: 2em;
    letter-spacing: 0.6rem;
    margin-left: 10rem;
    margin-bottom: 0;
  }
}
.fv p .copyright {
  vertical-align: text-top;
  font-weight: 500;
  font-size: 60%;
  padding: 0 0.2rem;
  display: inline-block;
  transform: translateY(-0.12em);
}
@media screen and (min-width: 768px) {
  .fv p .copyright {
    transform: translateY(-0.28em);
  }
}
.fv__image {
  width: 100%;
  height: 25.6rem;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 768px) {
  .fv__image {
    height: 60rem;
    margin-top: -20rem;
  }
}
.fv__image img {
  position: absolute;
  max-width: none;
}
.fv__before img {
  width: 27rem;
  top: 2.4rem;
  left: calc(50% - 10rem);
  -webkit-animation: fvBeforeAnimation 5s ease-in-out 1 forwards;
  animation: fvBeforeAnimation 5s ease-in-out 1 forwards;
}
@media screen and (min-width: 768px) {
  .fv__before img {
    width: 59.2rem;
    top: 8rem;
    left: calc(50% - 4.8rem);
  }
}
.fv__move img {
  width: auto;
  height: 92%;
  top: 2%;
  left: 0;
  -webkit-animation: fvMoveAnimation 5s ease-in-out 1 forwards;
  animation: fvMoveAnimation 5s ease-in-out 1 forwards;
}
.fv__after img {
  width: auto;
  height: 100%;
  left: calc(50% - 8.6rem);
  -webkit-animation: fvAfterAnimation 5s ease-in-out 1 forwards;
  animation: fvAfterAnimation 5s ease-in-out 1 forwards;
}
@media screen and (min-width: 768px) {
  .fv__after img {
    left: calc(50% - 4rem);
  }
}
.fv__main {
  width: 100%;
  position: relative;
}
.fv__main img {
  width: 100%;
  height: auto;
  aspect-ratio: 107/64;
}
.fv__balloon {
  height: auto;
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 1.6s ease, transform 1.6s ease;
}
.fv__balloon.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.fv__balloon1 {
  width: 14.8rem;
  top: 75.2%;
  left: 20.8%;
  transition-delay: 0s;
}
.fv__balloon2 {
  width: 13.7rem;
  top: 23.1%;
  left: 49.8%;
  transition-delay: 0.4s;
}
.fv__balloon3 {
  width: 14rem;
  top: 22.4%;
  left: 75.4%;
  transition-delay: 0.8s;
}
.fv__balloon4 {
  width: 16.5rem;
  top: 50.8%;
  left: 86.3%;
  transition-delay: 1.2s;
}
.fv__copy {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8em;
  letter-spacing: 0.28rem;
}
@media screen and (min-width: 768px) {
  .fv__copy {
    line-height: 2em;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin-left: 2.8rem;
  }
}

/*---------------------------------------------*/
/*  sv.                                        */
/*---------------------------------------------*/
@media screen and (min-width: 768px) {
  .sv {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.sv__img {
  height: 31.2rem;
  position: relative;
  margin-bottom: 3.6rem;
}
@media screen and (min-width: 768px) {
  .sv__img {
    width: 48%;
    height: auto;
  }
}
.sv__img::before {
  content: "";
  display: block;
  width: calc(50% - 18.7rem + 14.8rem);
  height: calc(100% - 0.04rem);
  position: absolute;
  top: 0;
  left: 0;
  background-color: #EA5520;
}
@media screen and (min-width: 768px) {
  .sv__img::before {
    width: calc(100% - 29rem);
    height: 100%;
  }
}
.sv__img img {
  position: relative;
  display: block;
  z-index: 1;
  width: 28rem;
  height: 28rem;
  border: 1.6rem solid #EA5520;
  border-radius: 50%;
  margin-left: calc(50% - 18.7rem);
}
@media screen and (min-width: 768px) {
  .sv__img img {
    width: 52.4rem;
    height: 52.4rem;
    border-width: 2.8rem;
    margin-left: auto;
  }
}
.sv__text {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 200%;
  letter-spacing: 0.24rem;
  width: calc(100% - 7.2rem);
  max-width: 31.8rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(2rem);
  transition: 0.5s ease-in-out;
}
@media screen and (min-width: 768px) {
  .sv__text {
    font-size: 2.8rem;
    letter-spacing: 0.4rem;
    width: calc(52% - 5.4rem);
    max-width: none;
    margin: 0 0 0 5.4rem;
    transform: translateY(4rem);
  }
}
.sv__text.is-show {
  opacity: 1;
  transform: none;
}

/*---------------------------------------------*/
/*  request                                    */
/*---------------------------------------------*/
.request {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .request {
    padding-bottom: 4rem;
  }
}
.request__box {
  position: relative;
}
.request h3 {
  color: #FFFFFF;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.32rem;
  text-align: center;
  position: relative;
  padding: 0.6rem 0;
}
.request h3 span {
  padding: 0.6rem 1.2rem 0.6rem 1.52rem;
  border-radius: 0.4rem;
}
.request h3::after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  width: 1.2rem;
  height: 0.8rem;
}
.request__company {
  margin-bottom: 3.2rem;
}
.request__company span {
  background-color: #EA5520;
}
.request__company::after {
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  top: 100%;
  background-color: #EA5520;
}
.request__employee {
  margin-bottom: 2.8rem;
}
.request__employee span {
  background-color: #17617B;
}
.request__employee::after {
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  bottom: 100%;
  background-color: #17617B;
}
.request__img {
  position: relative;
  margin: -15.4rem auto 3.2rem;
  width: 100%;
  max-width: calc(50rem * 390 / 500);
  height: 28.4rem;
}
@media screen and (min-width: 768px) {
  .request__img {
    max-width: none;
    height: 65.5rem;
    margin: 20rem 0 20rem;
  }
}
.request__town {
  width: 165%;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
  .request__town {
    width: 130%;
    height: 100%;
    left: 50%;
  }
  .request__town img {
    height: 100%;
  }
}
.request__town.is-show {
  opacity: 1;
}
.request__people {
  width: 130%;
  max-width: none;
  position: absolute;
  top: 72%;
  left: 51%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: 0.3s ease-in-out 1.5s;
}
.request__people.is-show {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .request__people {
    width: 86%;
    left: 53%;
  }
}
.request__balloon {
  border: 0.1rem solid #dbdcdd;
  background: #FFFFFF;
  margin-bottom: 1.2rem;
  position: relative;
  opacity: 0;
  z-index: 1;
  transform: scale(0.6);
}
@media screen and (min-width: 768px) {
  .request__balloon {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
}
.request__balloon.is-show {
  opacity: 1;
  transform: scale(1);
}
@media screen and (min-width: 768px) {
  .request__balloon.is-show {
    transform: translate(-50%, -50%) scale(1);
  }
}
.request__balloon h4 {
  text-align: left;
  display: inline-block;
  position: relative;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.3rem;
  padding: 0.8rem 0;
  margin-bottom: 2rem;
}
.request__balloon h4::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.2rem;
}
.request__balloon p {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.18rem;
  display: inline-block;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .request__balloon p {
    display: block;
    font-size: 1.6rem;
    line-height: 187.5%;
    letter-spacing: 0.24rem;
    word-break: keep-all;
  }
}
.request__balloon1, .request__balloon2, .request__balloon3 {
  color: #EA5520;
}
.request__balloon1 h4::after, .request__balloon2 h4::after, .request__balloon3 h4::after {
  background-color: #EA5520;
}
.request__balloon4, .request__balloon5, .request__balloon6 {
  color: #17617B;
  width: calc(50% + 9rem);
}
.request__balloon4 h4::after, .request__balloon5 h4::after, .request__balloon6 h4::after {
  background-color: #17617B;
}
.request__balloon1, .request__balloon3, .request__balloon4, .request__balloon6 {
  border-radius: 0 1.2rem 1.2rem 0;
  border-left: none;
  padding: 2rem 2rem 2rem 0;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .request__balloon1, .request__balloon3, .request__balloon4, .request__balloon6 {
    border-left: 0.1rem solid #dbdcdd;
    text-align: left;
    border-radius: 1.2rem;
  }
}
.request__balloon1 p, .request__balloon3 p, .request__balloon4 p, .request__balloon6 p {
  margin-left: auto;
}
.request__balloon2, .request__balloon5 {
  border-radius: 1.2rem 0 0 1.2rem;
  border-right: none;
  margin-left: auto;
  padding: 2rem 0 2rem 2rem;
}
@media screen and (min-width: 768px) {
  .request__balloon2, .request__balloon5 {
    border-right: 0.1rem solid #dbdcdd;
    border-radius: 1.2rem;
  }
}
.request__balloon1 {
  width: calc(50% + 8.7rem);
  transition: 0.4s ease-in-out 0.5s;
}
@media screen and (min-width: 768px) {
  .request__balloon1 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    top: 12%;
    left: calc(50% + 40rem);
    padding: 2.8rem;
    transition: 0.5s ease-in-out 0.9s;
  }
  .request__balloon1::after {
    content: "";
    position: absolute;
    bottom: -0.8rem;
    left: 23%;
    width: 4.8rem;
    height: 0.2rem;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #EA5520;
  }
}
.request__balloon2 {
  width: calc(50% + 5.3rem);
  margin-bottom: 2.4rem;
  transition: 0.4s ease-in-out 0.7s;
}
@media screen and (min-width: 768px) {
  .request__balloon2 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    top: 0;
    left: calc(50% - 20rem);
    padding: 2.8rem;
    margin: 0;
    transition: 0.5s ease-in-out 0.7s;
  }
  .request__balloon2::after {
    content: "";
    position: absolute;
    bottom: -0.8rem;
    left: 77%;
    width: 4.8rem;
    height: 0.2rem;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #EA5520;
  }
}
.request__balloon3 {
  width: calc(50% + 4.1rem);
  transition: 0.4s ease-in-out 0.9s;
}
@media screen and (min-width: 768px) {
  .request__balloon3 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    top: 30%;
    left: calc(50% - 40rem);
    padding: 2.8rem;
    transition: 0.5s ease-in-out 0.5s;
  }
  .request__balloon3::after {
    content: "";
    position: absolute;
    bottom: -0.8rem;
    left: 77%;
    width: 4.8rem;
    height: 0.2rem;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #EA5520;
  }
}
.request__balloon4 {
  transition: 0.4s ease-in-out 2s;
}
@media screen and (min-width: 768px) {
  .request__balloon4 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 30rem;
    height: auto;
    top: 58%;
    left: calc(50% + 44rem);
    padding: 2.8rem;
    transition: 0.5s ease-in-out 2s;
  }
  .request__balloon4::after {
    content: "";
    position: absolute;
    bottom: -0.8rem;
    left: 48%;
    width: 4.8rem;
    height: 0.2rem;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #17617B;
  }
}
.request__balloon5 {
  transition: 0.4s ease-in-out 2.2s;
}
@media screen and (min-width: 768px) {
  .request__balloon5 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 30rem;
    height: auto;
    top: 115%;
    left: calc(50% + 10rem);
    padding: 2.8rem;
    transition: 0.5s ease-in-out 2.2s;
  }
  .request__balloon5::after {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: 50%;
    width: 4.8rem;
    height: 0.2rem;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #17617B;
  }
}
.request__balloon6 {
  transition: 0.4s ease-in-out 2.4s;
}
@media screen and (min-width: 768px) {
  .request__balloon6 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 30rem;
    height: auto;
    top: 113%;
    left: calc(50% - 42rem);
    padding: 2.8rem;
    transition: 0.5s ease-in-out 2.4s;
  }
  .request__balloon6::after {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: 66%;
    width: 4.8rem;
    height: 0.2rem;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #17617B;
  }
}

/*---------------------------------------------*/
/*  benefit                                    */
/*---------------------------------------------*/
.benefit {
  margin-top: -10rem;
  padding-top: 10rem;
  margin-bottom: 16rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .benefit {
    margin-top: -16rem;
    padding-top: 16rem;
  }
}
@media screen and (min-width: 768px) {
  .benefit__row {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.benefit__row__2 {
  flex-direction: row-reverse;
}
.benefit__image {
  position: relative;
  height: 32.4rem;
}
@media screen and (min-width: 768px) {
  .benefit__image {
    width: calc(50% + 2.4rem);
    height: 68rem;
  }
}
.benefit__image__1 {
  margin: 12rem 0 13.2rem;
}
.benefit__image__1::before {
  content: "";
  display: block;
  width: calc(50% + 12.4rem);
  height: 32.4rem;
  border-radius: 0 999.9rem 999.9rem 0;
  background-color: #EA5520;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .benefit__image__1::before {
    width: 100%;
    height: 68rem;
  }
}
.benefit__image__2 {
  margin: 12rem 0 8rem;
}
.benefit__image__2::before {
  content: "";
  display: block;
  width: calc(50% + 12.4rem);
  height: 32.4rem;
  border-radius: 999.9rem 0 0 999.9rem;
  background-color: #FFC832;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
}
@media screen and (min-width: 768px) {
  .benefit__image__2::before {
    width: 100%;
    height: 68rem;
  }
}
.benefit__illust {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto;
}
.benefit__illust__1 {
  top: 50%;
  left: calc(50% - 7.2rem);
  width: 27.6rem;
}
@media screen and (min-width: 768px) {
  .benefit__illust__1 {
    width: 57.2rem;
    left: auto;
    right: -17rem;
  }
}
.benefit__illust__2 {
  top: 52%;
  left: calc(50% + 7.2rem);
  width: 30.8rem;
}
@media screen and (min-width: 768px) {
  .benefit__illust__2 {
    width: 63.2rem;
    left: 33rem;
  }
}
.benefit__arch {
  position: absolute;
  transform: translate(-50%, -50%);
}
.benefit__arch__1 {
  top: 7%;
  left: calc(50% + 3.2rem);
  width: 18rem;
  height: 10.8rem;
}
@media screen and (min-width: 768px) {
  .benefit__arch__1 {
    top: 6%;
    left: auto;
    right: -12rem;
    width: 31.6rem;
    height: 21.6rem;
  }
}
.benefit__arch__2 {
  top: 19%;
  left: calc(50% - 5.2rem);
  width: 20.8rem;
  height: 18.8rem;
}
@media screen and (min-width: 768px) {
  .benefit__arch__2 {
    top: 19%;
    left: 15rem;
    width: 43rem;
    height: 40rem;
  }
}
.benefit__note {
  position: absolute;
  top: calc(100% + 1.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: 32rem;
  box-sizing: border-box;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  .benefit__note {
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 200%;
    width: 36rem;
    top: 83%;
    left: auto;
    right: 5.2rem;
  }
}
@media screen and (min-width: 768px) {
  .benefit__text {
    width: calc(50% - 2.4rem);
  }
}
@media screen and (min-width: 768px) {
  .benefit__text .container {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}
.benefit__box {
  margin-bottom: 8rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: 0.5s ease-in-out;
}
@media screen and (min-width: 768px) {
  .benefit__box {
    width: 43.2rem;
    transform: translateY(4rem);
  }
}
.benefit__box:nth-child(2) {
  transition: 0.5s ease-in-out 0.3s;
}
.benefit__box.is-show {
  opacity: 1;
  transform: none;
}
.benefit__box h3 {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.6rem 0;
  margin: 0 auto;
  width: 30rem;
  height: auto;
  background-color: #FFFFFF;
  border-width: 0.1rem;
  border-style: solid;
  border-radius: 0.4rem;
  color: #EA5520;
  font-size: 2rem;
  font-weight: 700;
  line-height: 175%;
  letter-spacing: 0.03rem;
}
@media screen and (min-width: 768px) {
  .benefit__box h3 {
    width: 37.6rem;
    font-size: 2.5rem;
    line-height: 160%;
    letter-spacing: 0.3rem;
    padding: 2.8rem 0;
  }
}
.benefit__box p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.15rem;
  border-radius: 0.4rem;
  border-width: 0.2rem;
  border-style: solid;
  padding: 6.8rem 1.2rem 1.6rem;
  margin-top: -5.2rem;
}
@media screen and (min-width: 768px) {
  .benefit__box p {
    font-size: 2rem;
    line-height: 200%;
    letter-spacing: 0.02rem;
    padding: 8rem 2.8rem 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  .benefit__box__1 {
    margin-left: 9.2rem;
    margin-right: auto;
  }
}
.benefit__box__1 h3, .benefit__box__1 p {
  border-color: #EA5520;
}
@media screen and (min-width: 768px) {
  .benefit__box__2 {
    margin-left: auto;
    margin-right: 13.2rem;
  }
}
.benefit__box__2 h3, .benefit__box__2 p {
  border-color: #FFC832;
}

/*---------------------------------------------*/
/*  about                                      */
/*---------------------------------------------*/
.about {
  margin-top: -10rem;
  padding-top: 10rem;
  margin-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  .about {
    margin-top: -16rem;
    padding-top: 16rem;
  }
}
@media screen and (min-width: 768px) {
  .about .container {
    width: 120rem;
  }
}
.about h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.3rem;
  text-align: center;
  margin-bottom: 17.2rem;
}
@media screen and (min-width: 768px) {
  .about h3 {
    font-size: 3rem;
    line-height: 2em;
    margin-bottom: 34rem;
  }
}
.about h3 span {
  color: #EA5520;
}
.about__nutrient {
  position: relative;
  margin-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  .about__nutrient {
    margin-bottom: 28rem;
  }
}
.about__image {
  position: relative;
  z-index: 1;
  width: 10.8rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .about__image {
    width: 34.8rem;
  }
}
.about__image::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-clip-path: polygon(50% 0%, 98% 35%, 79% 90%, 21% 90%, 2% 35%);
  clip-path: polygon(50% 0%, 98% 35%, 79% 90%, 21% 90%, 2% 35%);
  background-color: #FFC832;
  width: 23.2rem;
  height: 23.2rem;
}
@media screen and (min-width: 768px) {
  .about__image::before {
    width: 66.4rem;
    height: 66.4rem;
  }
}
.about__item {
  position: absolute;
  z-index: 2;
  width: 11.6rem;
  height: 11.6rem;
  border-radius: 50%;
  background-color: #EA5520;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}
@media screen and (min-width: 768px) {
  .about__item {
    width: 23.2rem;
    height: 23.2rem;
  }
}
.about__item.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.about__item__1 {
  top: -7.2rem;
  left: 50%;
  transition: 0.5s ease-in-out;
}
@media screen and (min-width: 768px) {
  .about__item__1 {
    top: -16rem;
  }
}
.about__item__2 {
  top: calc(50% - 3.2rem);
  left: calc(50% + 12.2rem);
  transition: 0.5s ease-in-out 0.3s;
}
@media screen and (min-width: 768px) {
  .about__item__2 {
    top: calc(50% - 10rem);
    left: calc(50% + 32rem);
  }
}
.about__item__3 {
  top: calc(100% + 5.2rem);
  left: calc(50% + 7.6rem);
  transition: 0.5s ease-in-out 0.6s;
}
@media screen and (min-width: 768px) {
  .about__item__3 {
    top: calc(100% + 10.4rem);
    left: calc(50% + 19.2rem);
  }
}
.about__item__4 {
  top: calc(100% + 5.2rem);
  left: calc(50% - 7.6rem);
  transition: 0.5s ease-in-out 0.9s;
}
@media screen and (min-width: 768px) {
  .about__item__4 {
    top: calc(100% + 10.4rem);
    left: calc(50% - 19.2rem);
  }
}
.about__item__5 {
  top: calc(50% - 3.2rem);
  left: calc(50% - 12.2rem);
  transition: 0.5s ease-in-out 1.2s;
}
@media screen and (min-width: 768px) {
  .about__item__5 {
    top: calc(50% - 10rem);
    left: calc(50% - 32rem);
  }
}
.about__label {
  text-align: center;
  color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9rem;
}
@media screen and (min-width: 768px) {
  .about__label {
    width: 18rem;
  }
}
.about__type {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.2rem;
}
@media screen and (min-width: 768px) {
  .about__type {
    font-size: 3.2rem;
    letter-spacing: 0.4rem;
  }
}
.about__type span {
  display: block;
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 125%;
  letter-spacing: 0.12rem;
}
@media screen and (min-width: 768px) {
  .about__type span {
    margin-top: 1.2rem;
    font-size: 1.6rem;
    line-height: 150%;
    letter-spacing: 0.25rem;
  }
}
.about__text {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 160%;
  width: 32.8rem;
  margin: 0 auto 1.2rem;
}
@media screen and (min-width: 768px) {
  .about__text {
    width: 65rem;
    font-size: 1.5rem;
    line-height: 200%;
    margin-bottom: 7.2rem;
  }
}
.about__note {
  width: 32.8rem;
  text-align: right;
  font-size: 1rem;
  font-weight: 400;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .about__note {
    width: 65rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 200%;
  }
}

/*---------------------------------------------*/
/*  lineup                                     */
/*---------------------------------------------*/
.lineup {
  margin-top: -10rem;
  padding-top: 10rem;
  margin-bottom: 16rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .lineup {
    margin-top: -16rem;
    padding-top: 16rem;
  }
}
@media screen and (min-width: 768px) {
  .lineup .container {
    width: calc(100% - 8rem);
    max-width: 120rem;
  }
}
@media screen and (min-width: 768px) {
  .lineup__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
}
.lineup__item {
  background-color: #FFC832;
  width: 27rem;
  margin: 0 auto 4.4rem;
  border-radius: 1.2rem;
}
@media screen and (min-width: 768px) {
  .lineup__item {
    width: 38rem;
    margin: 0 0 2.8rem;
    border-radius: 2rem;
  }
}
.lineup__card {
  width: 100%;
  border-radius: 1.2rem;
  padding: 2.8rem 2rem 2rem;
  box-sizing: border-box;
  text-align: center;
  color: #FFFFFF;
  position: relative;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .lineup__card {
    padding: 4rem 2rem 2.8rem;
    border-radius: 2rem;
  }
}
@media not screen and (min-width: 768px) {
  .lineup__card.is-focus {
    transform: rotate(5.4deg);
  }
  .lineup__card.is-focus .lineup__image {
    transform: rotate(-5.4deg) scale(1.04);
  }
}
@media screen and (min-width: 768px) {
  .lineup__card:hover, .lineup__card:focus, .lineup__card:active {
    transform: rotate(5.4deg);
  }
  .lineup__card:hover .lineup__image, .lineup__card:focus .lineup__image, .lineup__card:active .lineup__image {
    transform: rotate(-5.4deg) scale(1.04);
  }
}
.lineup__card__1 {
  background-color: #5C4940;
}
.lineup__card__2 {
  background-color: #D59C9B;
}
.lineup__card__3 {
  background-color: #A25366;
}
.lineup__card__4 {
  background-color: #B4A073;
}
.lineup__card__5 {
  background-color: #79BBC0;
}
.lineup__card__6 {
  background-color: #DF8E3B;
}
.lineup__card__7 {
  background-color: #D6A036;
}
.lineup__card__8 {
  background-color: #A68572;
}
.lineup__card__9 {
  background-color: #6D2324;
}
.lineup__en {
  font-size: 2rem;
  font-weight: 700;
  line-height: 170%;
  margin-bottom: 0.12rem;
}
@media screen and (min-width: 768px) {
  .lineup__en {
    font-size: 2.5rem;
    line-height: 200%;
    margin-bottom: 0.2rem;
  }
}
.lineup__image {
  position: relative;
  width: 100%;
  height: 14.4rem;
  margin-bottom: 0.16rem;
  transition: 0.3s ease-in-out;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .lineup__image {
    height: 20.8rem;
    margin-bottom: 0.24rem;
  }
}
.lineup__image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lineup__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.04rem;
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 768px) {
  .lineup__name {
    font-size: 3rem;
    line-height: 160%;
    letter-spacing: 0.06rem;
  }
}
.lineup__intro {
  font-size: 1rem;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.02rem;
}
@media screen and (min-width: 768px) {
  .lineup__intro {
    font-size: 1.5rem;
    letter-spacing: 0.03rem;
  }
}
.lineup__plus {
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  top: 1rem;
  left: auto;
  right: 1rem;
}
@media screen and (min-width: 768px) {
  .lineup__plus {
    width: 3.6rem;
    height: 3.6rem;
    top: 1.6rem;
    right: 1.6rem;
  }
}
.lineup__plus::before, .lineup__plus::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 0.4rem;
  border-radius: 999.9rem;
  background-color: #FFC832;
}
.lineup__plus::after {
  width: 0.4rem;
  height: 100%;
}
.lineup__cross {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  top: 2rem;
  left: auto;
  right: 2rem;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .lineup__cross {
    width: 3.6rem;
    height: 3.6rem;
  }
}
.lineup__cross::before, .lineup__cross::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100%;
  height: 0.4rem;
  border-radius: 999.9rem;
  background-color: #FFC832;
}
.lineup__cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.lineup__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.lineup__modal.is-open {
  display: flex;
}
.lineup__modal.is-visible .lineup__modal-overlay {
  opacity: 1;
}
.lineup__modal.is-visible .lineup__modal-content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.lineup__modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(57, 50, 48, 0.7);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lineup__modal-content {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background-color: #FFF6ED;
  width: 34.2rem;
  height: calc(100% - 4.8rem);
  padding: 3.2rem 0 2.4rem;
  box-sizing: border-box;
  overflow-y: scroll;
  border-radius: 1.6rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media screen and (min-width: 768px) {
  .lineup__modal-content {
    width: 120rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 8rem 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.lineup__modal-image {
  width: 26rem;
  height: auto;
  display: block;
  margin: 0 auto 2.4rem;
  border-radius: 0.4rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .lineup__modal-image {
    width: 53.6rem;
    height: auto;
    margin: 0;
    border-radius: 1.2rem;
  }
}
.lineup__modal-en {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 1.6rem;
}
.lineup__modal-en2 {
  font-size: 2.5rem;
  line-height: 100%;
  margin-bottom: 3.6rem;
}
.lineup__modal-name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .lineup__modal-name {
    font-size: 3rem;
    line-height: 100%;
    letter-spacing: 0.6rem;
    margin-bottom: 0;
  }
}
.lineup__modal-aboutBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 17.6rem;
  margin-bottom: 1.2rem;
}
.lineup__modal-about {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 200%;
  letter-spacing: 0.3rem;
}
.lineup__modal-nutrient {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.4rem;
}
@media screen and (min-width: 768px) {
  .lineup__modal-nutrient {
    margin-bottom: 5.2rem;
  }
}
.lineup__modal-nutrientItem {
  padding: 0 1.6rem;
}
@media screen and (min-width: 768px) {
  .lineup__modal-nutrientItem {
    padding: 0 2.4rem;
  }
}
.lineup__modal-nutrientItem:nth-child(2) {
  border-left: 0.1rem solid #2B2B2B;
  border-right: 0.1rem solid #2B2B2B;
}
.lineup__modal-nutrientHead {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.2rem;
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 768px) {
  .lineup__modal-nutrientHead {
    font-size: 2rem;
    letter-spacing: 0.4rem;
  }
}
.lineup__modal-nutrientBody {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.12rem;
}
@media screen and (min-width: 768px) {
  .lineup__modal-nutrientBody {
    font-size: 2.4rem;
  }
}
.lineup__modal-nutrientBody span {
  font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
  .lineup__modal-nutrientBody span {
    font-size: 3.6rem;
  }
}
.lineup__modal-point {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.2rem;
  margin-bottom: 3.2rem;
}
@media screen and (min-width: 768px) {
  .lineup__modal-point {
    font-size: 1.5rem;
    line-height: 200%;
    letter-spacing: 0.3rem;
  }
}
.lineup__modal-note {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 150%;
}
@media screen and (min-width: 768px) {
  .lineup__modal-note {
    font-size: 1.4rem;
    line-height: 130%;
  }
}

/*---------------------------------------------*/
/*  story                                      */
/*---------------------------------------------*/
.story {
  margin-top: -10rem;
  padding-top: 10rem;
}
@media screen and (min-width: 768px) {
  .story {
    margin-top: -16rem;
    padding-top: 16rem;
  }
}
@media screen and (min-width: 768px) {
  .story .container {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .story h2 {
    margin-bottom: 4.8rem;
  }
}
.story h2 img {
  width: 22rem;
  margin-bottom: 0.8rem;
}
@media screen and (min-width: 768px) {
  .story__logo {
    display: block;
    margin: 0 auto 4.8rem;
    width: 60rem;
  }
}
@media screen and (min-width: 768px) {
  .story__bg {
    padding: 10rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/story.jpg);
    background-size: cover;
    background-position: center center;
  }
}
.story__text {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 200%;
  letter-spacing: 0.04rem;
  margin-bottom: 2.8rem;
  opacity: 0;
  transform: translateY(2rem);
}
@media screen and (min-width: 768px) {
  .story__text {
    color: #FFFFFF;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 4rem;
    transform: translateY(4rem);
  }
}
.story__text.is-show {
  opacity: 1;
  transform: none;
}
.story__text__1 {
  transition: 0.5s ease-in-out;
}
.story__text__2 {
  transition: 0.5s ease-in-out 0.3s;
}
.story__text__3 {
  transition: 0.5s ease-in-out 0.6s;
}
.story__text__4 {
  transition: 0.5s ease-in-out 0.9s;
}
.story__text small {
  vertical-align: super;
  font-weight: 500;
  font-size: 1.2rem;
}
.story__text .copyright {
  vertical-align: initial;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0 0.4rem;
}
.story__note {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 200%;
  margin-top: 5.6rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: 0.5s ease-in-out 1.2s;
}
@media screen and (min-width: 768px) {
  .story__note {
    color: #FFFFFF;
    text-align: center;
    font-size: 1.5rem;
    font-style: normal;
    margin-top: 6rem;
    transform: translateY(4rem);
  }
}
.story__note.is-show {
  opacity: 1;
  transform: none;
}

/*---------------------------------------------*/
/*  operation                                  */
/*---------------------------------------------*/
.operation {
  margin-top: -10rem;
  padding-top: 10rem;
  margin-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  .operation {
    margin-top: -16rem;
    padding-top: 16rem;
  }
}
@media screen and (min-width: 768px) {
  .operation .container {
    width: 82rem;
  }
}
.operation h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.4rem;
  color: #EA5520;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .operation h2 {
    font-size: 3.2rem;
    letter-spacing: 0.8rem;
    margin-bottom: 4rem;
  }
}
.operation h2 span {
  display: inline-block;
  padding: 0.4rem 3.2rem;
  border-radius: 0.8rem;
  border: 0.2rem solid #EA5520;
  background-color: #FFFFFF;
}
@media screen and (min-width: 768px) {
  .operation h2 span {
    display: inline;
    padding: 0;
    border: none;
    background-color: transparent;
  }
}
.operation h2 span::before, .operation h2 span::after {
  content: none;
}
.operation__box {
  padding: 4.2rem 0;
  border-radius: 0.8rem;
  background-color: #FFFFFF;
  box-shadow: 0 0 0.8rem 0 #D9D9D9;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .operation__box {
    border: 0.2rem solid #EA5520;
    padding: 3rem 1.6rem 2.4rem;
    box-shadow: none;
  }
}
@media screen and (min-width: 768px) {
  .operation__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .operation__item {
    width: 28rem;
  }
}
.operation__circle {
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background-color: #EA5520;
  margin: 0 auto 2rem;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .operation__circle {
    width: 16rem;
    height: 16rem;
  }
}
.operation__circle p {
  color: #FFFFFF;
  font-size: 3.2rem;
  font-weight: 500;
  text-indent: 0.6rem;
  letter-spacing: 0.6rem;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  word-break: keep-all;
}
@media screen and (min-width: 768px) {
  .operation__circle p {
    font-size: 3.2rem;
    text-indent: 0.4rem;
    letter-spacing: 0.4rem;
  }
}
.operation__text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0.2rem;
}
@media screen and (min-width: 768px) {
  .operation__text {
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
  }
}
.operation__icon {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translateX(-50%);
}
.operation__icon1 {
  width: 3.2rem;
}
@media screen and (min-width: 768px) {
  .operation__icon1 {
    width: 2.6rem;
  }
}
.operation__icon2 {
  width: 8rem;
}
@media screen and (min-width: 768px) {
  .operation__icon2 {
    width: 6.2rem;
  }
}
.operation__icon3 {
  width: 3rem;
}
@media screen and (min-width: 768px) {
  .operation__icon3 {
    width: 2.4rem;
  }
}
.operation__icon4 {
  width: 6.8rem;
}
@media screen and (min-width: 768px) {
  .operation__icon4 {
    width: 5.4rem;
  }
}
.operation__triangle {
  margin: 2rem 0;
}
@media screen and (min-width: 768px) {
  .operation__triangle {
    width: 3.2rem;
    transform: rotate(-90deg);
    margin: 0 0 6.4rem;
  }
}

/*---------------------------------------------*/
/*  faq                                        */
/*---------------------------------------------*/
.faq {
  margin-top: -10rem;
  padding-top: 10rem;
  margin-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  .faq {
    margin-top: -16rem;
    padding-top: 16rem;
  }
}
@media screen and (min-width: 768px) {
  .faq .container {
    width: 110rem;
  }
}
.faq h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
  color: #EA5520;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .faq h2 {
    font-size: 3.2rem;
    letter-spacing: 0.8rem;
    margin-bottom: 4rem;
  }
}
.faq h2 span {
  display: inline-block;
  padding: 0.4rem 3.2rem;
  border-radius: 0.8rem;
  border: 0.2rem solid #EA5520;
  background-color: #FFFFFF;
}
@media screen and (min-width: 768px) {
  .faq h2 span {
    display: inline;
    padding: 0;
    border: none;
    background-color: transparent;
  }
}
.faq h2 span::before, .faq h2 span::after {
  content: none;
}
.faq__item {
  margin-bottom: 2.4rem;
}
.faq__item:last-child {
  margin-bottom: 0;
}
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.8rem;
  background-color: #EA5520;
  box-shadow: 0 0.6rem 0.6rem rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
  padding: 1.2rem 1.6rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .faq__question {
    padding: 2rem 4.8rem;
  }
}
.faq__q {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.42rem;
  font-family: Arial, "Noto Sans JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.faq__q-text {
  width: 28.4rem;
  font-size: 1.3rem;
  line-height: 1.4em;
  letter-spacing: 0.26rem;
  padding-left: 0.8rem;
}
@media screen and (min-width: 768px) {
  .faq__q-text {
    width: 88rem;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.36rem;
  }
}
.faq__triangle {
  width: 2.4rem;
}
.faq .open .faq__triangle {
  transform: rotate(180deg);
}
.faq__answer {
  background-color: #FFFFFF;
  border: 0.2rem solid #EA5520;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  transform: translateY(-1.2rem);
}
.faq__answer span {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.4rem 1.6rem 2rem;
}
@media screen and (min-width: 768px) {
  .faq__answer span {
    padding: 3.2rem 4.8rem 2rem;
  }
}
.faq__a {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.56rem;
  color: #EA5520;
  font-family: Arial, "Noto Sans JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.faq__a-text {
  width: 32rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: 0.28rem;
  margin: 0.8rem 0;
  padding-left: 0.8rem;
}
@media screen and (min-width: 768px) {
  .faq__a-text {
    width: 93.4rem;
    padding: 0;
  }
}
.faq__a-text p {
  margin-bottom: 2rem;
}
.faq__a-text a {
  font-weight: 700;
  color: #EA5520;
  text-decoration: underline;
}

/*---------------------------------------------*/
/*  footer                                     */
/*---------------------------------------------*/
.footer {
  padding-bottom: 8rem;
}
.footer__main {
  background-color: #EA5520;
  padding: 4rem 0;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .footer__container {
    width: 108rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.footer__container img {
  width: 20rem;
  height: auto;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .footer__container img {
    margin-right: 3.6rem;
    margin-bottom: 0;
  }
}
.footer__container p {
  color: #FFFFFF;
}
.footer__address {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.8rem;
  margin-bottom: 2.4rem;
}
@media screen and (min-width: 768px) {
  .footer__address {
    margin: 0;
  }
}
.footer__note {
  font-size: 1.2rem;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .footer__note {
    margin-left: auto;
  }
}
.footer__note .spacing {
  letter-spacing: -0.2em;
}
.footer__copy {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
}