@charset "UTF-8";

/*  BASE  */

:root {
  --color-main: #BF0000;
  --color-main-rgb: 191, 0, 0;
  --line-height-default: 1.5;
  --margin-inner: 0 auto;
  --max-width-inner: 94%;
  --padding-inner: 72px 0;
}

img {
  image-rendering: -webkit-optimize-contrast;
  height: auto;
  max-width: 100%;
}


/*  COMMON  */

.btn {
  border-radius: 100vh;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  max-width: 100%;
  padding: 16px 34px;
  text-align: center;
  transition: .3s ease-in-out;
}

.btn:hover {
  transition: .3s ease-in-out;
}

.btn-l {
  width: 300px;
}

.btn-fill {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
}

.btn-fill:hover {
  background-color: #fff;
  color: var(--color-main);
}

.btn-white {
  background-color: #fff;
  border-color: var(--color-main);
  color: var(--color-main);
}

.btn-white:hover {
  background-color: var(--color-main);
  color: #fff;
}

.c-color-main {
  color: var(--color-main);
}

.c-bold {
  font-weight: 700;
}

.c-section {
  position: relative;
}

.c-section-inner {
  margin: var(--margin-inner);
  max-width: var(--max-width-inner);
  padding: var(--padding-inner);
}

.c-section-header {
  background: transparent;
  box-shadow: none;
  margin-bottom: 32px;
  padding: 0;
  position: static;
  text-align: center;
}

.c-section-title {
  font-size: 42px;
  font-weight: 700;
}

.c-section-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-10px);
  transition: all .6s;
}

.c-section-title span.active {
  opacity: 1;
  transform: translateY(0);
}

.c-section-lead {
  font-size: 14px;
  margin-top: 1.5em;
}

.is-tb-show {
  display: none;
}


/*  HEADER  */

header {
  background-color: #FFF3F2;
  box-shadow: none;
}

header ul li a::after {
  background-color: var(--color-main);
}

.nav_btn_dl a {
  color: var(--color-main);
  border-color: var(--color-main);
}

.nav_btn_dl a:hover {
  background-color: var(--color-main);
}

.nav_btn a {
  background-color: var(--color-main);
  border-color: var(--color-main);
}

.nav_btn a:hover {
  color: var(--color-main);
  border-color: var(--color-main);
}


/*  CONTENTS  */

.wrapper {
  padding-top: 94px;
}

#main {
  line-height: var(--line-height-default);
}

#mainvisual {
  background-color: #FFF3F2;
}

.mainvisual-inner {
  display: flex;
  align-items: center;
  column-gap: .5em;
  justify-content: space-between;
  margin: var(--margin-inner);
  max-width: var(--max-width-inner);
  padding: 48px 0;
  width: 1088px;
}

.mainvisual-content {
  flex: 1;
  padding: 56px 0;
}

.mainvisual-subtitle {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: .5em;
}

.mainvisual-title {
  color: var(--color-main);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .25em;
}

.mainvisual-tagline {
  font-size: 24px;
  font-weight: 600;
}

.mainvisual-btnarea {
  display: flex;
  column-gap: 1.5em;
  flex-wrap: wrap;
  row-gap: 1.5em;
  margin-top: 56px;
}

.rakuten-about-inner {
  padding-bottom: 64px;
  position: relative;
  width: 1020px;
  z-index: 2;
}

.rakuten-about-title-en {
  color: #FFF3F2;
  font-size: 180px;
  font-weight: 700;
  line-height: 1;
  margin: auto;
  max-width: 100%;
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  z-index: 1;
  width: 1300px;
}

.rakuten-about-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 1em;
}

.rakuten-about-tagline {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: .75em;
}

.rakuten-about-tagline .small {
  font-size: .64em;
}


.rakuten-about-text {
  font-size: 20px;
  font-weight: 500;
}

.rakuten-about-integration-container {
  padding-bottom: 72px;
}

.rakuten-about-integration-container a {
  display: block;
  margin: 0 15px;
}

.rakuten-cando-inner {
  width: 890px;
}

.rakuten-cando-box {
  display: flex;
  align-items: center;
  column-gap: min(9vw,72px);
  justify-content: space-between;
  margin-bottom: 16px;
}

.rakuten-cando-container .rakuten-cando-box:last-of-type {
  margin-bottom: 0;
}


.rakuten-cando-container .rakuten-cando-box:nth-of-type(even){
  flex-direction: row-reverse;
}

.rakuten-cando-content {
  flex: 1;
}

.rakuten-cando-order {
  color: rgba(var(--color-main-rgb),.1);
  font-size: 94px;
  font-weight: 700;
  line-height: 1.25;
}

.rakuten-cando-title {
  color: var(--color-main);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: .5em;
}

.rakuten-cando-text {
  font-size: 18px;
}

.rakuten-download {
  display: flex;
  width: 100%;
}

.rakuten-download-figure {
  background-color: var(--color-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 80px 20px;
  text-align: center;
}

.rakuten-download-content {
  background-color: #FFEFEE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 80px min(4vw,60px);
}

.rakuten-download-subtitle {
  font-size: clamp(18px,2vw,24px);
  font-weight: 600;
  margin-bottom: .5em;
}

.rakuten-download-title {
  color: var(--color-main);
  font-size: clamp(32px,4.6vw,54px);
  font-weight: 600;
  line-height: 1.4;
}

.rakuten-download-btnarea {
  margin-top: 1.5em;
}

.rakuten-case-inner {
  width: 1020px;
}

.rakuten-case-container1 {
  display: flex;
  column-gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 16px;
}

#rakuten-use .rakuten-case-container1 {
  row-gap: 60px;
}

.rakuten-case-container2 {
  display: flex;
  flex-direction: column;
  column-gap: 16px;
  row-gap: 16px;
}

.js-morelist a:nth-of-type(n+7) {
  display: none;
}

.js-morelist a.is-show:nth-of-type(n+7) {
  display: flex;
  transition: .4s;
}

.js-moreclose {
  display: none;
}

.rakuten-case-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow:0 2px 8px rgba(128,0,0,.2);
  color: inherit;
  display: flex;
  align-items: center;
  column-gap: 1em;
  max-width: 100%;
  padding: 8px 16px 8px 8px;
  transition: .4s;
  width: 502px;
}

.rakuten-case-item:hover {
  box-shadow:0 2px 16px rgba(128,0,0,.2);
  transform: scale(1.02);
  transition: .4s;
}

.rakuten-case-item img {
  height: auto;
  width: 120px;
}

.rakuten-case-item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
}

.rakuten-case-btnarea {
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

.rakuten-case-section-title {
  display: flex;
  align-items: center;
  column-gap: 16px;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: .5em;
}

#rakuten-voice {
  background-color: #FFF7F7;
}

.rakuten-voice-inner {
  width: 962px;
}

.rakuten-voice-container {
  display: flex;
  justify-content: space-between;
}

.rakuten-voice-box {
  background: url(../images/integration/rakutenichiba-rms/icon_double-quotation.svg) no-repeat top 32px left 32px, #fff;
  border-radius: 10px;
  box-shadow:0 2px 8px rgba(128,0,0,.2);
  max-width: 32%;
  padding: 60px 32px 100px;
  position: relative;
  width: 304px;
}

.rakuten-voice-box-text {
  font-weight: 700;
  line-height: 1.75;
  margin-bottom: 1.5em;
}

.rakuten-voice-user {
  display: flex;
  justify-content: space-between;
  padding: 0 32px;
  position: absolute;
  bottom: 32px;
  left: 0;
  width: 100%;
}

.rakuten-voice-user-info {
  font-size: 12px;
  line-height: 1.75;
}

.rakuten-faq-inner {
  width: 748px;
}

.rakuten-faq-list-item {
  border-top: 1px solid #D3D3D3;
  padding: 32px 60px 32px 0;
}

.rakuten-faq-question {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 1.5em;
}

.rakuten-faq-answer {
  color: #8A8A8A;
  font-size: 14px;
}

.rakuten-faq-answer a:not(.btn-s) {
  color: #036BE0;
}

.rakuten-faq-answer a:not(.btn-s):hover {
  text-decoration: underline;
}

.rakuten-faq-answer-btncontainer {
  margin-top: 1em;
}

.rakuten-utilize-inner {
  width: 962px;
}

.rakuten-utilize-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 24px;
}

.rakuten-utilize-box {
  border-radius: 20px;
  box-shadow: 0 2px 18px rgba(0,0,0,.2);
  color: #fff;
  display: block;
  max-width: 49%;
  padding: 24px;
  transition: .4s;
  width: 468px;
}

.rakuten-utilize-box:hover {
  transform: scale(1.02);
  transition: .4s;
}

.rakuten-utilize-box.nextengine {
  background-color: #0099FF;
}

.rakuten-utilize-box.rakuten {
  background-color: #BF0000;
}

.rakuten-utilize-box.yahoo {
  background-color: #FF0033;
}

.rakuten-utilize-box.amazonsc {
  background-color: #FF9900;
}

.rakuten-utilize-box.amazonbc {
  background-color: #333E48;
}

.rakuten-utilize-box.shopify {
  background-color: #96BF48;
}

.rakuten-utilize-box-logo {
  margin-bottom: 1em;
}

.rakuten-utilize-box-name {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: .5em;
}

.rakuten-utilize-box-text {
  font-weight: 700;
}

.rakuten-utilize-box-link {
  font-weight: 700;
  margin-top: 1em;
  text-align: right;
}

.rakuten-utilize-box-link span {
  color: #fff;
  display: inline-block;
  vertical-align: middle;
}

.rakuten-utilize-box-link span::after {
  content: url(../images/integration/rakutenichiba-rms/icon_arrow-right_wh.svg);
  display: inline-block;
  margin-left: 1em;
}

#rakuten-integration {
  background-color: #FFF7F7;
}

.rakuten-integration-inner {
  width: 812px;
}

.rakuten-integration-list {
  display: flex;
  column-gap: 16px;
  flex-wrap: wrap;
  row-gap: 16px;
}

.rakuten-integration-list-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(128,0,0,.2);
  padding: 16px;
  text-align: center;
  width: 120px;
}

.rakuten-integration-list-item-logo {
  margin-bottom: .5em;
}

.rakuten-integration-list-item-name {
  font-size: 9px;
}

#rakuten-cta {
  background-color: var(--color-main);
}

.rakuten-cta-inner {
  margin: auto;
  max-width: var(--max-width-inner);
  width: 1280px;
}

.rakuten-cta-container {
  display: flex;
  align-items: center;
}

.rakuten-cta-content {
  color: #fff;
  flex: 1;
  padding: 80px 60px;
}

.rakuten-cta-subtitle {
  font-size: clamp(20px,1.9vw,24px);
  font-weight: 600;
  margin-bottom: .5em;
}

.rakuten-cta-title {
  font-size: clamp(44px,4.2vw,54px);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 24px;
}

.rakuten-cta-btnarea {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  width: 100%;
}

.rakuten-cta-btnarea .btn {
  border-color: #fff;
  display: block;
}

.rakuten-cta-figure {
  flex: 1;
  padding: 36px;
  text-align: center;
}

footer {
  background: var(--color-main);
  padding: 32px 30px 12px;
}


/*----------------------------*/
/***    Responsive style    ***/
/*----------------------------*/

@media screen and (max-width: 1000px) {
  header {
    padding: 16px;
  }
  #nav_open {
    background: none;
    top: 10px;
  }
  #nav_open span {
    background: var(--color-main);
  }
  #nav_open.show span {
    background-color: var(--color-main);
  }
  header ul:not(.dropDown__list) {
    background: var(--color-main);
  }
  .nav_btn_dl a {
    color: #fff;
  }
  .wrapper {
    padding-top: 60px;
  }
}

@media screen and (min-width: 751px) and (max-width: 1080px) {
  .is-tb-show {
    display: block;
  }
  .c-section-title {
    font-size: clamp(34px,3.9vw,42px);
  }
  .mainvisual-content {
    flex: auto;
  }
  .mainvisual-title {
    font-size: clamp(36px,3vw,54px);
  }
  .rakuten-about-tagline {
    font-size: clamp(34px,4.7vw,56px);
  }
  .rakuten-cando-content {
    flex: auto;
  }
  .rakuten-cta-container {
    display: block;
  }
  .rakuten-cta-subtitle {
    font-size: 24px;
  }
  .rakuten-cta-title {
    font-size: 54px;
  }
}

@media screen and (min-width: 751px) and (max-width: 855px) {
  .rakuten-integration-list {
    justify-content: center;
  }
}

@media screen and (max-width: 750px) {

  /*  BASE  */

  :root {
    --max-width-inner: inherit;
    --padding-inner: 56px min(7vw,32px);
  }


  /*  COMMON  */

  .btn {
    width: 100%;
  }

  .c-section-header {
    margin-bottom: 24px;
  }

  .c-section-inner {
    width: 100%;
  }

  .c-section-title {
    font-size: clamp(26px,7.5vw,32px);
  }

  .is-tb-show {
    display: none;
  }


  /*  CONTENTS  */

  .mainvisual-inner {
    display: block;
    padding: 56px min(7vw,32px) 222px;
    position: relative;
    width: 100%;
  }

  .mainvisual-content {
    padding: 0;
  }

  .mainvisual-subtitle {
    font-size: clamp(14px,4.2vw,18px);
  }

  .mainvisual-title {
    font-size: clamp(34px,9.5vw,41px);
    margin-bottom: .5em;
  }

  .mainvisual-tagline {
    font-size: 18px;
  }

  .mainvisual-btnarea {
    flex-direction: column;
    row-gap: 16px;
    margin-top: 0;
    padding: 0 min(7vw,32px);
    position: absolute;
    bottom: 56px;
    left: 0;
    width: 100%;
  }

  .mainvisual-image {
    margin-top: 32px;
    text-align: center;
  }

  .rakuten-about-inner {
    padding-bottom: 24px;
    width: 100%;
  }

  .rakuten-about-title-en {
    font-size: 80px;
    top: -11px;
    width: 100%;
  }

  .rakuten-about-title {
    font-size: 18px;
  }

  .rakuten-about-tagline {
    font-size: clamp(34px,9.2vw,40px);
  }

  .rakuten-about-tagline .small {
    font-size: .7em;
  }

  .rakuten-about-text {
    font-size: 16px;
  }

  .rakuten-about-integration-container {
    padding-bottom: 56px;
  }

  .rakuten-about-integration-container a {
    margin: 0 10px;
  }

  .rakuten-cando-inner {
    width: 100%;
  }

  .rakuten-cando-box {
    display: block;
    margin-bottom: 24px;
  }

  .rakuten-cando-content {
    margin-bottom: 24px;
  }

  .rakuten-cando-title {
    font-size: clamp(30px,7vw,36px);
  }

  .rakuten-cando-figure {
    text-align: center;
  }

  .rakuten-cando-figure img {
    height: auto;
    width: 296px;
  }

  .rakuten-download {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .rakuten-download-figure {
    display: block;
    order: 2;
    padding: var(--padding-inner);
    width: 100%;
  }

  .rakuten-download-content {
    display: block;
    order: 1;
    padding: var(--padding-inner);
    width: 100%;
  }

  .rakuten-download-subtitle {
    font-size: clamp(18px,5.6vw,24px);
  }

  .rakuten-download-title {
    font-size: clamp(35px,9.4vw,40px);
  }

  .rakuten-download-btnarea {
    margin-top: 1.5em;
  }

  .rakuten-case-inner {
    width: 100%;
  }

  #rakuten-use .rakuten-case-container1 {
    row-gap: 32px;
  }

  .rakuten-case-item {
    width: 100%;
  }

  .rakuten-case-btnarea {
    margin-top: 8px;
  }

  .rakuten-case-section-title {
    font-size: 26px;
  }

  .rakuten-voice-inner {
    width: 100%;
  }

  .rakuten-voice-container {
    flex-wrap: wrap;
    row-gap: 24px;
  }

  .rakuten-voice-box {
    background-position: top 24px left 24px, 100% 100%;
    max-width: inherit;
    padding: 50px 24px 24px;
    width: 100%;
  }

  .rakuten-voice-user {
    padding: 0;
    position: static;
  }

  .rakuten-voice-user-info {
    font-size: 12px;
    line-height: 1.75;
  }

  .rakuten-faq-inner {
    width: 100%;
  }

  .rakuten-faq-list-item {
    padding: 32px 0;
  }

  .rakuten-faq-question {
    margin-bottom: 1em;
  }

  .rakuten-faq-answer {
    font-size: 16px;
  }

  .rakuten-faq-answer-btncontainer {
    text-align: center;
  }

  .rakuten-utilize-inner {
    width: 100%;
  }

  .rakuten-utilize-container {
    row-gap: 16px;
  }

  .rakuten-utilize-box {
    max-width: inherit;
    width: 100%;
  }

  .rakuten-utilize-box-name {
    font-size: 22px;
  }

  .rakuten-utilize-box-text {
    font-size: 14px;
  }

  .rakuten-integration-inner {
    width: 100%;
  }

  .rakuten-integration-list {
    column-gap: 3.5%;
    row-gap: 14px;
  }

  .rakuten-integration-list-item {
    width: 31%;
  }

  .rakuten-integration-swipe {
    color: var(--color-main);
    font-size: 11px;
    font-weight: 700;
  }

  .rakuten-cta-inner {
    width: 100%;
  }

  .rakuten-cta-container {
    display: block;
  }

  .rakuten-cta-content {
    padding: var(--padding-inner);
  }

  .rakuten-cta-subtitle {
    font-size: clamp(20px,5.6vw,24px);
  }

  .rakuten-cta-title {
    font-size: clamp(34px,8.8vw,38px);
  }

  .rakuten-cta-figure {
    padding: 36px 24px;
  }

  footer .footer__link {
    flex-direction: column;
    row-gap: .75em;
  }

  footer .footer__link p {
    margin-bottom: 0;
  }

  footer small {
    margin-top: 40px;
    text-align: left;
  }

}