@charset "UTF-8";
.slideAnimeUpDown {
  width: 100%; }

.slideAnimeDownUp {
  width: 100%; }

/*
---------------------------------------------------------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------------------------------------------------------
*/
@media (min-width: 768px) {
  .page-upper .page-upper-in .header-hito {
    top: -120px;
    width: 45%; } }
@media (min-width: 1024px) {
  .page-upper .page-upper-in .header-hito {
    top: -10%; } }
.page-upper .page-upper-in .contents .rex-zu {
  position: relative;
  right: 10%;
  margin: 20px 0 0 auto;
  width: 80%;
  z-index: 10;
  padding-bottom: 100px; }
  .page-upper .page-upper-in .contents .rex-zu ul li {
    position: absolute;
    top: 0;
    left: 0; }
  .page-upper .page-upper-in .contents .rex-zu .logo-en {
    position: relative;
    z-index: 10; }
  @media (min-width: 768px) {
    .page-upper .page-upper-in .contents .rex-zu {
      margin: -80px 0 0 auto;
      width: 60%;
      padding-bottom: 180px; } }
  @media (min-width: 1024px) {
    .page-upper .page-upper-in .contents .rex-zu {
      right: 2%;
      margin: -300px 0 0 auto;
      width: 50%;
      padding-bottom: 400px; } }
  @media (min-width: 1250px) {
    .page-upper .page-upper-in .contents .rex-zu {
      right: 10%;
      margin: -200px 0 0 auto; } }
.page-upper .page-upper-in .contents .syaoku {
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 80%; }
  @media (min-width: 1024px) {
    .page-upper .page-upper-in .contents .syaoku {
      width: 70%;
      bottom: 24%; } }
  @media (min-width: 1250px) {
    .page-upper .page-upper-in .contents .syaoku {
      width: 57%; } }
.page-upper .page-upper-in .hitohito {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%; }
  @media (min-width: 768px) {
    .page-upper .page-upper-in .hitohito {
      width: 45%; } }
  @media (min-width: 1024px) {
    .page-upper .page-upper-in .hitohito {
      width: 35%; } }

@media (min-width: 1024px) {
  #wholesale {
    display: flex;
    margin: -300px 0 0 0; } }
#wholesale .left-back {
  display: none; }
  @media (min-width: 1024px) {
    #wholesale .left-back {
      display: block;
      width: 30%; } }
@media (min-width: 1024px) {
  #wholesale .right-contents {
    width: 70%;
    padding-left: 3%;
    position: relative; } }
@media (min-width: 1250px) {
  #wholesale .right-contents {
    padding-left: 6.5%; } }
#wholesale .right-contents .sub-title {
  display: flex; }
  #wholesale .right-contents .sub-title .sp-photo {
    width: 30%; }
    @media (min-width: 1024px) {
      #wholesale .right-contents .sub-title .sp-photo {
        display: none; } }
  #wholesale .right-contents .sub-title h2 {
    font-size: 9.5vw;
    line-height: 1.4em;
    margin: 20px 0 0 20px; }
    @media (min-width: 768px) {
      #wholesale .right-contents .sub-title h2 {
        font-size: 8vw;
        margin: 10% 0 0 5%; } }
    @media (min-width: 1024px) {
      #wholesale .right-contents .sub-title h2 {
        font-size: 4.375em;
        margin: 0; } }
#wholesale .right-contents .right-contents-in {
  width: 90%;
  margin: auto; }
  @media (min-width: 1024px) {
    #wholesale .right-contents .right-contents-in {
      width: 95%;
      margin: 0 auto 0 0; } }
  @media (min-width: 1250px) {
    #wholesale .right-contents .right-contents-in {
      width: 80%; } }
  #wholesale .right-contents .right-contents-in p {
    font-size: 1.125em;
    line-height: 1.8em;
    text-align: justify;
    margin: 20px 0 0 0; }
    @media (min-width: 1250px) {
      #wholesale .right-contents .right-contents-in p {
        font-size: 1.5em;
        margin: 50px 0 0 0; } }
  #wholesale .right-contents .right-contents-in .maker-logo {
    margin: 3% 0 0 0; }
    @media (min-width: 1250px) {
      #wholesale .right-contents .right-contents-in .maker-logo {
        margin: 6% 0 0 0; } }
    #wholesale .right-contents .right-contents-in .maker-logo ul {
      display: flex;
      margin: 20px 0 0 0; }
      #wholesale .right-contents .right-contents-in .maker-logo ul li img {
        width: 80%; }

/*
---------------------------------------------------------------------------------------------------------------------
写真自動横スクロール
---------------------------------------------------------------------------------------------------------------------
*/
#okashi-loop {
  width: 100%;
  margin: 50px 0 0 0; }
  @media (min-width: 1024px) {
    #okashi-loop {
      margin: -20px 0 0 0; } }
  @media (min-width: 1250px) {
    #okashi-loop {
      margin: -5% 0 0 0; } }
  #okashi-loop .scroll-infinity-wrap {
    display: flex;
    overflow: hidden;
    margin-bottom: 10px; }
    @media (min-width: 1024px) {
      #okashi-loop .scroll-infinity-wrap {
        margin-bottom: 20px; } }
    #okashi-loop .scroll-infinity-wrap ul {
      display: flex;
      list-style: none;
      padding: 0; }
      #okashi-loop .scroll-infinity-wrap ul.pper-row {
        animation: infinity-scroll-left 30s infinite linear 0.5s both; }
        @media (min-width: 1024px) {
          #okashi-loop .scroll-infinity-wrap ul.pper-row {
            animation: infinity-scroll-left 50s infinite linear 0.5s both; } }
      #okashi-loop .scroll-infinity-wrap ul li {
        margin-right: 15px; }
        @media (min-width: 768px) {
          #okashi-loop .scroll-infinity-wrap ul li {
            margin-right: 20px; } }
        @media (min-width: 1450px) {
          #okashi-loop .scroll-infinity-wrap ul li {
            margin-right: 30px; } }
        #okashi-loop .scroll-infinity-wrap ul li img {
          width: auto;
          height: 100px; }
          @media (min-width: 768px) {
            #okashi-loop .scroll-infinity-wrap ul li img {
              height: 150px; } }
          @media (min-width: 1450px) {
            #okashi-loop .scroll-infinity-wrap ul li img {
              height: 250px; } }
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
  #okashi-loop p {
    font-size: 0.75em;
    line-height: 1.6em;
    text-align: right;
    padding: 0 5%;
    margin-top: 30px; }
    @media (min-width: 1024px) {
      #okashi-loop p {
        font-size: 0.85em; } }

#planning {
  padding: 100px 0 0; }

#abroad {
  padding: 100px 0 0; }

#retail {
  padding: 100px 0 0; }

#ecommerce {
  padding: 100px 0 0; }

#eating-drinking {
  padding: 100px 0 0;
  margin-bottom: 100px; }

.card04 {
  overflow: hidden;
  position: relative;
  z-index: 10; }
  .card04 .swiper {
    padding-left: 3%; }
    @media (min-width: 768px) {
      .card04 .swiper {
        padding-left: 2%; } }
    .card04 .swiper .swiper-slide {
      width: 250px;
      padding: 0; }
      @media (min-width: 768px) {
        .card04 .swiper .swiper-slide {
          width: 300px; } }
      @media (min-width: 1250px) {
        .card04 .swiper .swiper-slide {
          width: 440px; } }

.plan-contents {
  max-width: 1200px;
  margin: 40px auto 0;
  width: 90%;
  padding-bottom: 40px;
  border-bottom: 1px solid #CBCBCB; }
  @media (min-width: 1024px) {
    .plan-contents {
      display: flex; } }
  @media (min-width: 1250px) {
    .plan-contents {
      margin: 80px auto 0;
      padding-bottom: 90px; } }
  @media (min-width: 1024px) {
    .plan-contents .plan-name {
      width: 40%; } }
  .plan-contents .plan-name .plan-name-in {
    display: flex;
    align-items: center; }
    .plan-contents .plan-name .plan-name-in img {
      width: 40px;
      margin-right: 10px; }
      @media (min-width: 1024px) {
        .plan-contents .plan-name .plan-name-in img {
          width: 50px; } }
      @media (min-width: 1250px) {
        .plan-contents .plan-name .plan-name-in img {
          width: 68px; } }
    .plan-contents .plan-name .plan-name-in h3 {
      font-size: 1.5em;
      line-height: 1.0em;
      font-feature-settings: "palt";
      letter-spacing: 0.04em; }
      @media (min-width: 1024px) {
        .plan-contents .plan-name .plan-name-in h3 {
          font-size: 2em; } }
      @media (min-width: 1250px) {
        .plan-contents .plan-name .plan-name-in h3 {
          font-size: 2.25em; } }
  .plan-contents .plan-name h5 {
    font-size: 1.0em;
    line-height: 1.4em;
    color: #17ADAA;
    margin: 10px 0 30px; }
    @media (min-width: 1024px) {
      .plan-contents .plan-name h5 {
        font-size: 1.25em; } }
  @media (min-width: 1024px) {
    .plan-contents .plan-text {
      width: 60%; } }
  .plan-contents .plan-text h4 {
    font-size: 1.25em;
    line-height: 1.4em;
    color: #17ADAA;
    margin-top: 10px; }
    @media (min-width: 1024px) {
      .plan-contents .plan-text h4 {
        font-size: 1.5em;
        margin-top: 0; } }
  .plan-contents .plan-text p {
    font-size: 1.0em;
    line-height: 1.8em;
    text-align: justify;
    margin: 20px auto 20px; }
    @media (min-width: 1024px) {
      .plan-contents .plan-text p {
        font-size: 1.125em;
        margin: 20px auto 40px; } }
    .plan-contents .plan-text p a {
      color: #17ADAA;
      text-decoration: underline;
      transition: .5s; }
      .plan-contents .plan-text p a:hover {
        opacity: 0.8; }
  .plan-contents .plan-text .banner {
    margin: 20px 0 0 0; }
    .plan-contents .plan-text .banner ul {
      display: flex; }
      .plan-contents .plan-text .banner ul li {
        width: 50%; }
        .plan-contents .plan-text .banner ul li:nth-child(1) {
          padding-right: 10px; }
        .plan-contents .plan-text .banner ul li:nth-child(2) {
          padding-left: 10px; }
        .plan-contents .plan-text .banner ul li a img {
          transition: .5s; }
          .plan-contents .plan-text .banner ul li a img:hover {
            opacity: 0.8; }

#page-banner .b-business {
  display: none; }
#page-banner .btn-left {
  display: none; }