@charset "UTF-8";
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #3c463c; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

ul, ol {
  list-style: none; }

.pc {
  display: block; }
  @media screen and (max-width: 1050px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 1050px) {
    .sp {
      display: block; } }

body {
  overflow-x: hidden; }

.en {
  font-family: "Noto-sans", sans-serif; }

.ja {
  font-family: "toppan-bunkyu-gothic-pr6n", serif; }

/*--------------------------------------------*/
.lp_wrapper {
  margin: 0 auto;
  box-sizing: border-box;
  background: #fdfdf8;
  padding-top: 60px;
  letter-spacing: 0.1em;
  color: #3c463c;
  font-size: 16px;
  text-align: center;
  font-family: "toppan-bunkyu-gothic-pr6n", serif;
  font-weight: normal;
  font-style: normal;
  overflow-x: hidden; }
  .lp_wrapper h1 {
    font-weight: 500;
    font-family: "Noto-sans", sans-serif;
    font-size: 1.5em !important; }
    @media screen and (max-width: 600px) {
      .lp_wrapper h1 {
        font-size: 1.2em !important;
        margin: 0 auto 25%; } }
    .lp_wrapper h1 span {
      font-size: 60%;
      display: block;
      font-family: "toppan-bunkyu-gothic-pr6n", serif; }
  .lp_wrapper section {
    max-width: 1500px;
    margin: 0 auto 10%;
    width: 90%; }
    @media screen and (max-width: 600px) {
      .lp_wrapper section {
        width: 95%; } }
    .lp_wrapper section h2 {
      font-family: "toppan-bunkyu-gothic-pr6n", serif;
      font-weight: 600;
      font-size: 1em !important;
      text-align: left;
      width: 90% !important;
      max-width: 600px;
      margin: 5% auto 0 !important;
      border: none !important;
      padding: 0.7em !important; }
      @media screen and (max-width: 600px) {
        .lp_wrapper section h2 {
          font-size: 1em !important;
          padding: 0.5em !important;
          width: 100% !important; } }
    .lp_wrapper section .color_link {
      width: 90%;
      margin: 0 auto;
      max-width: 600px; }
      @media screen and (max-width: 600px) {
        .lp_wrapper section .color_link {
          width: 100%; } }
      .lp_wrapper section .color_link ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap; }
        .lp_wrapper section .color_link ul li {
          width: calc(100%/3 - 2%);
          margin: 1%;
          position: relative;
          height: 70px; }
          @media screen and (max-width: 600px) {
            .lp_wrapper section .color_link ul li {
              width: calc(100%/2 - 2%); } }
          .lp_wrapper section .color_link ul li.new::after {
            position: absolute;
            content: "NEW";
            font-size: 10px;
            color: #fff !important;
            top: 0;
            font-family: "Noto-sans", sans-serif;
            right: 0.5em;
            font-weight: bold; }
          .lp_wrapper section .color_link ul li a {
            display: block;
            height: 100%;
            width: 100%;
            line-height: 100px;
            text-align: center;
            font-family: "Noto-sans", sans-serif;
            font-size: 1.0em; }
            @media screen and (max-width: 600px) {
              .lp_wrapper section .color_link ul li a {
                font-size: 3.2vw; } }
    .lp_wrapper section.colorBox {
      margin: 0 auto 15%;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      flex-wrap: wrap; }
      .lp_wrapper section.colorBox .block {
        width: calc(100%/2 - 5%);
        padding-top: 60px; }
        @media screen and (max-width: 1050px) {
          .lp_wrapper section.colorBox .block {
            width: 100%;
            max-width: 600px;
            margin: 0 auto; } }
        .lp_wrapper section.colorBox .block h3 {
          font-size: 1.5em !important;
          font-weight: bold;
          text-align: left;
          margin-bottom: .5em; }
          @media screen and (max-width: 600px) {
            .lp_wrapper section.colorBox .block h3 {
              font-size: 1.2em !important; } }
          .lp_wrapper section.colorBox .block h3 small {
            font-size: 65%; }
          .lp_wrapper section.colorBox .block h3 span {
            font-weight: normal;
            font-size: 50%;
            display: block; }
        .lp_wrapper section.colorBox .block .flexBox {
          display: flex;
          align-items: stretch;
          justify-content: center; }
          .lp_wrapper section.colorBox .block .flexBox div {
            width: 40%; }
            .lp_wrapper section.colorBox .block .flexBox div img {
              border-top-left-radius: .7em;
              border-bottom-left-radius: .7em; }
            .lp_wrapper section.colorBox .block .flexBox div.txt {
              border-top-right-radius: .7em;
              border-bottom-right-radius: .7em;
              width: 60%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: flex-end;
              padding: 2.0em; }
              @media screen and (max-width: 600px) {
                .lp_wrapper section.colorBox .block .flexBox div.txt {
                  padding: 1.0em; } }
              .lp_wrapper section.colorBox .block .flexBox div.txt p {
                font-size: 1.0em;
                text-align: right; }
                .lp_wrapper section.colorBox .block .flexBox div.txt p:last-child {
                  text-align: justify; }
                @media screen and (max-width: 600px) {
                  .lp_wrapper section.colorBox .block .flexBox div.txt p {
                    font-size: 3.0vw;
                    letter-spacing: 0;
                    line-height: 1.8; } }
        .lp_wrapper section.colorBox .block .view {
          text-align: right;
          font-size: 0.9em;
          margin-top: 0.5em; }
          @media screen and (max-width: 600px) {
            .lp_wrapper section.colorBox .block .view {
              font-size: 0.7em; } }
    .lp_wrapper section#p_color {
      margin: 0 auto 15%; }
      .lp_wrapper section#p_color img {
        margin-top: 5%; }
      .lp_wrapper section#p_color .view {
        text-align: right;
        font-size: 0.9em; }
    .lp_wrapper section#guidelist {
      max-width: 600px;
      margin: 25% auto 0; }
      .lp_wrapper section#guidelist h3 {
        font-size: 1.2em !important;
        font-weight: bold;
        text-align: left;
        line-height: 1.2; }
        @media screen and (max-width: 600px) {
          .lp_wrapper section#guidelist h3 {
            font-size: 1em !important; } }
        .lp_wrapper section#guidelist h3 span {
          font-weight: normal;
          font-size: 80%; }
      .lp_wrapper section#guidelist .flex {
        display: block;
        padding: 5%;
        border-top: 1px solid #3c463c;
        margin: 3% auto; }
        @media screen and (max-width: 600px) {
          .lp_wrapper section#guidelist .flex {
            padding: 7%;
            margin: 5% auto; } }
        .lp_wrapper section#guidelist .flex a {
          display: flex;
          align-items: center;
          justify-content: space-between; }
          .lp_wrapper section#guidelist .flex a div {
            width: calc(100%/2 - 2%);
            margin-bottom: 5%; }
            .lp_wrapper section#guidelist .flex a div p {
              font-size: 1.2em; }
              @media screen and (max-width: 600px) {
                .lp_wrapper section#guidelist .flex a div p {
                  font-size: 1.0em; } }
              .lp_wrapper section#guidelist .flex a div p span {
                font-size: 70%; }
    .lp_wrapper section .olv {
      background: #757C57; }
      .lp_wrapper section .olv a, .lp_wrapper section .olv p {
        color: #ffffff !important; }
    .lp_wrapper section .dgy {
      background: #6F6C61; }
      .lp_wrapper section .dgy a, .lp_wrapper section .dgy p {
        color: #ffffff !important; }
    .lp_wrapper section .ivory {
      background: #E8E4E2; }
    .lp_wrapper section .be {
      background: #DAC8B6; }
    .lp_wrapper section .pi {
      background: #ECE3E2; }
    .lp_wrapper section .mgy {
      background: #C5BFC4; }
    .lp_wrapper section .lv {
      background: #D1B3D4; }
    .lp_wrapper section .sg {
      background: #ACC6B2; }
    .lp_wrapper section .pbl {
      background: #B0C0CA; }
    .lp_wrapper section .ctr {
      background: #CBD470; }
    .lp_wrapper section .nv {
      background: #3E455E; }
      .lp_wrapper section .nv a, .lp_wrapper section .nv p {
        color: #ffffff !important; }
    .lp_wrapper section .bk {
      background: #2C2D2E; }
      .lp_wrapper section .bk a, .lp_wrapper section .bk p {
        color: #ffffff !important; }
    .lp_wrapper section .cbk {
      background: #2c2523; }
      .lp_wrapper section .cbk a, .lp_wrapper section .cbk p {
        color: #ffffff !important; }
    .lp_wrapper section .anv {
      background: #49495a; }
      .lp_wrapper section .anv a, .lp_wrapper section .anv p {
        color: #ffffff !important; }
    .lp_wrapper section .dpu {
      background: #513743; }
      .lp_wrapper section .dpu a, .lp_wrapper section .dpu p {
        color: #ffffff !important; }
    .lp_wrapper section .cf {
      background: #704616; }
      .lp_wrapper section .cf a, .lp_wrapper section .cf p {
        color: #ffffff !important; }
    .lp_wrapper section .c_ivory {
      background: #dddcd0; }
    .lp_wrapper section .c_pi {
      background: #ded7d6; }
    .lp_wrapper section .c_be {
      background: #9c896e; }
      .lp_wrapper section .c_be a, .lp_wrapper section .c_be p {
        color: #ffffff !important; }
    .lp_wrapper section .c_gy {
      background: #ccd3d8; }
    .lp_wrapper section .c_cha {
      background: #524e4d; }
      .lp_wrapper section .c_cha a, .lp_wrapper section .c_cha p {
        color: #ffffff !important; }