@charset "UTF-8";
/* basic layout */
/* 全体の設定
---------------------------------------------------------------------------*/
/* 基本設定
---------------------------------------------------------------------------*/
/* responsive */
/* サイズ */
/* flexbox */
/* フォント */
/* regular: 400, medium: 500, semibold: 600, bold: 700 */
/* regular: 400, medium: 500, bold: 700 */
/* regular: 400, medium: 500, semibold: 600, bold: 700 */
/* regular: 400 */
/*@mixin font-deco {
	font-family: "Fuggles", cursive;
	font-weight: 400;
	font-style: normal;
}*/
/* 色 */
/* グラデ背景色 */
/* 中央揃え */
/* objectfit */
/* ホバーアクション */
/* 角丸 */
/* ボタン */
/* ボタンの中のspan */
/* フォントサイズ */
/* 縦書き */
/* 内径 */
/* intr
---------------------------------------------------------------------------*/
.intr {
  position: relative;
  width: 845px;
  margin: 0 auto;
  padding-bottom: 128px; }
  @media screen and (max-width: 1300px) {
    .intr {
      padding-bottom: 9.8461538462vw; } }
  @media screen and (max-width: 480px) {
    .intr {
      width: 88vw;
      padding-bottom: 34.1333333333vw; } }
  .intr::before, .intr::after {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }
  .intr::before {
    width: 238px;
    height: 269px;
    left: -256px;
    top: 136px;
    background-image: url(../img/retail/intr-bg01.png); }
    @media screen and (max-width: 1300px) {
      .intr::before {
        width: 18.3076923077vw;
        height: 20.6923076923vw;
        left: -19.6923076923vw;
        top: 10.4615384615vw; } }
    @media screen and (max-width: 480px) {
      .intr::before {
        width: 63.4666666667vw;
        height: 71.7333333333vw;
        left: -35vw;
        top: -20vw; } }
  .intr::after {
    width: 306px;
    height: 430px;
    top: 185px;
    right: -316px;
    background-image: url(../img/retail/intr-bg02.png); }
    @media screen and (max-width: 1300px) {
      .intr::after {
        width: 15.8461538462vw;
        height: 33.0769230769vw;
        top: 14.2307692308vw;
        right: -24.3076923077vw; } }
    @media screen and (max-width: 480px) {
      .intr::after {
        width: 54.9333333333vw;
        height: 114.6666666667vw;
        top: 90vw;
        right: -14vw; } }
  .intr .ttl-ja {
    margin-top: 0.5em; }
  .intr-desc {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .01em;
    text-align: center;
    margin-bottom: 48px; }
    @media screen and (max-width: 1300px) {
      .intr-desc {
        font-size: 1.2307692308vw; } }
    @media screen and (max-width: 480px) {
      .intr-desc {
        font-size: 4.2666666667vw; } }
    @media screen and (max-width: 1300px) {
      .intr-desc {
        margin-bottom: 3.6923076923vw; } }
    @media screen and (max-width: 480px) {
      .intr-desc {
        text-align: left;
        margin-bottom: 12.8vw; } }
  @media screen and (max-width: 480px) {
    .intr-img img {
      width: 100%;
      height: 50vw;
      object-fit: cover;
      object-position: center;
      font-family: "object-fit: cover; object-position: center;"; } }

/* case
---------------------------------------------------------------------------*/
.case {
  position: relative;
  width: 100%;
  background: linear-gradient(to bottom, #E8F6F3, #DFF4F7);
  margin-bottom: 120px; }
  @media screen and (max-width: 1300px) {
    .case {
      margin-bottom: 9.2307692308vw; } }
  @media screen and (max-width: 480px) {
    .case {
      margin-bottom: 32vw; } }
  .case::before, .case::after {
    position: absolute;
    content: "";
    background-size: 100% 100%;
    width: 100%;
    height: 90px;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (max-width: 1300px) {
      .case::before, .case::after {
        height: 6.9230769231vw; } }
  .case::before {
    background-image: url(../img/retail/case-bg-hd.png);
    top: -89px; }
    @media screen and (max-width: 1300px) {
      .case::before {
        top: -6.8461538462vw; } }
  .case::after {
    background-image: url(../img/retail/case-bg-ft.png);
    bottom: -89px; }
    @media screen and (max-width: 1300px) {
      .case::after {
        bottom: -6.8461538462vw; } }
  .case-wrap {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 0; }
    @media screen and (max-width: 1300px) {
      .case-wrap {
        width: 84.6153846154vw;
        padding: 3.8461538462vw 0; } }
    @media screen and (max-width: 480px) {
      .case-wrap {
        width: 88vw;
        padding: 13.3333333333vw 0; } }
  .case-ttl {
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #2E919F;
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px; }
    @media screen and (max-width: 1300px) {
      .case-ttl {
        font-size: 1.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .case-ttl {
        font-size: 6.4vw; } }
    @media screen and (max-width: 1300px) {
      .case-ttl {
        margin-bottom: 0.7692307692vw; } }
    @media screen and (max-width: 480px) {
      .case-ttl {
        margin-bottom: 2.6666666667vw; } }
  .case-catch {
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 28px; }
    @media screen and (max-width: 1300px) {
      .case-catch {
        font-size: 2.4615384615vw; } }
    @media screen and (max-width: 480px) {
      .case-catch {
        font-size: 8.5333333333vw; } }
    @media screen and (max-width: 1300px) {
      .case-catch {
        margin-bottom: 2.1538461538vw; } }
    @media screen and (max-width: 480px) {
      .case-catch {
        margin-bottom: 7.4666666667vw; } }
  .case article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    @media screen and (max-width: 480px) {
      .case article {
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse; } }
    .case article + article {
      margin-top: 64px; }
      @media screen and (max-width: 1300px) {
        .case article + article {
          margin-top: 4.9230769231vw; } }
      @media screen and (max-width: 480px) {
        .case article + article {
          margin-top: 17.0666666667vw; } }
    .case article:nth-of-type(even) {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }
      @media screen and (max-width: 480px) {
        .case article:nth-of-type(even) {
          -webkit-flex-direction: column-reverse;
          flex-direction: column-reverse; } }
  .case-img {
    width: 524px; }
    @media screen and (max-width: 1300px) {
      .case-img {
        width: 40.3076923077vw; } }
    @media screen and (max-width: 480px) {
      .case-img {
        width: 100%;
        margin-top: 10.6666666667vw; } }
    .case-img img {
      border-radius: 30px; }
      @media screen and (max-width: 1300px) {
        .case-img img {
          border-radius: 2.3076923077vw; } }
      @media screen and (max-width: 480px) {
        .case-img img {
          border-radius: 8vw; } }
  .case-tx {
    width: 514px; }
    @media screen and (max-width: 1300px) {
      .case-tx {
        width: 39.5384615385vw; } }
    @media screen and (max-width: 480px) {
      .case-tx {
        width: 100%; } }
  .case-num {
    width: 80px;
    margin-bottom: 20px; }
    @media screen and (max-width: 1300px) {
      .case-num {
        width: 6.1538461538vw;
        margin-bottom: 1.5384615385vw; } }
    @media screen and (max-width: 480px) {
      .case-num {
        width: 21.3333333333vw;
        margin-bottom: 5.3333333333vw; } }
  .case-hdl {
    position: relative;
    font-size: 32px;
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #2E919F;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 8px;
    margin-bottom: 22px; }
    @media screen and (max-width: 1300px) {
      .case-hdl {
        font-size: 2.4615384615vw; } }
    @media screen and (max-width: 480px) {
      .case-hdl {
        font-size: 8.5333333333vw; } }
    @media screen and (max-width: 1300px) {
      .case-hdl {
        padding-bottom: 0.6153846154vw;
        margin-bottom: 1.6923076923vw; } }
    @media screen and (max-width: 480px) {
      .case-hdl {
        padding-bottom: 2.1333333333vw;
        margin-bottom: 5.8666666667vw;
        font-size: 6.4vw; } }
    .case-hdl::before {
      position: absolute;
      content: "";
      width: 72px;
      height: 1px;
      background-color: #2E919F;
      left: 0;
      bottom: 0; }
      @media screen and (max-width: 1300px) {
        .case-hdl::before {
          width: 5.5384615385vw; } }
      @media screen and (max-width: 480px) {
        .case-hdl::before {
          width: 19.2vw; } }
  .case-desc {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: .05em; }
    @media screen and (max-width: 1300px) {
      .case-desc {
        font-size: 1.3846153846vw; } }
    @media screen and (max-width: 480px) {
      .case-desc {
        font-size: 4.8vw; } }
    @media screen and (max-width: 480px) {
      .case-desc {
        font-size: 4vw; } }

/* flow
---------------------------------------------------------------------------*/
.flow {
  margin-bottom: 70px; }
  @media screen and (max-width: 1300px) {
    .flow {
      margin-bottom: 5.3846153846vw; } }
  @media screen and (max-width: 480px) {
    .flow {
      margin-bottom: 18.6666666667vw; } }
  .flow-ttl {
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #2E919F;
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px; }
    @media screen and (max-width: 1300px) {
      .flow-ttl {
        font-size: 1.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .flow-ttl {
        font-size: 6.4vw; } }
    @media screen and (max-width: 1300px) {
      .flow-ttl {
        margin-bottom: 0.7692307692vw; } }
    @media screen and (max-width: 480px) {
      .flow-ttl {
        margin-bottom: 2.6666666667vw; } }
  .flow-catch {
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 28px; }
    @media screen and (max-width: 1300px) {
      .flow-catch {
        font-size: 2.4615384615vw; } }
    @media screen and (max-width: 480px) {
      .flow-catch {
        font-size: 8.5333333333vw; } }
    @media screen and (max-width: 1300px) {
      .flow-catch {
        margin-bottom: 2.1538461538vw; } }
    @media screen and (max-width: 480px) {
      .flow-catch {
        margin-bottom: 7.4666666667vw;
        line-height: 1.5; } }
  .flow ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 15px; }
    @media screen and (max-width: 1300px) {
      .flow ul {
        gap: 1.1538461538vw; } }
    @media screen and (max-width: 480px) {
      .flow ul {
        width: 88vw;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 10.6666666667vw;
        margin-left: auto;
        margin-right: auto; } }
    .flow ul li {
      width: 250px;
      /*text-align: center;*/ }
      @media screen and (max-width: 1300px) {
        .flow ul li {
          width: 19.2307692308vw; } }
      @media screen and (max-width: 480px) {
        .flow ul li {
          width: 100%;
          text-align: left; } }
      .flow ul li + li {
        position: relative; }
        @media screen and (max-width: 480px) {
          .flow ul li + li {
            padding-top: 10.6666666667vw; } }
        .flow ul li + li::before {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          border-left: 23px solid #2E919F;
          border-top: 12px solid transparent;
          border-bottom: 12px solid transparent;
          left: -25px;
          top: 95px; }
          @media screen and (max-width: 1300px) {
            .flow ul li + li::before {
              border-left-width: 1.7692307692vw;
              border-top-width: 0.9230769231vw;
              border-bottom-width: 0.9230769231vw;
              left: -1.9230769231vw;
              top: 7.3076923077vw; } }
          @media screen and (max-width: 480px) {
            .flow ul li + li::before {
              left: 50%;
              transform: translateX(-50%);
              top: -2.9333333333vw;
              border-top: 5.8666666667vw solid #2E919F;
              border-left: 2.6666666667vw solid transparent;
              border-right: 2.6666666667vw solid transparent; } }
  .flow-img {
    width: 214px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px; }
    @media screen and (max-width: 1300px) {
      .flow-img {
        width: 16.4615384615vw;
        margin-bottom: 1.1538461538vw; } }
    @media screen and (max-width: 480px) {
      .flow-img {
        margin-bottom: 4vw;
        width: 80%; } }
  .flow-tx-num {
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #2E919F;
    font-size: 24px;
    margin-bottom: 10px; }
    @media screen and (max-width: 1300px) {
      .flow-tx-num {
        font-size: 1.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .flow-tx-num {
        font-size: 6.4vw; } }
    @media screen and (max-width: 1300px) {
      .flow-tx-num {
        margin-bottom: 0.7692307692vw; } }
    @media screen and (max-width: 480px) {
      .flow-tx-num {
        text-align: left;
        margin-bottom: 2.6666666667vw; } }
  .flow-tx-hdl {
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 14px; }
    @media screen and (max-width: 1300px) {
      .flow-tx-hdl {
        font-size: 1.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .flow-tx-hdl {
        font-size: 6.4vw; } }
    @media screen and (max-width: 1300px) {
      .flow-tx-hdl {
        margin-bottom: 1.0769230769vw; } }
    @media screen and (max-width: 480px) {
      .flow-tx-hdl {
        text-align: left;
        margin-bottom: 3.7333333333vw; } }
  .flow-tx-desc {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: .05em; }
    @media screen and (max-width: 1300px) {
      .flow-tx-desc {
        font-size: 1.2307692308vw; } }
    @media screen and (max-width: 480px) {
      .flow-tx-desc {
        font-size: 4.2666666667vw; } }

/* brand
---------------------------------------------------------------------------*/
.brand {
  background-color: #F7F6F0;
  padding-top: 80px;
  padding-bottom: 60px; }
  @media screen and (max-width: 1300px) {
    .brand {
      padding-top: 6.1538461538vw;
      padding-bottom: 4.6153846154vw; } }
  @media screen and (max-width: 480px) {
    .brand {
      padding-top: 21.3333333333vw;
      padding-bottom: 16vw; } }
  .brand-ttl {
    text-align: center;
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 60px; }
    @media screen and (max-width: 1300px) {
      .brand-ttl {
        font-size: 2.4615384615vw; } }
    @media screen and (max-width: 480px) {
      .brand-ttl {
        font-size: 8.5333333333vw; } }
    @media screen and (max-width: 1300px) {
      .brand-ttl {
        margin-bottom: 4.6153846154vw; } }
    @media screen and (max-width: 480px) {
      .brand-ttl {
        margin-bottom: 16vw;
        line-height: 1.5; } }
  .brand ul {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 50px 40px; }
    @media screen and (max-width: 1300px) {
      .brand ul {
        width: 84.6153846154vw;
        gap: 3.8461538462vw 3.0769230769vw; } }
    @media screen and (max-width: 480px) {
      .brand ul {
        width: 88vw;
        gap: 13.3333333333vw; } }
    .brand ul li {
      width: 525px;
      background-color: #ffffff;
      padding: 40px 32px; }
      @media screen and (max-width: 1300px) {
        .brand ul li {
          width: 40.3846153846vw;
          padding: 3.0769230769vw 2.4615384615vw; } }
      @media screen and (max-width: 480px) {
        .brand ul li {
          width: 100%;
          padding: 10.6666666667vw 5.3333333333vw; } }
  .brand dt {
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #2E919F;
    font-size: 24px;
    margin-bottom: 20px; }
    @media screen and (max-width: 1300px) {
      .brand dt {
        font-size: 1.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .brand dt {
        font-size: 6.4vw; } }
    @media screen and (max-width: 1300px) {
      .brand dt {
        margin-bottom: 1.5384615385vw; } }
    @media screen and (max-width: 480px) {
      .brand dt {
        margin-bottom: 5.3333333333vw;
        line-height: 1.5; } }
  .brand dd {
    font-size: 16px;
    line-height: 2.1; }
    @media screen and (max-width: 1300px) {
      .brand dd {
        font-size: 1.2307692308vw; } }
    @media screen and (max-width: 480px) {
      .brand dd {
        font-size: 4.2666666667vw; } }
  .brand-more {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    font-size: 14px;
    margin-top: 1em; }
    @media screen and (max-width: 1300px) {
      .brand-more {
        font-size: 1.0769230769vw; } }
    @media screen and (max-width: 480px) {
      .brand-more {
        font-size: 3.7333333333vw; } }
    @media screen and (max-width: 1300px) {
      .brand-more {
        width: 84.6153846154vw; } }
    @media screen and (max-width: 480px) {
      .brand-more {
        width: 88vw; } }

/* maker
---------------------------------------------------------------------------*/
.maker {
  background-color: #F7F6F0;
  padding-top: 80px;
  padding-bottom: 110px; }
  @media screen and (max-width: 1300px) {
    .maker {
      padding-top: 6.1538461538vw;
      padding-bottom: 8.4615384615vw; } }
  @media screen and (max-width: 480px) {
    .maker {
      padding-top: 21.3333333333vw;
      padding-bottom: 29.3333333333vw; } }
  .maker-ttl {
    text-align: center;
    font-family: "Hiragino Mincho ProN", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 60px; }
    @media screen and (max-width: 1300px) {
      .maker-ttl {
        font-size: 2.4615384615vw; } }
    @media screen and (max-width: 480px) {
      .maker-ttl {
        font-size: 8.5333333333vw; } }
    @media screen and (max-width: 1300px) {
      .maker-ttl {
        margin-bottom: 4.6153846154vw; } }
    @media screen and (max-width: 480px) {
      .maker-ttl {
        margin-bottom: 16vw;
        line-height: 1.5; } }
  .maker ul {
    background-color: #ffffff;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 50px 20px;
    padding: 40px 32px; }
    @media screen and (max-width: 1300px) {
      .maker ul {
        width: 84.6153846154vw;
        gap: 3.8461538462vw 1.5384615385vw;
        padding: 3.0769230769vw 2.4615384615vw; } }
    @media screen and (max-width: 480px) {
      .maker ul {
        width: 88vw;
        padding: 10.6666666667vw 2vw;
        gap: 0; } }
    .maker ul li {
      width: calc((100% - 40px) / 3);
      font-size: 15px;
      line-height: 2.1; }
      @media screen and (max-width: 1300px) {
        .maker ul li {
          font-size: 1.1538461538vw; } }
      @media screen and (max-width: 480px) {
        .maker ul li {
          font-size: 4vw; } }
      @media screen and (max-width: 1300px) {
        .maker ul li {
          width: calc((100% - 3.07693vw) / 3); } }
      @media screen and (max-width: 480px) {
        .maker ul li {
          width: 100%;
          font-size: 3.8vw; } }
      .maker ul li.last {
        width: 100%;
        text-align: right;
        font-size: 14px; }
        @media screen and (max-width: 1300px) {
          .maker ul li.last {
            font-size: 1.0769230769vw; } }
        @media screen and (max-width: 480px) {
          .maker ul li.last {
            font-size: 3.7333333333vw; } }