@charset "utf-8";
/* メリーナトップ*/


/*---------------
 タイトル部分
-----------------*/
.titleWrap{
 height: 170px;
 padding-top: 69px;
 margin-bottom: 100px;
}
.titleWrap h1{
 text-align: center;
 font-size: 3rem;
 letter-spacing: 0.1em;
 color: #fff;
}


/*それぞれのカテゴリのタイトル背景色*/
.trayStand .titleWrap{ background-color: #af7846;}
.kitchenStand .titleWrap{ background-color: #0350a2;}
.atkitchen .titleWrap{ background-color: #311d03;}
.luce .titleWrap{ background-color: #6c3910;}
.mellinaCollection .titleWrap{ background-color: #0a0a08;}
.fiore .titleWrap{ background-color: #3b8010;}
.tableBoard .titleWrap{ background-color: #ffac41;}
.yuragi .titleWrap,
.monochrome .titleWrap{ background-color: #00c0a9;}
.newExcellence .titleWrap,
.misty .titleWrap{ background-color: #3d62ad;}
.Clear .titleWrap,
.trashBox .titleWrap{ background-color: #bf9d6d;}




/*---------------
 キャッチ部分
-----------------*/
.catchArea{
 margin-bottom: 65px;
 text-align: center;
 letter-spacing: 0.1em;
}
.catchArea h2{
 font-size: 2.6rem;
 margin-bottom: 35px;
}
.catchArea p{
 font-size: 1.4rem;
 line-height: 2.4rem;
}



/*---------------
 ピックアップ部分
-----------------*/
.pickArea{
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 width: 1080px;
 margin: 0 auto 100px;
}
.pickArea > div{ width: 540px;}
.pickArea .imgArea{ text-align: center;}
.pickArea .textArea{
 padding-left: 30px;
}
.pickArea .textArea h3{
 font-size: 2rem;
 margin-bottom: 20px;
 letter-spacing: 0.1em;
 line-height: 3rem;
}
.pickArea .textArea p{
 font-size: 1.4rem;
 line-height: 2.7rem;
 letter-spacing: -0.05rem;
 text-align: justify;
 text-justify: inter-ideograph;
}
.pickArea .textArea p:not(:last-of-type){ margin-bottom: 27px;}
.pickArea .textArea p + h3{ margin-top: 35px;}
.pickArea .textArea p a{
 color: #003f7e;
 border-bottom: 1px solid #003f7e;
 transition: border-color 0.1s;
}
.pickArea .textArea p a:hover{ border-color: rgba(255,255,255,0);}
.pickArea .textArea .logoArea{ margin: -10px 0 20px;}
.pickArea .textArea .logoArea img{ vertical-align: top;}
.pickArea .textArea .logoArea img:not(:last-of-type){ margin-right: 23px;}



/*-----------------
sort_jumpの位置調整
-------------------*/
.resultPosition{ top: -100px;}



/*-----------------
モーダル保存
------------------*/
.white-popup-block {
    background: #FFF;
    padding: 40px;
    text-align: left;
    max-width: 700px;
    margin: 40px auto;
    position: relative;
  }
  .white-popup-block h2{
      text-align: center;
      font-size: 2rem;
      margin-bottom: 20px;
      color: #333;
      font-weight: bold;
  }
  .white-popup-block h2 + p{
    text-align: center;
    font-size: 1.6rem;
    text-align: center;
    line-height: normal;
    margin-bottom: 40px;
  }
  .textbox-001-label,
  .textarea-001-label,
  .textbox-002-label,
  .textarea-002-label{
    font-size: 1.6rem;
    font-weight: bold;
  }
  .textbox-001-label,
  .textbox-001,
  .textbox-002-label,
  .textbox-002 {
      color: #333;
  }
  .textbox-001-label,
  .textbox-002-label {
      display: block;
      margin-bottom: 5px;
      font-size: 1.6rem;
  }
  .textbox-001,
  .textbox-002 {
      width: 100%;
      padding: 8px 10px;
      border-radius: 3px;
      font-size: 1.6rem !important;
      line-height: 1.5;
      margin-bottom: 40px;
  }
  .textbox-001::placeholder,
  .textbox-002::placeholder {
      color: #999;
  }
  .textarea-001-label,
  .textarea-001,
  .textarea-002-label,
  .textarea-002 {
      color: #333;
  }
  .textarea-001-label,
  .textarea-002-label {
      display: block;
      margin-bottom: 5px;
      font-size: 1.6rem;
  }
  .textarea-001{
      width: 100%;
      padding: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 3px;
      font-size: 1.6rem;
      line-height: 1.5;
      height: 12rem;
  }
  .textarea-001::placeholder {
      color: #999;
  }
  .popup-modal-dismiss{
    background-color: #9f9f9f;
    border: 1px solid #9f9f9f;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    color: #fff;
    font-size: 1.6rem;
    transition: 0.3s;
    margin-right: 20px;
    border-radius:70px;
    padding: 14px;
    width: 14rem;
   }
   .popup-modal-dismiss:hover{
    background-color:#fff;
    color: #9f9f9f;
   }
  .popup-modal-done{
    background-color: #003f7e;
    border: 1px solid #003f7e;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    color: #fff;
    font-size: 1.6rem;
    transition: 0.3s;
    border-radius:70px;
    padding: 14px;
    width: 14rem;
   }
   .popup-modal-done:hover{
    background-color:#fff;
    color: #003f7e;
   }
   .btn-box{
    display: flex;
    justify-content: center;
    margin-top: 40px;
   }
/*-----------------
モーダル 保存完了
------------------*/
.white-popup-block.popup-end {
    max-width: 400px;
  }
.white-popup-block .modal-comment{
    text-align: center;
}
.white-popup-block .modal-comment p{
    font-size: 1.6rem;
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    line-height: normal;
}
.btn-box-close{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-box-close a{
    background-color: #003f7e;
    border: 1px solid #003f7e;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    color: #fff;
    font-size: 1.6rem;
    transition: 0.3s;
    border-radius:70px;
    padding: 14px;
    width: 14rem;
    margin-right: 0;
    }
    .btn-box-close a:hover {
        background-color:#fff;
        color: #003f7e;
    }