@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  word-wrap: break-word; }

body {
  font-size: 1.4rem;
  margin: 0;
  padding: 0; }
  @media only screen and (min-width: 750px) {
    body {
      font-size: 1.6rem; } }

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

h1, h2, h3, div, p, ul, li {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

img {
  /* ヘッダー調整 
  width: 100%;　*/
  max-width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom; }

a:hover {
  opacity: 0.8; }

.only_pc {
  display: none; }
  @media only screen and (min-width: 750px) {
    .only_pc {
      display: inline; } }

.only_sp {
  display: inline; }
  @media only screen and (min-width: 750px) {
    .only_sp {
      display: none; } }

@media only screen and (min-width: 900px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }

@media only screen and (min-width: 420px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
.kv {
  background-image: url("../img/bg_kv_sp.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 80vw; }
  @media only screen and (min-width: 750px) {
    .kv {
      background-image: url("../img/bg_kv_pcl.jpg");
      background-size: auto 100%;
      height: calc(650/900 * 100vw); } }
  @media only screen and (min-width: 900px) {
    .kv {
      background-size: auto 100%;
      height: 650px; } }
  @media only screen and (min-width: 2000px) {
    .kv {
      background-size: 100% auto; } }
  .kv__inner {
    width: 100%;
    margin: 0 auto;
    padding: calc(143/750 * 100vw) 0 0 0; }
    @media only screen and (min-width: 750px) {
      .kv__inner {
        margin: 0 auto;
        padding: calc(158/900 * 100vw) 0 0; } }
    @media only screen and (min-width: 900px) {
      .kv__inner {
        width: 900px;
        margin: 0 auto;
        padding: 158px 0 0; } }
    .kv__inner h1 {
      width: calc(622/750 * 100vw);
      margin: 0 auto 0 calc(80/750 * 100vw); }
      @media only screen and (min-width: 750px) {
        .kv__inner h1 {
          width: calc(694/900 * 100vw);
          margin: 0 auto 0 calc(123/900 * 100vw); } }
      @media only screen and (min-width: 900px) {
        .kv__inner h1 {
          width: 694px;
          margin: 0 auto 0 123px; } }

.lead {
  width: calc(542/750 * 100vw);
  margin: calc(50/900 * 100vw) auto 0; }
  @media only screen and (min-width: 750px) {
    .lead {
      width: calc(602/900 * 100vw);
      margin: calc(90/900 * 100vw) auto 0; } }
  @media only screen and (min-width: 900px) {
    .lead {
      width: 602px;
      margin: 90px auto 0; } }

.navi {
  display: flex;
  justify-content: space-between;
  width: calc(596/750 * 100vw);
  margin: calc(62/750 * 100vw) auto 0; }
  @media only screen and (min-width: 750px) {
    .navi {
      width: calc(662/900 * 100vw);
      margin: calc(106/900 * 100vw) auto 0; } }
  @media only screen and (min-width: 900px) {
    .navi {
      width: 662px;
      margin: 106px auto 0; } }
  .navi .navi01, .navi .navi02, .navi .navi03 {
    width: calc(170/750 * 100vw); }
    @media only screen and (min-width: 750px) {
      .navi .navi01, .navi .navi02, .navi .navi03 {
        width: calc(190/900 * 100vw); } }
    @media only screen and (min-width: 900px) {
      .navi .navi01, .navi .navi02, .navi .navi03 {
        width: 190px; } }

.mens {
  background: #00aae8;
  margin-top: calc(74/750 * 100vw);
  padding: calc(58/750 * 100vw) 0 calc(60/750 * 100vw); }
  @media only screen and (min-width: 750px) {
    .mens {
      margin-top: calc(65/900 * 100vw);
      padding: calc(66/900 * 100vw) 0 calc(62/900 * 100vw); } }
  @media only screen and (min-width: 900px) {
    .mens {
      margin-top: 65px;
      padding: 66px 0 62px; } }

.com {
  background: #006ebe;
  margin: 0 auto;
  adding: 0 0 calc(37/750 * 100vw); }
  @media only screen and (min-width: 750px) {
    .com {
      padding: 0 0 calc(50/900 * 100vw); } }
  @media only screen and (min-width: 900px) {
    .com {
      padding: 0 0 50px; } }
  .com .h2_wrap {
    background-image: linear-gradient(180deg, #00aae8, #006ebe);
    padding: calc(33/750 * 100vw) 0 0; }
    @media only screen and (min-width: 750px) {
      .com .h2_wrap {
        padding: calc(40/900 * 100vw) 0 0; } }
    @media only screen and (min-width: 900px) {
      .com .h2_wrap {
        padding: 40px 0 0; } }
    .com .h2_wrap h2 {
      width: calc(170/750 * 100vw);
      margin: 0 auto; }
      @media only screen and (min-width: 750px) {
        .com .h2_wrap h2 {
          width: calc(190/900 * 100vw); } }
      @media only screen and (min-width: 900px) {
        .com .h2_wrap h2 {
          width: 190px; } }

.cool {
  background: #003782;
  margin: 0 auto;
  padding: 0 0 calc(60/750 * 100vw); }
  @media only screen and (min-width: 750px) {
    .cool {
      padding: 0 0 calc(62/900 * 100vw); } }
  @media only screen and (min-width: 900px) {
    .cool {
      padding: 0 0 62px; } }
  .cool .h2_wrap {
    background-image: linear-gradient(180deg, #006ebe, #003782);
    padding: calc(60/750 * 100vw) 0 0; }
    @media only screen and (min-width: 750px) {
      .cool .h2_wrap {
        padding: calc(40/900 * 100vw) 0 0; } }
    @media only screen and (min-width: 900px) {
      .cool .h2_wrap {
        padding: 40px 0 0; } }
    .cool .h2_wrap h2 {
      width: calc(580/750 * 100vw);
      margin: 0 auto calc(-20/750 * 100vw); }
      @media only screen and (min-width: 750px) {
        .cool .h2_wrap h2 {
          width: calc(644/900 * 100vw);
          margin: 0 auto calc(-18/900 * 100vw); } }
      @media only screen and (min-width: 900px) {
        .cool .h2_wrap h2 {
          width: 644px;
          margin: 0 auto -18px; } }

.ladies {
  background: #00b9dc;
  margin-top: 13vw;
  padding: calc(57/750 * 100vw) 0; }
  @media only screen and (min-width: 750px) {
    .ladies {
      margin-top: calc(100/900 * 100vw);
      padding: calc(65/900 * 100vw) 0; } }
  @media only screen and (min-width: 900px) {
    .ladies {
      margin-top: 100px;
      padding: 65px 0; } }

.prod__inner {
  width: 100%;
  margin: 0 auto; }
  @media only screen and (min-width: 900px) {
    .prod__inner {
      width: 900px; } }
  .prod__inner h2 {
    width: calc(170/750 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 750px) {
      .prod__inner h2 {
        width: calc(190/900 * 100vw); } }
    @media only screen and (min-width: 900px) {
      .prod__inner h2 {
        width: 190px; } }
  .prod__inner__list {
    width: 100%;
    margin: calc(50/750 * 100vw) auto 0; }
    @media only screen and (min-width: 750px) {
      .prod__inner__list {
        margin: calc(57/900 * 100vw) auto 0; } }
    @media only screen and (min-width: 900px) {
      .prod__inner__list {
        width: 900px;
        margin: 57px auto 0; } }
    .prod__inner__list li {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap; }
      .prod__inner__list li .ph {
        width: 50%;
        margin: 0; }
        @media only screen and (min-width: 750px) {
          .prod__inner__list li .ph {
            width: 52.8%; } }
      .prod__inner__list li .text {
        position: relative;
        width: 50%;
        margin: 0; }
        @media only screen and (min-width: 750px) {
          .prod__inner__list li .text {
            width: 47.2%; } }
        .prod__inner__list li .text .bt_prod01 {
          display: block;
          width: calc(270/750 * 100vw);
          margin: calc(5/750 * 100vw) auto 0 calc(30/750 * 100vw); }
          @media only screen and (min-width: 750px) {
            .prod__inner__list li .text .bt_prod01 {
              width: calc(300/900 * 100vw);
              margin: calc(6/900 * 100vw) auto 0 calc(55/900 * 100vw); } }
          @media only screen and (min-width: 900px) {
            .prod__inner__list li .text .bt_prod01 {
              width: 300px;
              margin: 6px auto 0 55px; } }
        .prod__inner__list li .text .bt_prod02 {
          display: block;
          width: calc(270/750 * 100vw);
          margin: calc(7/750 * 100vw) auto 0 calc(39/750 * 100vw); }
          @media only screen and (min-width: 750px) {
            .prod__inner__list li .text .bt_prod02 {
              width: calc(300/900 * 100vw);
              margin: calc(7/900 * 100vw) auto 0 calc(48/900 * 100vw); } }
          @media only screen and (min-width: 900px) {
            .prod__inner__list li .text .bt_prod02 {
              width: 300px;
              margin: 7px auto 0 48px; } }
      .prod__inner__list li .peruche {
        width: 100%;
        margin: calc(10/750 * 100vw) auto calc(15/900 * 100vw); }
        @media only screen and (min-width: 750px) {
          .prod__inner__list li .peruche {
            margin: calc(10/900 * 100vw) auto calc(20/900 * 100vw); } }
        @media only screen and (min-width: 900px) {
          .prod__inner__list li .peruche {
            margin: 10px auto 20px; } }
    .prod__inner__list li + li {
      margin-top: calc(23/750 * 100vw); }
      @media only screen and (min-width: 750px) {
        .prod__inner__list li + li {
          margin-top: calc(25/900 * 100vw); } }
      @media only screen and (min-width: 900px) {
        .prod__inner__list li + li {
          margin-top: 25px; } }
    .prod__inner__list li:nth-child(odd) {
      flex-direction: row;
      padding: 0 0 0 calc(30/750 * 100%); }
      @media only screen and (min-width: 750px) {
        .prod__inner__list li:nth-child(odd) {
          padding: 0; } }
      @media only screen and (min-width: 750px) {
        .prod__inner__list li:nth-child(odd) .ph {
          padding: 0 0 0 2.8%; } }
    .prod__inner__list li:nth-child(even) {
      flex-direction: row-reverse;
      padding: 0 calc(30/750 * 100%) 0 0; }
      @media only screen and (min-width: 750px) {
        .prod__inner__list li:nth-child(even) {
          padding: 0; } }
      @media only screen and (min-width: 750px) {
        .prod__inner__list li:nth-child(even) .ph {
          padding: 0 2.8% 0 0; } }
  .prod__inner .mens_item_ti {
    width: calc(400/750 * 100vw);
    margin: calc(94/750 * 100vw) auto 0; }
    @media only screen and (min-width: 750px) {
      .prod__inner .mens_item_ti {
        width: calc(445/900 * 100vw);
        margin: calc(150/900 * 100vw) auto 0; } }
    @media only screen and (min-width: 900px) {
      .prod__inner .mens_item_ti {
        width: 445px;
        margin: 150px auto 0; } }
  .prod__inner .mens_item {
    width: calc(388/750 * 100vw);
    margin: 0 auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media only screen and (min-width: 750px) {
      .prod__inner .mens_item {
        width: calc(820/900 * 100%);
        margin: 0 auto 0; } }
    @media only screen and (min-width: 900px) {
      .prod__inner .mens_item {
        width: 820px;
        margin: 0 auto 0; } }
    .prod__inner .mens_item li {
      width: 23vw;
      margin: calc(40/750 * 100vw) 0 0; }
      @media only screen and (min-width: 750px) {
        .prod__inner .mens_item li {
          width: calc(190/900 * 100vw);
          margin: calc(40/900 * 100vw) 0 0; } }
      @media only screen and (min-width: 900px) {
        .prod__inner .mens_item li {
          width: 190px;
          margin: 40px 0 0; } }
  .prod__inner .ladies_item_ti {
    width: 53.333vw;
    margin: 8vw auto 0; }
    @media only screen and (min-width: 750px) {
      .prod__inner .ladies_item_ti {
        width: calc(493/900 * 100vw);
        margin: calc(78/900 * 100vw) auto 0; } }
    @media only screen and (min-width: 900px) {
      .prod__inner .ladies_item_ti {
        width: 493px;
        margin: 78px auto 0; } }
  .prod__inner .ladies_item {
    width: calc(388/750 * 100vw);
    margin: 0 auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media only screen and (min-width: 750px) {
      .prod__inner .ladies_item {
        width: calc(420/900 * 100vw);
        margin: 0 auto 0; } }
    @media only screen and (min-width: 900px) {
      .prod__inner .ladies_item {
        width: 420px;
        margin: 0 auto 0; } }
    .prod__inner .ladies_item li {
      width: 23vw;
      margin: 4vw 0 0; }
      @media only screen and (min-width: 750px) {
        .prod__inner .ladies_item li {
          width: calc(190/900 * 100vw);
          margin: calc(35/900 * 100vw) 0 0; } }
      @media only screen and (min-width: 900px) {
        .prod__inner .ladies_item li {
          width: 188px;
          margin: 35px 0 0; } }

.footer {
  width: 100%; }
  .footer--inner {
    width: 100%;
    margin: 0 auto;
    padding: 10vw 0 10.5vw; }
    @media only screen and (min-width: 750px) {
      .footer--inner {
        padding: calc(77/900 * 100vw) 0 calc(77/900 * 100vw); } }
    @media only screen and (min-width: 900px) {
      .footer--inner {
        width: 1040px;
        padding: 77px 0 77px; } }
    .footer--inner .top {
      display: block;
      width: 68.4vw;
      margin: 0 auto 0; }
      @media only screen and (min-width: 750px) {
        .footer--inner .top {
          width: calc(570/900 * 100vw); } }
      @media only screen and (min-width: 900px) {
        .footer--inner .top {
          width: 570px; } }