@charset "UTF-8";
/* #################################
###  プレースホルダー
################################# */
:-ms-input-placeholder {
  color: #dddddd;
}
::-ms-input-placeholder {
  color: #dddddd;
}
::-webkit-input-placeholder {
  color: #dddddd;
}
::-moz-placeholder {
  color: #dddddd;
}

/* #################################
###  表示／非表示切り替えclass
################################# */
/* displayがblockでないレイアウトパーツは当該classの記述箇所で個別に上書き */
.show {
	display: block;
}
.hide {
	display: none;
}

/* #################################
###  inputのデフォルトスタイル
################################# */

input[type="radio"],
input[type="checkbox"] {
	position: fixed;
	top: -101%;
	left: -101%;
}

input:disabled,
input:disabled + label {
	pointer-events: none;
}

/* #################################
###  label内imgのクリックイベントキャンセル
################################# */

label img {
	pointer-events: none;
}

/* #################################
###  カラー
################################# */
.simColorSquare {
  display: inline-block;
  vertical-align: middle;
}
.simResultContent .simColorSquare {
  margin-right: 5px;
  width: 15px;
  height: 15px;
}
.simNowBoxWrap .simColorSquare {
  width: 10px;
  height: 10px;
  margin-right: 2px;
}
.simColorSquare[data-color='black'], .simColorSquare[data-color='black_raschel'] {
  border: 1px solid black;
  background: black;
}
.simColorSquare[data-color='brown'], .simColorSquare[data-color='brown_raschel'] {
  border: 1px solid saddlebrown;
  background: saddlebrown;
}
.simColorSquare[data-color='silver'], .simColorSquare[data-color='silver_raschel'] {
  border: 1px solid silver;
  background: silver;
}
.simColorSquare[data-color='green'], .simColorSquare[data-color='green_raschel'] {
  border: 1px solid darkgreen;
  background: darkgreen;
}
.simColorSquare[data-color='white'], .simColorSquare[data-color='white_raschel'] {
  border: 1px solid #ddd;
  background: white;
}
.simColorSquare[data-color='orange'], .simColorSquare[data-color='orange_raschel'] {
  border: 1px solid orange;
  background: orange;
}
.simColorSquare[data-color='blue'], .simColorSquare[data-color='blue_raschel'] {
  border: 1px solid royalblue;
  background: royalblue;
}
.simColorSquare[data-color='yellow'], .simColorSquare[data-color='yellow_raschel'] {
  border: 1px solid yellow;
  background: yellow;
}
.simColorSquare[data-color='gray'], .simColorSquare[data-color='gray_raschel'] {
  border: 1px solid gray;
  background: gray;
}
/* #################################
###  お見積りシミュレーション結果
################################# */
.simResultBox {
  margin-top: 60px;
}
.simResultBox h2 {
  padding: 20px;
  background: #006699;
  font-size: 21px;
  color: #fff;
}
.simResultSub {
  float: left;
  margin-top: 30px;
  margin-right: 20px;
  width: 282px;
}
.simResultImg {
  width: 282px;
}
.simResultImg img {
  display: block;
  border: 1px solid #ccc;
}
.simResultImg .simResultImgTxt {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: #666;
}
.simResultImg .simResultImgTxt i {
  color: #0099ff;
}
.simNote {
  margin-top: 30px;
  border: 1px solid #cc0000;
  border-radius: 4px;
  background: #fff4f4;
}
.simNote .simNoteTtl {
  padding: 5px 8px;
  background: #cc0000;
  font-size: 13px;
  line-height: 1.3em;
  color: #fff4f4;
}
.simNote p {
  margin: 8px;
  font-size: 13px;
  line-height: 1.4em;
  color: #cc0000;
}
.simDeliverytime .simDeliverytimeTtl i, .simShipping .simShippingTtl i, .simNote .simNoteTtl i {
  margin-right: .25em;
}
.simShipping .simShippingTtl i {
  vertical-align: -0.15em;
}
.simDeliverytime, .simShipping {
  margin-top: 25px;
}
.simDeliverytimeTtl, .simShippingTtl {
  display: inline-block;
  border-radius: 1.2em;
  padding: 5px 12px 4px 12px;
  font-size: 14px;
  line-height: 1.4em;
  color: #fff;
}
.simDeliverytimeTtl {
  background: #ff9f02;
}
.simShippingTtl {
  background: #cc0000;
}
.simShipping p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4em;
  color: #cc0000;
}
.simDeliverytime p {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.3em;
}
.simDeliverytime p.simShipment {
  margin-top: 10px;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.3em;
}
.simShipping p a {
  color: #cc0000;
  text-decoration: underline;
}
.simShipping p a:hover, .simShipping p a:active {
  color: #ff0000;
  text-decoration: none;
}
.simResultContent {
  float: left;
  margin-top: 30px;
  width: 598px;
}
.simResultContent h3 {
  font-size: 16px;
  font-weight: bold;
}
.simResultContent .simResultTbl {
  margin-top: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-collapse: collapse;
  font-size: 14px;
}
.simResultContent .simResultTbl th {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-collapse: collapse;
  background: #efefef;
  vertical-align: top;
}
.simResultContent .simResultTbl td {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.simResultContent .simPriceTbl {
  margin-left: 188px;
  width: 410px;
  font-size: 14px;
}
.simResultContent .simPriceTbl th {
  padding: 15px 10px 4px 10px;
  border-bottom: 2px solid #ccc;
  vertical-align: bottom;
}
.simResultContent .simPriceTbl td {
  padding: 15px 10px 4px 10px;
  border-bottom: 2px solid #ccc;
  vertical-align: bottom;
  text-align: right;
}
.simResultContent .simPriceTbl td span {
  margin-right: 2px;
}
.simResultContent .simPriceTbl .counts {
  vertical-align: bottom;
}
.simResultContent .simPriceTbl .counts select {
  margin: 0 4px;
  padding: 4px 5px 2px 5px;
  border: 1px solid #ccc;
  font-weight: bold;
  vertical-align: bottom;
}
.simResultContent .simPriceTbl .subtotal th, .simResultContent .simPriceTbl .subtotal td {
  font-weight: bold;
}
.simResultContent .simPriceTbl .subtotal td span {
  font-size: 16px;
}
.simResultContent .simPriceTbl .total th, .simResultContent .simPriceTbl .total td {
  font-weight: bold;
  color: #cc0000;
}
.simResultContent .simPriceTbl .total td span {
  font-size: 21px;
}
.simResultContent .simResultRemarks {
  margin-top: 30px;
}
.simResultContent .simResultRemarks h3 span {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: normal;
}
.simResultContent .simResultRemarks textarea {
  margin-top: 10px;
  padding: 5px;
  width: 100%;
  border: 1px solid #ccc;
  font-size: 14px;
  line-height: 1.3em;
  box-sizing: border-box;
}
.simActions {
  align-items: center;
}
.simResetBtn {
  margin: 0 4px;
}
.simResetBtn br {
  display: none;
}
.simSubmitBtn {
  margin: 0 4px;
}
.simResetBtn button {
  padding: 21px 25px;
  background: #efefef;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1em;
  text-align: left;
  color: #666;
  cursor: pointer;
}
.simSubmitBtn button {
  padding: 20px 40px;
  background: #447ff6;
  border: 0 none transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1em;
  text-align: left;
  color: #fff;
  cursor: pointer;
}
.simResetBtn button:hover, .simResetBtn button:active, .simSubmitBtn button:hover, .simSubmitBtn button:active {
  opacity: 0.8;
}
.simResultBox .simPostage {
  margin-top: 10px;
  margin-left: 188px;
  font-size: 12px;
  line-height: 1.4em;
  color: #cc0000;
}
.simResultBox .simoogata {
  color: #FF9F02;
  border: solid 2px #FF9F02;
  border-radius: 7px;
  padding: 4px;
  font-size: 13px;
  line-height: 22px;
  margin-top: 20px;
  margin-left: 188px;
  font-weight: bold;
  text-align: center;
}
.simResultBox .simPostage a {
  text-decoration: underline;
  color: #cc0000;
}
.simResultBox .simPostage a:hover, .simResultBox .simPostage a:active {
  color: #ff0000;
}
.simProposal {
  margin-top: 40px;
  margin-left: 188px;
}
.simProposalInput {
  display: -ms-flexbox;
  display: flex;
  margin-top: 15px;
  width: 410px;
  box-sizing: border-box;
}
.simProposalInput .simOptInputBox {
  width: 200px;
  box-sizing: border-box;
}
/* #################################
###  ページTOPリンク 暫定非表示
################################# */
#footerArea .bottom-menu {
  display: none !important;
}
/* #################################
###  keyframes
################################# */
@keyframes fadeIn {
  0% {
    opacity: 0;
    margin-top: -15px;
  }
  1% {
    opacity: 0;
    margin-top: -15px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes fadeSim {
  0% {
    opacity: 0;
    left: 685px;
  }
  1% {
    opacity: 0;
    left: 685px;
  }
  100% {
    opacity: 1;
    left: 695px;
  }
}
/* #################################
###  media query
################################# */
/* Small devices (480px and down) */
@media (max-width: 480px) {
  /* #################################
	###  お見積りシミュレーション結果
	################################# */
  .simResultBox {}
  .simResultBox h2 {
    padding: 10px;
    font-size: 18px;
    font-weight: normal;
  }
  .simResultSub {
    float: none;
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
  }
  .simResultContent {
    float: none;
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
  }
  .simResultImg {
    width: 100%;
  }
  .simResultImg img {
    width: 100%;
  }
  .simResultContent .simResultTbl {
    font-size: 12px;
  }
  .simResultContent .simResultTbl th, .simResultContent .simResultTbl td {
    padding: 6px;
  }
  .simResultContent .simPriceTbl {
    margin-left: 0;
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
  }
  .simResultContent .simPriceTbl th {
    padding: 15px 10px 4px 0;
  }
  .simResultBox .simPostage {
    margin-left: 0;
    padding-left: 2em;
    text-indent: -1.25em;
  }
  .simResultContent .simResultRemarks textarea {
    font-size: 16px;
  }
  .simResetBtn {
    width: 30%;
  }
  .simResetBtn br {
    display: block;
  }
  .simResetBtn button {
    padding: 0 10px;
    width: 100%;
    height: 46px;
    font-size: 11px;
    line-height: 1.2em;
    box-sizing: border-box;
  }
  .simSubmitBtn button {
    padding: 0 15px;
    height: 46px;
    font-size: 16px;
    font-weight: normal;
  }
}