@charset "UTF-8";
/* ---------------------------------------------
@mixin
--------------------------------------------- */
/* ===============================

SP / TAB

 ===============================*/
@media only screen and (max-width: 1024px) {
 /* --------------------------------
* profile-sp
* -------------------------------- */
  section.profile {
    padding-top: 108px; }

  .profile-wrap {
    width: 100%;
    height: auto;
    background-image: none; }
    .profile-wrap .sp-view {
      display: block;
      width: 100%; }

  .profile-txtBox {
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
    position: static; }
    .profile-txtBox span {
      font-size: 2.4rem; }

  /* story-sp */
  section.story {
    padding-top: 54px; }

  .story-wrap {
    width: 100%;
    height: auto;
    background-image: none; }
    .story-wrap .sp-view {
      display: block;
      width: 100%; }

  .story-txtBox--01 {
    line-height: 1.6;
    text-align: center;
    position: static;
    width: 100%;
    font-size: 1.3rem; }

  .story-txtBox--02 {
    line-height: 1.6;
    text-align: center;
    position: static;
    width: 100%;
    font-size: 1.3rem; }

  /* qualification-sp */
  section.qualification {
    padding: 55px 0 55px 0; }

  .qualification-wrap {
    width: 100vw;
    height: 262px;
    background: url(../images/qualification_bg.png) no-repeat center center;
    position: relative; }

  .qualification-txtBox {
    text-align: center;
    width: 100%;
    font-size: 1.2rem;
    position: absolute;
    left: 53%;
    top: 50%;
    transform: translate(-50%, -50%); }

 /* --------------------------------
* collection-sp
* -------------------------------- */
  section.collection {
    padding-top: 108px; }

  .cmain-wrap {
    background-image: none;
    width: 100%;
    height: auto; }
    .cmain-wrap .sp-view {
      display: block;
      width: 100%;
      margin-top: 1rem; }

  .collection-txtBox {
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center;
    padding-top: 1rem; }
    .collection-txtBox .main-ttl {
      font-size: 2.2rem;
      line-height: 1.1;
      margin-bottom: 6rem; }
    .collection-txtBox .sub-ttl {
      font-size: 1.8rem;
      line-height: 1.1; }
    .collection-txtBox .sub-txt {
      font-size: 1.4rem; }

  /* collection 2018 */
  section.c2018 {
    padding: 55px 0; }

  .c2018-wrap img {
    margin: 0 auto;
    display: block;
    width: 100%; }

  .c2018-txtBox {
    text-align: center;
    font-size: 1.4rem;
    margin-top: 1rem; }
    .c2018-txtBox span {
      font-size: 1.8rem;
      line-height: 1.4; }

  /* flex_collection box */
  .flex_collection-box {
    margin-top: 4rem; }

  .flex_collection-item {
    margin: 2rem 2.5rem;
    font-size: 1.3rem;
    width: 280px;
    text-align: center; }
    .flex_collection-item img {
      background-color: #534346;
      height: 280px; }
    .flex_collection-item p {
      margin-top: 1rem; }

 /* --------------------------------
* order made-sp
* -------------------------------- */
  section.ordermade {
    padding-top: 108px; }

  .omain-wrap {
    background-image: none;
    width: 100%;
    height: auto; }
    .omain-wrap .sp-view {
      display: block;
      width: 100%;
      margin-top: 1rem; }
    .omain-wrap .btn-flow {
      position: static;
      float: left;
      width: 46%;
      height: 200px;
      margin: 0 2%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 0 28%; }
      .omain-wrap .btn-flow:hover {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 0 28%; }
    .omain-wrap .btn-price {
      position: static;
      float: right;
      width: 44%;
      height: 200px;
      margin: 0 3%;
      background-size: contain;
      background-repeat: no-repeat; }
      .omain-wrap .btn-price:hover {
        background-size: contain;
        background-repeat: no-repeat; }

  /*こだわり*/
  section.kodawari {
    padding-top: 0; }

  .kodawari-wrap {
    background-image: none;
    padding-top: 6rem; }
    .kodawari-wrap .sp-view {
      display: block;
      width: 100%;
      margin-top: 1rem; }

  .kodawari-bg-wrap {
    background-image: url(../images/kodawari_bg_sp.png);
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    background-position: 0 0; }

  h2.kodawari.sp-view {
    display: block;
    font-size: 3rem; }

  h3.kodawari.sp-view {
    display: block;
    font-size: 1.8rem;
    margin-top: 2rem; }

  h4 {
    margin-top: 2rem;
    font-size: 1.5rem; }

  .kodawari-txtBox {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
    padding-top: 2em; }

  .sp-kodawari-imgBox {
    display: block;
    position: relative;
    width: 100%;
    height: 380px;
    margin-top: 3rem; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .sp-kodawari-imgBox {
      display: block;
      position: relative;
      width: 100%;
      height: 700px;
      margin-top: 3rem; } }

@media only screen and (max-width: 1024px) {
  .sp-kodawari-img01 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 54%;
    z-index: 1; }

  .sp-kodawari-img02 {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48%;
    z-index: 2; }

  /*特徴*/
  section.feature {
    padding-top: 108px; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    section.feature {
      padding-top: 400px; } }

@media only screen and (max-width: 1024px) {
  .feature-wrap {
    background-image: none;
    width: 100%;
    height: auto; }
    .feature-wrap .sp-view {
      display: block;
      width: 100%;
      margin-top: 3rem; }
    .feature-wrap .sp-under {
      margin: 0 auto;
      width: 80%; }

  .feature-bg-wrap {
    width: 100%;
    height: auto;
    background-image: url(../images/feature_bg_sp.png);
    background-repeat: no-repeat;
    background-size: 100% 900px;
    background-position: 0 0; }

  h2.feature {
    padding-top: 14rem; }

  h2.feature.sp-view {
    display: block;
    font-size: 3rem; }

  .feature.sub-ttl {
    font-size: 1.8rem;
    margin-top: 3rem; }

  .feature.sub-ttl .sp-view {
    font-size: 1.8em; }

  .feature-txtBox {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem; }

  .sp-feature-imgBox {
    display: block;
    position: relative;
    width: 100%;
    height: 200px; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .sp-feature-imgBox {
      height: 400px; } }

@media only screen and (max-width: 1024px) {
  .sp-feature-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 55%; }

  /*味わえないこと*/
  section.onlyLA {
    padding-top: 90px; }

  .onlyLA-wrap .sp-view {
    display: block; }
  .onlyLA-wrap .sp-under {
    width: 80%;
    margin: 0 auto; }

  .onlyLA-bg-wrap {
    width: 100%;
    height: 470px;
    background-image: url(../images/ariwaenai_ring_sp.png), url(../images/ajiwaenai_bg_sp.png);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto, 100% auto;
    background-position: center bottom 11%, 0 0; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .onlyLA-bg-wrap {
      height: 860px; } }

@media only screen and (max-width: 1024px) {
  h2.onlyLA.sp-view {
    display: block;
    font-size: 2.7rem;
    padding-top: 3rem; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    h2.onlyLA.sp-view {
      padding-top: 13rem;
      margin-bottom: 5rem; } }

@media only screen and (max-width: 1024px) {
  .onlyLA.sub-ttl {
    font-size: 1.7rem;
    font-family: "Hannari", serif;
    text-align: center;
    margin-top: 3rem;
    font-weight: normal;
    line-height: 1.2; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .onlyLA.sub-ttl {
      font-size: 1.8rem; } }

@media only screen and (max-width: 1024px) {
  .onlyLA-txtBox {
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .onlyLA-txtBox {
      font-size: 1.4rem;
      margin-top: 5rem; } }

@media only screen and (max-width: 1024px) {
  .onlyLA-point-left {
    position: static;
    width: 50%;
    float: left; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .onlyLA-point-left {
      margin-top: 6rem; } }

@media only screen and (max-width: 1024px) {
  .onlyLA-point-right {
    position: static;
    width: 50%;
    float: left; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .onlyLA-point-right {
      margin-top: 6rem; } }

@media only screen and (max-width: 1024px) {
  .onlyLA-point-ttl {
    font-size: 1.6rem; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .onlyLA-point-ttl {
      font-size: 2rem;
      margin-bottom: 1rem; } }

@media only screen and (max-width: 1024px) {
  .onlyLA-point-txt {
    font-size: 1.2rem;
    line-height: 1.6; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .onlyLA-point-txt {
      font-size: 1.6rem; } }

@media only screen and (max-width: 1024px) {
  .flex_btn-box {
    display: flex;
    /* フレックスボックスにする */
    flex-wrap: wrap;
    /* 折り返し指定 */
    justify-content: center;
    flex-direction: row;
    /* 要素の並び順 */ }
    .flex_btn-box a:hover {
      -moz-opacity: 0.80;
      opacity: 0.80; }

  .flex_btn-item {
    position: relative;
    margin: 0 60px 40px 60px;
    font-size: 1.5rem;
    line-height: 1.1;
    width: 100%;
    height: 211px;
    text-align: center; } }
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .flex_btn-item {
      height: 300px; } }
@media only screen and (max-width: 1024px) {
    .flex_btn-item p.after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%; }
    .flex_btn-item p.cases {
      position: absolute;
      left: 40%;
      top: 65%;
      transform: translate(-50%, -50%); }

  .flex_btn-item:nth-child(1) {
    background: url(../images/after_od_bg.png) no-repeat;
    background-size: contain;
    background-position: center; }

  .flex_btn-item:nth-child(2) {
    background: url(../images/cases_bg.png) no-repeat;
    background-size: contain;
    background-position: center; }

 /* --------------------------------
* flow-sp
* -------------------------------- */
  .flow.pc-view {
    display: none; }

  .flow.sp-view {
    display: block; }

  section.flow {
    padding-top: 108px; }

  .h3-flow {
    display: block;
    font-size: 1.3rem; }

  .flow-wrap {
    width: 100%;
    height: auto; }

  .flow-listimg {
    display: block;
    width: 90%;
    margin: 3rem auto 0 auto; }

  .flow-list {
    margin-top: 8rem; }

  .flow-contentBox {
    list-style: none;
    width: 100%;
    margin: 0 auto 6rem auto;
    text-align: center;
    padding-top: 1.5rem; }
    .flow-contentBox:nth-child(1) {
      position: relative;
      background: url(../images/flow_bg_01_sp.jpg) no-repeat;
      height: 233px;
      background-size: 100% 100%; }
      .flow-contentBox:nth-child(1) .flow-contentBox__inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%; }
      .flow-contentBox:nth-child(1) .title {
        font-size: 2.6rem;
        margin-bottom: 2rem; }
      .flow-contentBox:nth-child(1) .txt {
        font-size: 1.5rem; }
    .flow-contentBox:nth-child(2) {
      position: relative;
      background: url(../images/flow_bg_02_sp.jpg) no-repeat;
      height: 1157px;
      background-size: 100% 100%;
      color: #fff; }
      .flow-contentBox:nth-child(2) .title {
        font-size: 2.6rem;
        line-height: 1.2; }
        .flow-contentBox:nth-child(2) .title span {
          font-size: 1.6rem; }
      .flow-contentBox:nth-child(2) .order-wrap {
        display: flex;
        /* フレックスボックスにする */
        flex-wrap: wrap;
        /* 折り返し指定 */
        justify-content: center;
        flex-direction: row;
        /* 要素の並び順 */
        width: 90%;
        margin: 2rem auto;
        border: 1px solid #fff;
        padding: 4rem 0;
        background: rgba(0, 0, 0, 0.7); }
      .flow-contentBox:nth-child(2) .order {
        position: relative;
        width: 24%;
        height: 80px;
        margin-right: 0;
        list-style: none;
        flex-basis: 100% !important;
        text-align: left; }
        .flow-contentBox:nth-child(2) .order p {
          display: inline-block; }
        .flow-contentBox:nth-child(2) .order .order-num {
          position: absolute;
          left: 15%;
          font-family: kristi;
          font-size: 6rem;
          line-height: 90px;
          height: 90px; }
        .flow-contentBox:nth-child(2) .order .order-txt {
          position: absolute;
          left: 30%;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          font-size: 1.4rem;
          line-height: 1.2; }
        .flow-contentBox:nth-child(2) .order::after {
          content: ""; }
      .flow-contentBox:nth-child(2) li + li {
        margin-left: 0; }
      .flow-contentBox:nth-child(2) .flex_hearing-box {
        display: flex;
        /* フレックスボックスにする */
        flex-wrap: wrap;
        /* 折り返し指定 */
        justify-content: center;
        flex-direction: row;
        /* 要素の並び順 */
        width: 90%;
        margin: 0 auto; }
      .flow-contentBox:nth-child(2) .flex_hearing-item {
        width: 100%;
        background: rgba(250, 244, 243, 0.9);
        color: #000;
        padding: 3rem;
        margin: 0 0 2rem; }
        .flow-contentBox:nth-child(2) .flex_hearing-item .title {
          font-family: kristi;
          font-size: 3.6rem;
          line-height: 1;
          margin-bottom: 1.5rem; }
          .flow-contentBox:nth-child(2) .flex_hearing-item .title span {
            font-family: "Hannari", serif;
            font-size: 1.4rem;
            line-height: 1; }
        .flow-contentBox:nth-child(2) .flex_hearing-item .txt {
          text-align: left;
          font-size: 1.3rem; }
    .flow-contentBox:nth-child(3) {
      position: relative;
      background: url(../images/flow_bg_03_sp.jpg) no-repeat center top;
      background-size: 100% 100%;
      height: 667px;
      color: #fff; }
      .flow-contentBox:nth-child(3) .flow-contentBox__inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%; }
      .flow-contentBox:nth-child(3) .title {
        font-size: 2.6rem;
        line-height: 1.2;
        margin-bottom: 2rem; }
      .flow-contentBox:nth-child(3) .txt {
        font-size: 1.4rem;
        margin-bottom: 2rem; }
      .flow-contentBox:nth-child(3) .flow-txtBox {
        width: 90%;
        background: rgba(250, 244, 243, 0.9);
        color: #000;
        padding: 3rem;
        margin: 0 auto;
        text-align: left;
        font-size: 1.3rem; }
    .flow-contentBox:nth-child(4) {
      position: relative;
      background: url(../images/flow_bg_04_sp.jpg) no-repeat center top;
      background-size: 100% 100%;
      height: 286px;
      color: #fff; }
      .flow-contentBox:nth-child(4) .flow-contentBox__inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%; }
      .flow-contentBox:nth-child(4) .title {
        font-size: 2.6rem;
        line-height: 1.2;
        margin-bottom: 2rem; }
      .flow-contentBox:nth-child(4) .txt {
        font-size: 1.4rem; }
    .flow-contentBox:nth-child(5) {
      position: relative;
      background: url(../images/flow_bg_05_sp.jpg) no-repeat center top;
      background-size: 100% 100%;
      height: 627px;
      color: #fff; }
      .flow-contentBox:nth-child(5) .flow-contentBox__inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%; }
      .flow-contentBox:nth-child(5) .title {
        font-size: 2.6rem;
        line-height: 1.2;
        margin-bottom: 2rem; }
        .flow-contentBox:nth-child(5) .title span {
          font-size: 1.6rem; }
      .flow-contentBox:nth-child(5) .txt {
        font-size: 1.4rem;
        margin-bottom: 2rem; }
      .flow-contentBox:nth-child(5) .flow-txtBox {
        width: 90%;
        background: rgba(250, 244, 243, 0.9);
        color: #000;
        padding: 3rem;
        margin: 0 auto;
        text-align: left;
        font-size: 1.3rem; }
    .flow-contentBox:nth-child(6) {
      position: relative;
      background: url(../images/flow_bg_06_sp.jpg) no-repeat center top;
      background-size: 100% 100%;
      height: 298px;
      color: #fff; }
      .flow-contentBox:nth-child(6) .flow-contentBox__inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%; }
      .flow-contentBox:nth-child(6) .title {
        font-size: 2.6rem;
        line-height: 1.2;
        margin-bottom: 2rem; }
      .flow-contentBox:nth-child(6) .txt {
        font-size: 1.3rem; }

 /* --------------------------------
* price-sp
* -------------------------------- */
  section.price {
    padding-top: 108px; }

  .h3-price {
    display: block;
    font-size: 1.3rem;
    margin-top: .5rem; }

  .price-wrap {
    width: 100%;
    height: auto; }

  .price-txtBoxWrap--01 {
    position: relative;
    width: 100%;
    height: 734px;
    background: url(../images/price_bg_01_sp.png) no-repeat center;
    background-size: 100% 100%;
    margin: 2rem auto 4rem auto; }
    .price-txtBoxWrap--01 .price-txtBox--01 {
      position: absolute;
      top: 36%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 100%; }
    .price-txtBoxWrap--01 .price-txtBox--02 {
      position: absolute;
      top: 78%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 100%; }
    .price-txtBoxWrap--01 .price-title {
      font-size: 2.6rem;
      margin-bottom: 2rem; }
    .price-txtBoxWrap--01 .price-tax {
      font-size: 1.8rem;
      margin-bottom: 2rem; }
    .price-txtBoxWrap--01 .price-txt {
      font-size: 1.3rem;
      line-height: 1.6; }

  .price-txtBoxWrap--02 {
    position: relative;
    width: 100%;
    height: 500px;
    background: url(../images/price_bg_02_sp.png) no-repeat center bottom;
    background-size: contain;
    margin: 0 auto 4rem auto; }
    .price-txtBoxWrap--02 .price-txtBox--03 {
      position: static;
      text-align: center; }
    .price-txtBoxWrap--02 .price-txt {
      font-size: 1.3rem;
      line-height: 1.6; } }