@charset "utf-8";



/*------------------------------------------------------------

商品一覧出力関係

------------------------------------------------------------*/

#container #main .arrivalBox .infoBox .listUl {

  display: -webkit-flex;

  flex-wrap: wrap;

  justify-content: space-between;

  font-size: 1.1rem;

  align-items: stretch;

}



#container #main .arrivalBox .infoBox .listUl li {

  padding: 0;

}



#container #main .arrivalBox .infoBox .listUl:before {

  content: "";

  display: block;

  width: 294.24px;

  height: 0;

  order: 1;

}



#container #main .arrivalBox .infoBox .listUl:after {

  content: "";

  display: block;

  width: 50%;

  height: 0;

}



#container #main .arrivalBox .infoBox .listUl li {

  padding: 0;

}



/*------------------------------------------------------------

モーダル設定

------------------------------------------------------------*/

/*#modal-content{

width:50%;

margin:1.5em auto 0;

padding:10px 20px;

border:2px solid #aaa;

background:#fff;

z-index:102;

position:fixed;

}



.modal-p{

margin-top:1em;

}



.modal-p:first-child{

margin-top:0;

}



.button-link{

color:#00f;

text-decoration:underline;

}



.button-link:hover{

cursor:pointer;

color:#f00;

}



#modal-overlay{

z-index:101;

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:120%;

background-color:rgba(0,0,0,0.75);

}

*/

body.modal-active {

  overflow: hidden;

  height: 100%;

}



.modal-content {

  width: 50%;

  height: -webkit-fit-content;

  height: -moz-fit-content;

  height: fit-content;

  max-height: 85%;

  padding: 10px 20px;

  /*border: 2px solid #aaa;*/

  background: #fff;

  position: fixed;

  display: none;

  overflow-y: scroll;

  overflow-x: hidden;

  z-index: 10000;

  top: 24px;

  right: 0px;

  left: 0px;

  bottom: 100px;

  margin: auto;

}



/*商品一覧*/

.arrivalBox .infoBox .modal-content {

  /*overflow-y: scroll;*/

  background: #000;

  color: #fff;

  width: 100%;

  height: 100%;

  max-height: 100% !important;

  -ms-overflow-style: none;

  top: 0 !important;

  left: 0 !important;

  padding: 0;

}



.arrivalBox .infoBox .modal-content::-webkit-scrollbar {

  display: none;

}



.arrivalBox .infoBox .modal-content .modal-title {

  font-size: 1rem;

}



#main .arrivalBox .infoBox .modal-content .css-cancel {

  background: #fff;

}



#main .arrivalBox .infoBox .modal-content .css-cancel:before {

  background: #fff;

}



#main .arrivalBox .infoBox .modal-content li {

  padding: 0;

  width: 100%;

  box-sizing: border-box;

  position: relative;

}



/*

#main .arrivalBox .infoBox .modal-content li img {

width: 20%;

margin: 0 auto;

float: left;

padding-right: 2%;

}*/

/*#main .arrivalBox .infoBox .modal-content li span {

padding-right: 7%;

float: left;

display: block;

width: 13%;

}*/

#main .arrivalBox #modal-product-container {

  /*    position: relative; */

  /*    overflow: hidden; */

  width: 100%;

  height: 100%;

}



#main .arrivalBox #modal-product-container .modal-content-block {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow-y: scroll;

  overflow-x: hidden;

  background-color: #000;

}



#main .arrivalBox #modal-product-container .modal-content-block .arrival-slider {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 95px;

  width: 100%;

  max-width: 700px;

  z-index: 10000;

  margin: auto;

  background-color: #fff !important;

}



#main .arrivalBox #modal-product-container .modal-content-block .arrival-slider div {

  background-color: #fff;

  height: 100%;

}



#main .arrivalBox #modal-product-container .modal-content-block .arrival-slider div img {

  width: auto;

  height: auto;

  max-width: 100%;

  max-height: 100%;

  margin: 0 auto;

  cursor: pointer;

}



#main .arrivalBox #modal-product-container .modal-content-block .arrival-slider .slick-prev:before,

#main .arrivalBox #modal-product-container .modal-content-block .arrival-slider .slick-next:before {

  color: #000;

}



#main .arrivalBox #modal-product-container .modal-content-block .slick-next {}



#main .arrivalBox #modal-product-container .modalContent {

  background-color: #fff;

  height: 100px;

}



#main .arrivalBox #modal-product-container .modal-main-image {

  //    position: absolute;

  //    top: 0;

  //    left: 0;

  width: 100%;

  //    height: 100%;

  padding-top: 20px;

}



#main .arrivalBox #modal-product-container .modal-main-image img {

  display: block;

  margin: 0 auto;

  width: 100%;

  max-width: 1000px;

  height: auto;

}



#main .arrivalBox .infoBox .modal-content .modal-content-block {

  overflow: hidden;

  height: 100%;

}



#main .arrivalBox .infoBox .modal-content .modal-main-image {

  width: 100%;

  position: absolute;

  top: 23%;

  overflow-y: scroll;

  z-index: 10000;

  padding: 0 0 3% 0;

}



#main .arrivalBox .infoBox .modal-content .modal-main-image img {

  width: auto;

  height: auto;

  max-width: 100%;

  max-height: 100%;

  margin: 0;

}



#main .arrivalBox .infoBox .modal-content .modalContent {

  width: 100%;

  height: 20%;

  z-index: 100000;

  position: fixed;

  top: 0;

  background: #000;

  padding: 13px 0;

}



#main .arrivalBox .infoBox .modal-content .modalContent ul {

  width: 85%;

  height: 100%;

  display: -moz-box;

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-justify-content: center;

  justify-content: center;

  align-items: center;

  margin: 0 auto;

}



#main .arrivalBox .infoBox .modal-content .modalContent ul li {

  width: initial !important;

  margin: 0 5px;

}



#main .arrivalBox .infoBox .modal-content .modalContent ul.item-images {}



#main .arrivalBox .infoBox .modal-content .modalContent ul li img {

  width: 120px;

  height: auto;

  display: block;

  cursor: pointer;

}



#main .arrivalBox .infoBox .modal-content .modalContent ul li span {

  display: block;

  height: 15%;

}



#modal-overlay {

  z-index: 1000;

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 120%;

  background-color: rgba(0, 0, 0, 0.75);

}



.button-link {

  color: #00f;

  text-decoration: underline;

}



.button-link:hover {

  cursor: pointer;

  color: #f00;

}



/*------------------------------------------------------------

閉じるボタン

------------------------------------------------------------*/

.modal-title {

  position: relative;

}



#modal-close {

  width: 30px;

  height: 30px;

  position: absolute;

  top: 35px;

  left: 91%;

  z-index: 100000;

  cursor: pointer;

}



.css-cancel {

  display: inline-block;

  position: relative;

  margin: 0 20px 0 14px;

  padding: 0;

  width: 1px;

  height: 36px;

  background: #000;

  transform: rotate(45deg);

  position: absolute;

  /*left:100%;*/

  top: 0;

}



.css-cancel:before {

  display: block;

  content: "";

  position: absolute;

  top: 50%;

  left: -17px;

  width: 36px;

  height: 1px;

  margin-top: -1.2px;

  background: #000;

}



/*------------------------------------------------------------

モーダル表示テキスト設定

------------------------------------------------------------*/

/*company profile*/

.company-profile #modal-01 {

  width: 36%;

  padding: 2em 3em;

  overflow-x: hidden;

  overflow-y: auto;

}



.company-profile #modal-01 .modal-title {

  text-align: center;

  border-bottom: 1px solid #000000;

  padding-bottom: 1%;

  margin-bottom: 1%;

  font-family: 'Roboto', sans-serif;

  font-weight: 700;

  font-size: 2rem;

  letter-spacing: 1px;

  /*text-indent: -9999px;

	background: url(../img/common/company-profile.jpg) no-repeat;

	background-position: 50%;

	background-size: 39%;*/

}



.company-profile #modal-01 dt {

  width: 25%;

  float: left;

  margin-right: 20px;

  padding: 5px 0;

  font-size: 11px;

}



.company-profile #modal-01 dd {

  width: 60%;

  float: left;

  padding: 5px 0;

  font-size: 11px;

}



#gFooter .fInner .fNavi li.company-profile #modal-01 dd a {

  background: none;

  padding-left: 0;

  color: #000000;

  font-size: 11px;

}



/*privacy-policy*/

/*#modal-02 {

display:none;}*/

.privacy-policy #modal-02 {

  width: 36%;

  padding: 2em 3em;

  /*overflow-x: hidden;

	overflow-y: hidden;

	height: auto;*/

}



.privacy-policy #modal-02.modal-content {

  width: 50%;

  -ms-overflow-style: none;

  text-align: left;

  position: fixed;

  z-index: 10000;

}



.privacy-policy #modal-02.modal-content::-webkit-scrollbar {

  display: none;

}



.privacy-policy #modal-02 .modal-title {

  text-align: center;

  border-bottom: 1px solid #000000;

  padding-bottom: 1%;

  margin-bottom: 1%;

  font-family: 'Roboto', sans-serif;

  font-weight: 700;

  font-size: 2rem;

  letter-spacing: 1px;

  /*text-indent: -9999px;

	background: url(../img/common/privacy-policy.jpg) no-repeat;

	background-position: 50%;

	background-size: 35%;*/

}



.privacy-policy #modal-02 p {

  margin-bottom: 3%;

}



/*コンタクト*/

.contact-form #modal-03.modal-content {

  -ms-overflow-style: none;

  position: fixed;

  z-index: 10000;

  overflow-y: scroll;

  margin-top: 20px;

}



.contact-form #modal-03.modal-content::-webkit-scrollbar {

  display: none;

}



.contact .modal-title {

  text-align: center;

  font-family: 'Roboto', sans-serif;

  font-weight: 700;

  font-size: 2rem;

  letter-spacing: 1px;

  /*background: url(../img/common/contact.gif) no-repeat;

	background-position: 50%;

	background-size: 19%;

	text-indent: -9999px;*/

  border-bottom: 1px solid #000000;

}



.contact-form #modal-close {

  top: 26%;

}



.contact table {

  width: 100%;

}



.contact tr {

  display: block;

  border-bottom: 1px solid #eee;

  padding: 3%;

  text-align: left;

}



.contact td {

  width: 69%;

  display: inline-block;

  box-sizing: border-box;

  text-indent: 0px;

}



.contact td.privatePolicyLink {

  height: 249px;

  overflow-y: scroll;

  text-indent: 0;

  text-decoration: none;

  margin-bottom: 3%;

  border: none;

  border: 1px solid #eae5e5;

  padding: 20px;

}



.contact td input[type="text"],

.contact td input[type="tel"],

.contact td input[type="email"],

.contact td textarea {

  width: 100%;

  display: block;

  box-sizing: border-box;

  border: 1px solid #cecbcb;

  padding: 10px;

}



#gFooter .fInner .fNavi li .contact td.privatePolicyLink a {

  color: #000;

  background: none;

  border: none;

  color: #36969e;

  text-decoration: underline;

  font-size: 0.9rem;

}



#gFooter .fInner .fNavi li .contact td.privatePolicyLink a:hover {

  opacity: 0.5;

}



.contact .contactTitle {

  width: 30%;

  display: inline-block;

  box-sizing: border-box;

  border: none;

  font-size: 12px;

  text-indent: 0px;

}



.contact .postNum td {

  width: 20%;

}



.contact .postNum td #get-zipcode {

  padding: 6% 13%;

  border: 1px solid #fff;

  background-color: #000;

  color: #fff;

  cursor: pointer;

  margin-right: 18px;

  margin-top: 13px;

}



.contact .postNum .contactTitle {

  width: 30%;

}



.contact .colorRed {

  color: #ca0808;

  font-weight: bold;

}



/*#modal-03.modal-content {

overflow: scroll!important;

}*/

.contact td.sendBtn {

  text-indent: 0px;

  border: none;

  margin: 0 auto;

  text-align: center;

  color: #fff;

  display: block;

  width: 40%;

  box-sizing: border-box;

}



.contact td.sendBtn .message input,

.contact td.sendBtn .form-back input {

  padding: 3% 5%;

  border: 1px solid #fff;

  background-color: #000;

  color: #fff;

  cursor: pointer;

  margin-right: 18px;

}



.contact td.sendBtn .form-submit input {

  padding: 3% 10%;

  border: 1px solid #fff;

  background-color: #d03434;

  color: #fff;

  cursor: pointer;

}



.contact td.sendBtn .message input {

  padding: 5% 23%;

  border: 1px solid #fff;

  background-color: #000;

  color: #fff;

  cursor: pointer;

}



.contact td.sendBtn .message input:disabled {

  background-color: #808080;

  cursor: not-allowed;

}



#gFooter .fInner .fNavi li a.message {

  font-size: 1.3rem;

  padding: 2%;

  background: none;

  background: #36969e;

  display: block;

  text-decoration: none;

}



#gFooter .fInner .fNavi li a.message:hover {

  opacity: 0.5;

}



/*.contact .postNum {

width: 30%;

display: inline-block;

}



.contact .address {

width: 69%;

display: inline-block;

}*/

.contact td.select {

  text-indent: 0;

  margin-bottom: 2%;

  border: none;

  text-align: left;

}



.contact .agree {

  text-indent: 0;

  border: none;

}



.agree input {

  vertical-align: middle;

}



input:-webkit-autofill,

textarea:-webkit-autofill,

select:-webkit-autofill {

  background-color: #fff;

}



#modal-product-spec {

  margin: 25px auto;

  text-align: left;

}



#modal-product-spec dl {

  width: 650px;

  margin: 0 auto;

  display: -moz-box;

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-justify-content: center;

  justify-content: center;

  flex-wrap: wrap;

}



#modal-product-spec dt {

  background: #252222;

  color: #fff;

  width: 15%;

  border: 1px solid #ccc;

  border-bottom: none;

  border-right: none;

  box-sizing: border-box;

  padding: 10px;

  line-height: 2;

}



#modal-product-spec dd {

  background: #fff;

  color: #000;

  width: 85%;

  border: 1px solid #ccc;

  border-bottom: none;

  box-sizing: border-box;

  padding: 10px;

}



#modal-product-spec dd:last-of-type,

#modal-product-spec dt:last-of-type {

  border-bottom: 1px solid #ccc;

}



@media all and (min-width: 768px) and (max-width: 1281px) {

  .company-profile #modal-01 dt {

    width: 100%;

    float: none;

    font-size: 10px;

  }



  .company-profile #modal-01 dd {

    width: 100%;

    float: none;

    font-size: 10px;

  }



  #gFooter .fInner .fNavi li.company-profile dd a {

    font-size: 10px;

  }



  #gFooter .fInner .fNavi li a.message {

    font-size: 1rem;

  }



  #modal-close {

    top: 9%;

    left: 86%;

  }



  .privacy-policy #modal-close {

    top: 7%;

  }



  .contact td.privatePolicyLink {

    height: 100px;

    overflow-y: scroll;

    text-indent: 0;

    text-decoration: none;

    margin-bottom: 3%;

    border: none;

  }

}



@media all and (min-width: 0) and (max-width: 767px) {

  .company-profile #modal-01 {

    width: 70%;

    padding: 9%;

    margin-top: -10px;

  }



  .company-profile #modal-01 .modal-title {

    background-size: 66%;

  }



  .company-profile #modal-01 dt {

    width: 100%;

    float: none;

    font-size: 10px;

  }



  .company-profile #modal-01 dd {

    width: 100%;

    float: none;

    font-size: 10px;

  }



  .privacy-policy #modal-02 .modal-title {

    background-size: 66%;

  }



  .privacy-policy #modal-02 p {

    text-align: left;

    margin: 0 auto 3%;

  }



  #gFooter .fInner .fNavi li.company-profile dd a {

    font-size: 10px;

  }



  .company-profile #modal-close {

    left: 91%;

    top: -8vw;

  }



  .privacy-policy #modal-close {

    top: 2%;

    left: 86%;

  }



  /*商品一覧*/

  #main .arrivalBox .infoBox .modal-content {

    top: 50px !important;

    max-height: 80% !important;

  }



  .company-profile .modal-content .css-cancel {

    width: 2px;

    height: 20px;

    background: #000;

    ;

  }



  .close_box {

    position: relative;

  }



  .company-profile .modal-content .css-cancel:before {

    left: -9px;

    width: 20px;

    height: 2px;

    background: #000;

  }



  #main .arrivalBox .infoBox .modal-content li img {

    width: 95%;

    margin: 2% auto;

    float: none;

    padding-right: 0;

  }



  /*contact*/

  #modal-03.modal-content {

    width: 85%;

    padding: 10px;

  }



  .contact-form #modal-03 .modal-title {

    background-size: 66%;

  }



  .contact td {

    width: 100%;

    text-align: left;

    padding: 1% 0;

  }



  .contact .contactTitle {

    width: 100%;

    display: block;

    font-size: 0.8rem;

    text-align: left;

  }



  .contact .postNum td {

    width: 45%;

    display: block;

  }



  .contact td.sendBtn {

    width: 84%;

    display: block;

  }



  #gFooter .fInner .fNavi li a.message {

    font-size: 1rem;

  }



  .contact #modal-close {

    top: 20%;

    left: 80%;

  }

}



@media all and (min-width: 0) and (max-width: 420px) {

  .company-profile #modal-01 .modal-title {

    background-size: 82%;

    font-size: 1rem;

  }



  .privacy-policy #modal-02 .modal-title {

    background-size: 70%;

  }



  .privacy-policy #modal-close {

    top: 5%;

  }



  .contact-form #modal-03 .modal-title {

    background-size: 38%;

  }



  #modal-product-spec {

    margin: 25px auto;

  }



  #modal-product-spec dl {

    width: 90%;

  }



  #modal-product-spec dt {

    width: 100%;

    border-right: 1px solid #ccc;

  }



  #modal-product-spec dd {

    width: 100%;

    border-right: 1px solid #ccc;

  }

}



div.wpcf7-response-output {

  margin: 0em 0em 0em !important;

  padding: 10px 10px !important;

  text-align: center;

}



div.wpcf7-validation-errors {

  border: 2px solid #1b1b1a !important;

}



.wpcf7c-conf {

  background-color: #e6e6e6 !important;

}