@charset "UTF-8";

#modal-00eq .modal-dialog {
  max-width: 500px;
}

#modal-00eq .etg-info-block {
  margin: 0;
  padding:0 5px;
  background: #FFF;
  border: 5px solid rgba(0,0,0,0.4);
  font-size: 1.2rem;
}

/* 材種検索 切削領域チャート */
.equiv-result {
  overflow-x: auto;
}
.chart-region {
  position: relative;
  background: #FFFFFF;
  min-width: 620px;
  width: 98%;
  margin: 0 auto;
  /*max-width: 620px;*/
  /*display: inline-block;*/
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
}
.chart-region-kataban {
  min-width: 310px;
  width: 98%;
}

/* 材種検索 切削領域チャート 矢印表示 */
.mark_arrow {
  margin: 5px 0;
  display:flex;
}
div.arrow_wrapper{
  width: calc(100% - 60px);
  height: 34px;
	position:relative;
	display:inline-block;
	padding:0;
}
div.arrow{
	position:absolute;
	left:10px;
	top:15px;
	width:calc(100% - 20px);
	height:4px;
	background-color:#000;
}
div.arrow:before{
	position:absolute;
	top:-6px;
	left:-10px;
	content:'';
	display:inline-block;
	border:8px solid transparent;
	border-right:8px solid #000;
}
div.arrow:after{
	content:'';
	position:absolute;
	top:-6px;
	right:-10px;
	display:inline-block;
	border:8px solid transparent;
	border-left:8px solid #000;
}
div.mark_finish{
  margin-left: 10px;
  height:34px;
}
div.mark_rough{
  margin-right: 10px;
  height:34px;
}
div.mark_finish > img,
div.mark_rough > img{
  width: 30px;
  height: 30px;
  margin: 2px 0;
}
/* /材種検索 切削領域チャート 矢印表示 */

/* 材種検索 切削領域チャート ヘッダ、罫線表示 */
.chart-region-head {
  position: absolute;
  background: #fff;
  width: calc(100% - 20px);
  height: calc(100% - 95px);
  display: flex;
  box-sizing: content-box;
  margin: 10px;
}
.chart-region-head .vertical-line {
  border-right: 1px solid #333;
  height: 100%;
  width: 100%;
}
.chart-region-head .vertical-line.last {
  border-right: 0;
}
.chart-region-head .header{
  width: 100%;
  height: 25px;
  display: flex;
  border-bottom: 1px solid #333;
  text-align:center;
  padding-left: 35%;
}
/* /材種検索 切削領域チャート ヘッダ、罫線表示 */

/* 材種検索 切削領域チャート データ表示部 */
.chart-region-body {
  width: calc(100% - 20px);
  height: 100%;
  display: flex;
  margin: 45px 10px 10px 10px;
}
.chart-region-body .row {
  width: 100%;
  margin: 0;
}
.chart-region-row {
  height: 100%;
  max-height: 40px;
  display: flex;
  padding: 0;
}
.chart-region-col {
  position: relative;
  display: flex;
  height: 30px;
  margin: 5px 0;
  margin-left: 0px;
  line-height: 30px;
  text-align : center;
  box-sizing: border-box;
  white-space: nowrap;
}
/* /材種検索 切削領域チャート データ表示部 */

/* 材種検索 切削領域チャート データ表示幅(6分割) */
.chart-region-col.r-cols6.r-w0 { width: 0; }
.chart-region-col.r-cols6.r-w25 { width: calc(100% / 6 * 0.25); }
.chart-region-col.r-cols6.r-w50 { width: calc(100% / 6 * 0.5); }
.chart-region-col.r-cols6.r-w75 { width: calc(100% / 6 * 0.75); }
.chart-region-col.r-cols6.r-w100 { width: calc(100% / 6); }
.chart-region-col.r-cols6.r-w125 { width: calc(100% / 6 * 1.25); }
.chart-region-col.r-cols6.r-w150 { width: calc(100% / 6 * 1.5); }
.chart-region-col.r-cols6.r-w175 { width: calc(100% / 6 * 1.75); }
.chart-region-col.r-cols6.r-w200 { width: calc(100% / 6 * 2); }
.chart-region-col.r-cols6.r-w225 { width: calc(100% / 6 * 2.25); }
.chart-region-col.r-cols6.r-w250 { width: calc(100% / 6 * 2.5); }
.chart-region-col.r-cols6.r-w275 { width: calc(100% / 6 * 2.75); }
.chart-region-col.r-cols6.r-w300 { width: calc(100% / 6 * 3); }
.chart-region-col.r-cols6.r-w325 { width: calc(100% / 6 * 3.25); }
.chart-region-col.r-cols6.r-w350 { width: calc(100% / 6 * 3.5); }
.chart-region-col.r-cols6.r-w375 { width: calc(100% / 6 * 3.75); }
.chart-region-col.r-cols6.r-w400 { width: calc(100% / 6 * 4); }
.chart-region-col.r-cols6.r-w425 { width: calc(100% / 6 * 4.25); }
.chart-region-col.r-cols6.r-w450 { width: calc(100% / 6 * 4.5); }
.chart-region-col.r-cols6.r-w475 { width: calc(100% / 6 * 4.75); }
.chart-region-col.r-cols6.r-w500 { width: calc(100% / 6 * 5); }
.chart-region-col.r-cols6.r-w525 { width: calc(100% / 6 * 5.25); }
.chart-region-col.r-cols6.r-w550 { width: calc(100% / 6 * 5.5); }
.chart-region-col.r-cols6.r-w575 { width: calc(100% / 6 * 5.75); }
.chart-region-col.r-cols6.r-w600 { width: calc(100% / 6 * 6); }

/* 材種検索 切削領域チャート データ表示幅(5分割) */
.chart-region-col.r-cols5.r-w0 { width: 0; }
.chart-region-col.r-cols5.r-w25 { width: calc(100% / 5 * 0.25); }
.chart-region-col.r-cols5.r-w50 { width: calc(100% / 5 * 0.5); }
.chart-region-col.r-cols5.r-w75 { width: calc(100% / 5 * 0.75); }
.chart-region-col.r-cols5.r-w100 { width: calc(100% / 5); }
.chart-region-col.r-cols5.r-w125 { width: calc(100% / 5 * 1.25); }
.chart-region-col.r-cols5.r-w150 { width: calc(100% / 5 * 1.5); }
.chart-region-col.r-cols5.r-w175 { width: calc(100% / 5 * 1.75); }
.chart-region-col.r-cols5.r-w200 { width: calc(100% / 5 * 2); }
.chart-region-col.r-cols5.r-w225 { width: calc(100% / 5 * 2.25); }
.chart-region-col.r-cols5.r-w250 { width: calc(100% / 5 * 2.5); }
.chart-region-col.r-cols5.r-w275 { width: calc(100% / 5 * 2.75); }
.chart-region-col.r-cols5.r-w300 { width: calc(100% / 5 * 3); }
.chart-region-col.r-cols5.r-w325 { width: calc(100% / 5 * 3.25); }
.chart-region-col.r-cols5.r-w350 { width: calc(100% / 5 * 3.5); }
.chart-region-col.r-cols5.r-w375 { width: calc(100% / 5 * 3.75); }
.chart-region-col.r-cols5.r-w400 { width: calc(100% / 5 * 4); }
.chart-region-col.r-cols5.r-w425 { width: calc(100% / 5 * 4.25); }
.chart-region-col.r-cols5.r-w450 { width: calc(100% / 5 * 4.5); }
.chart-region-col.r-cols5.r-w475 { width: calc(100% / 5 * 4.75); }
.chart-region-col.r-cols5.r-w500 { width: calc(100% / 5 * 5); }
.chart-region-col.r-cols5.r-w525 { width: calc(100% / 5 * 5.25); }
.chart-region-col.r-cols5.r-w550 { width: calc(100% / 5 * 5.5); }
.chart-region-col.r-cols5.r-w575 { width: calc(100% / 5 * 5.75); }
.chart-region-col.r-cols5.r-w600 { width: calc(100% / 5 * 6); }

/* 材種検索 切削領域チャート データ表示幅(4分割) */
.chart-region-col.r-cols4.r-w0 { width: 0; }
.chart-region-col.r-cols4.r-w25 { width: calc(100% / 4 * 0.25); }
.chart-region-col.r-cols4.r-w50 { width: calc(100% / 4 * 0.5); }
.chart-region-col.r-cols4.r-w75 { width: calc(100% / 4 * 0.75); }
.chart-region-col.r-cols4.r-w100 { width: calc(100% / 4); }
.chart-region-col.r-cols4.r-w125 { width: calc(100% / 4 * 1.25); }
.chart-region-col.r-cols4.r-w150 { width: calc(100% / 4 * 1.5); }
.chart-region-col.r-cols4.r-w175 { width: calc(100% / 4 * 1.75); }
.chart-region-col.r-cols4.r-w200 { width: calc(100% / 4 * 2); }
.chart-region-col.r-cols4.r-w225 { width: calc(100% / 4 * 2.25); }
.chart-region-col.r-cols4.r-w250 { width: calc(100% / 4 * 2.5); }
.chart-region-col.r-cols4.r-w275 { width: calc(100% / 4 * 2.75); }
.chart-region-col.r-cols4.r-w300 { width: calc(100% / 4 * 3); }
.chart-region-col.r-cols4.r-w325 { width: calc(100% / 4 * 3.25); }
.chart-region-col.r-cols4.r-w350 { width: calc(100% / 4 * 3.5); }
.chart-region-col.r-cols4.r-w375 { width: calc(100% / 4 * 3.75); }
.chart-region-col.r-cols4.r-w400 { width: calc(100% / 4 * 4); }
.chart-region-col.r-cols4.r-w425 { width: calc(100% / 4 * 4.25); }
.chart-region-col.r-cols4.r-w450 { width: calc(100% / 4 * 4.5); }
.chart-region-col.r-cols4.r-w475 { width: calc(100% / 4 * 4.75); }
.chart-region-col.r-cols4.r-w500 { width: calc(100% / 4 * 5); }
.chart-region-col.r-cols4.r-w525 { width: calc(100% / 4 * 5.25); }
.chart-region-col.r-cols4.r-w550 { width: calc(100% / 4 * 5.5); }
.chart-region-col.r-cols4.r-w575 { width: calc(100% / 4 * 5.75); }
.chart-region-col.r-cols4.r-w600 { width: calc(100% / 4 * 6); }

/* 材種検索 切削領域チャート 検索元の他社製品 */
.chart-region-col.base {
  background:linear-gradient(90deg,
    rgba(255,255,255,0.2), 
    rgba(238,240,243,0.8) 2%, 
    rgba(220,221,223,1.0) 7%, 
    rgba(192,192,192,1.0) 15%, 
    rgba(192,192,192,1.0) 85%, 
    rgba(220,221,223,1.0) 93%, 
    rgba(238,240,243,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.base p {
  position: absolute;
  left:-100%;
  right:-100%;
  margin: auto;
}
.chart-region-col.base p a {
  color: #000;
}
/* 材種検索 切削領域チャート おすすめ1～3位 */
.chart-region-col.reco {
  background:linear-gradient(90deg,
    rgba(255,255,255,0.2),
    rgba(206,225,242,0.8) 2%,
    #105464 7%,
    #092F38 15%,
    #092F38 85%,
    #105464 93%,
    rgba(206,225,242,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.reco p {
  margin: 0 auto;
}
.chart-region-col.reco p span {
  color: #FFF;
  background: rgba(9, 47, 56, 0.5);
  padding: 0 2px;
}
.chart-region-col.reco p a {
  color: #FFF;
}
.chart-region-col.reco > i {
  height: 30px;
  line-height: 30px;
}
/* 材種検索 切削領域チャート おすすめ以外 */
.chart-region-col.gene {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(238,240,243,0.8) 2%, 
    rgba(220,221,223,1.0) 7%, 
    rgba(192,192,192,1.0) 15%, 
    rgba(192,192,192,1.0) 85%, 
    rgba(220,221,223,1.0) 93%, 
    rgba(238,240,243,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
/*
.chart-region-col.gene-p-0,
.chart-region-col.gene-p-1 {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(209,227,243,0.8) 2%, 
    rgba(181,210,236,1.0) 17%, 
    rgba(51,102,205,1.0) 35%, 
    rgba(51,102,205,1.0) 65%, 
    rgba(181,210,236,1.0) 83%, 
    rgba(209,227,243,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.gene-m-0 {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(249,251,196,0.8) 2%, 
    rgba(251,253,123,1.0) 17%, 
    rgba(255,255,0,1.0) 35%, 
    rgba(255,255,0,1.0) 65%, 
    rgba(251,253,123,1.0) 83%, 
    rgba(249,251,196,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.gene-k-0,
.chart-region-col.gene-k-1 {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(249,193,195,0.8) 2%, 
    rgba(251,125,127,1.0) 17%, 
    rgba(255,0,0,1.0) 35%, 
    rgba(255,0,0,1.0) 65%, 
    rgba(251,125,127,1.0) 83%, 
    rgba(249,193,195,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.gene-n-0 {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(207,231,223,0.8) 2%, 
    rgba(149,202,178,1.0) 17%, 
    rgba(51,153,102,1.0) 35%, 
    rgba(51,153,102,1.0) 65%, 
    rgba(149,202,178,1.0) 83%, 
    rgba(207,231,223,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.gene-s-0,
.chart-region-col.gene-s-1 {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(219,192,179,0.8) 2%, 
    rgba(200,151,127,1.0) 17%, 
    rgba(153,51,0,1.0) 35%, 
    rgba(153,51,0,1.0) 65%, 
    rgba(200,151,127,1.0) 83%, 
    rgba(219,192,179,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.gene-h-0 {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(238,240,243,0.8) 2%, 
    rgba(220,221,223,1.0) 17%, 
    rgba(192,192,192,1.0) 35%, 
    rgba(192,192,192,1.0) 65%, 
    rgba(220,221,223,1.0) 83%, 
    rgba(238,240,243,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
.chart-region-col.gene-sm-0 {
  background:linear-gradient(90deg, 
    rgba(255,255,255,0.2), 
    rgba(209,231,254,0.8) 2%, 
    rgba(180,217,254,1.0) 17%, 
    rgba(113,184,255,1.0) 35%, 
    rgba(113,184,255,1.0) 65%, 
    rgba(180,217,254,1.0) 83%, 
    rgba(209,231,254,0.8) 98%,
    rgba(255,255,255,0.2) 100%);
}
*/
.chart-region-col.gene p {
  margin: 0 auto;
}
.chart-region-col.gene p span {
  color: #000;
  background: rgba(192,192,192,0.5);
  padding: 0 2px;
}
.chart-region-col.gene p a {
  color: #000;
  font-weight: bolder;
}

#equiv-result-area .change-button-group .noaction-btn{
    background: #092F38 ;
    color: #fff;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    border-radius: .25rem;
    cursor: auto;
}

#equiv-result-area .change-button-group {
  overflow-x: auto;
}

/* 材種検索 切削領域チャート 注釈文 */
.graph-note p{
  font-size: smaller;
  padding-left: 1rem;
  text-indent: -1rem;
  margin: 0;
}
.graph-note p.research{
  text-indent: 0;
}

.equiv-not-found {
  padding: 0.5rem 0;
}

.equiv-container {
  padding-top: 0;
}

.equiv-conditions {
  background-color: #EFEFEF;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

.equiv-category-title {
  margin-left: 0.5rem;
}
.serach-equiv .condition{
  margin: 0 0.5rem;
}
.serach-equiv .reset-btn{
  background: #CCC !important;
  color: #000 !important;
  /*margin: 1rem;*/
}
.serach-equiv .sort-btn{
  background: #0C53B3 !important;
  color: #fff !important;
}
.serach-equiv .sort-btn:disabled{
  background: #CCC !important;
  color: #000 !important;
  /*opacity: 1;*/
}

.serach-equiv .change-button-group dd{
  padding: 0 10px;
}

.result-item-equiv{
    margin: 0 0 10px 0;
    padding: 0;
    border: 0;
}
.result-item-equiv .setting-btn{
  margin: 0 0 1rem;
}

.result-item-equiv .setting-btn > div{
  border-radius: 20px;
}

.result-item-equiv .result-parent{
  margin: 0 0 10px;
}


/*.equiv-ranking{ color:#fff;}*/
/*.equiv-ranking-gold{ background:#e3bc61;}*/
/*.equiv-ranking-silver{ background:#d4d4d4;}*/
/*.equiv-ranking-bronze{ background:#daa58d;}*/
.fa-medal.equiv-1{ color:#c59e43; -webkit-text-stroke: 1px #765f28;}
.fa-medal.equiv-2{ color:#b6b6b6; -webkit-text-stroke: 1px #6d6d6d;}
.fa-medal.equiv-3{ color:#bc876f; -webkit-text-stroke: 1px #715143;}

.equiv-ranking-num{
  margin-right: 15px;
}
/* new */
.equiv-new{
  padding: 0 10px;
  margin-left: 10px;
  height: 22px;
  line-height: 22px;
  display: inline-block;
  background:#092F38;
  color: #fff;
  border: 1px solid #fff;
  font-size: .65em;
  font-weight: normal;
  border-radius: 2px;
  white-space: nowrap;
}

/* 検索結果ボタン */
/*.result-item-equiv .setting-btn > input[type="radio"] + div{*/
.result-item-equiv .setting-btn a > div{
  width: 100%;
  min-height: 120px;
  background: #fff;
  border-radius: 20px;
  position: relative;
}
.result-item-equiv .setting-btn .result-content figure > img{
  width: 100%;
  max-width: 100px;
  height:auto;
}
.result-item-equiv .setting-btn .result-content.result-content-equiv-breaker{
  padding-top: 0;
}
.result-item-equiv .setting-btn .result-content.result-content-equiv-breaker figure > img{
  max-width: 90%;
  height:auto;
  object-fit: cover;
}
.result-item-equiv .setting-btn .result-content.result-content-equiv-milling figure > img{
  width: 100%;
  max-width: 180px;
  height:auto;
}
.result-item-equiv .setting-btn .result-content.result-content-equiv-breaker .res-cbmd{
  padding-left: 0;
}

.result-item-equiv .setting-btn .result-content.result-content-equiv-breaker .res-cross-section{
  padding-left: 0;
  padding-right: 0;
}
.result-item-equiv .setting-btn .result-content.result-content-equiv-breaker .res-image{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.result-item-equiv .setting-btn .result-content.result-content-equiv-breaker .res-image > div{
  text-align: center;
}

.result-item-equiv .setting-btn figure {
  margin-top: 0.6rem;
  border: none;
}

/* 型番検索 おすすめ表示 */
.recommend-area.recommend-equiv{
  height: 130px;
  width: 210px;
}
/* 言語ごとに幅を指定 */
.recommend-area.recommend-equiv.rec-japanese{
  width: 180px;
}
.recommend-area.recommend-equiv.rec-english{
  width: 260px;
}
.recommend-area.recommend-equiv.rec-deutsch{
  width: 290px;
}
.recommend-area.recommend-equiv.rec-espaÑol{
  width: 300px;
}

.recommend-area.recommend-equiv > div:first-child{
  transform: rotate(0deg);
  border-radius: 20px;
  height: 30px;
  width: 100%;
  top: 0px;
  left: 0px;
}

.recommend-area.recommend-equiv p{
  transform: rotate(0deg);
  top: 5px;
  left: 5px;
  padding: 0 5px;
}

.recommend-area.recommend-equiv p span{
  white-space: nowrap;
}

.recommend-area.recommend-equiv p span strong{
  font-weight: normal;
  font-size: 1.2rem;
}

.recommend-area.recommend-equiv+.row{
  position: relative;
  top: 10px;
}
/* /型番検索 おすすめ表示 */

/* 回転工具検索 製品説明 */
.recommend-note {
  font-size: .875rem;
}

.result-name + h3.milling {
  margin: 0 0 .8rem;
}
/* /回転工具検索 製品説明 */
.result-item-equiv .result-status dt{
  width: 180px;
}


/* ブレーカ検索 ブレーカ名下線 */
/*
.result-name + h3.cbmd {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 6px;
  text-decoration-color: #FFF;
}
*/

/* ブレーカ検索 マップ表示 */
.result-map-equiv{
  width: 100%;
  height: 100%;
  max-width: 440px;
  max-height: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  background: #FFFFFF;
}

.result-map-equiv-note{
  right: 10px;
  top: 10px;
  position: absolute;
  font-size: 1.2rem;
  background: #FFFFFF;
  z-index:3;
}

@media screen and (min-width: 575px) {
  .result-map-equiv .row{
    width:100%;
    max-width:410px;
  }
}
@media screen and (max-width: 575px) {
  .result-map-equiv .row{
    width:100%;
    max-width:300px;
  }
}
@media screen and (max-width: 380px) {
  .result-map-equiv .row{
    width:100%;
    max-width:250px;
  }
}
#map-container{
  width: 100%;
  padding-top: 100%;
  #map-canvas{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* 回転工具検索 工具径 */
.form-control.equiv-dc {
  height: 1.8rem;
}
/* /回転工具検索 工具径 */

.btn-group-equiv > .btn {
  min-width: 80px;
}
.btn-group-equiv > .btn > a {
  color: #000;
}
.btn-group-equiv > .btn.active > a {
  color: #fff;
}
.btn-group-equiv > .btn:hover > a {
  color: #fff;
}