/*---------------------------------------------
  top画面/製品紹介部分
  ---------------------------------------------*/

/* 初期描画改善 */
#tabs {
  display:none;
}

.wrapper {
  display: block;
  background-color: #FFF;
  height:1350px;
}

/* レイアウトシフトによるパフォーマンス改善(%は禁止) */
@media only screen and (min-width:1020px) and (max-width: 1298px) {
.wrapper {
    max-height:1330px;
    min-height:1250px;
    height:calc(110vw + 28px);
  }
}

@media only screen and (min-width:974px) and (max-width: 1019px) {
.wrapper {
    max-height:1675px;
    min-height:1675px;
    height:1675px;
  }
}

@media only screen and (min-width:910px) and (max-width: 974px) {
.wrapper {
    max-height:1690px;
    min-height:1560px;
    height:calc(189vw + 26px);
  }
}
@media only screen and (min-width:835px) and (max-width: 910px) {
.wrapper {
    max-height:1653px;
    min-height:1607px;
    height:calc(184vw + 15px);
  }
}
@media only screen and (min-width:780px) and (max-width: 835px) {
.wrapper {
    max-height:1690px;
    min-height:1560px;
    height:calc(189vw + 26px);
  }
}

@media only screen and (min-width:721px) and (max-width: 780px) {
.wrapper {
    max-height:2350px;
    min-height:2350px;
    height:2350px;
  }
}

@media only screen and (min-width:636px) and (max-width: 720px) {
.wrapper {
  max-height:1452px;
  min-height:1376px;
  height:calc(222vw - 68px);
  }
}
@media only screen and (min-width:550px) and (max-width: 636px) {
.wrapper {
  max-height:1376px;
  min-height:1290px;
  height:calc(229vw - 36px);
  }
}

@media only screen and (min-width:485px) and (max-width: 550px) {
.wrapper {
    max-height:2068px;
    min-height:1950px;
    height:calc(397vw - 35px);
  }
}

@media only screen and (min-width:450px) and (max-width: 485px) {
.wrapper {
    max-height:1940px;
    min-height:1870px;
    height:calc(415vw - 38px);
  }
}

@media only screen and (min-width:381px) and (max-width: 450px) {
.wrapper {
    max-height:1866px;
    min-height:1790px;
    height:calc(426vw + 6px);
  }
}

@media only screen and (min-width:330px) and (max-width: 381px) {
.wrapper {
    max-height:4200px;
    min-height:4015px;
    height:calc(1218vw - 71px);
  }
}

@media only screen and (max-width: 330px) {
.wrapper {
    height:calc(4220px - 10%);
  }
}

#tabs {
  width: 100%;
  height: auto;
  /*margin: 0;*/
}

.maintext{
  margin: 0 auto;
  font-size: 13px;
  max-width: 240px;
  text-align: center;
  word-break: normal;
  line-height: 1.35;
}

div[class*="card"]{
  max-width: calc(32% - 6px);
  width:100%;
  height: auto;
  background: #EFEFEF;
  border: 2px outset #ccc;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 5px #ccc;
          box-shadow: 0 2px 5px #ccc;
  margin: 5px auto;
  padding: auto;
}
div[class*="card"]:hover{
  opacity: 0.9;
}

.cell{
  background: #EFEFEF;
  text-align: center;
  border-radius: 5px;
  border: solid 2px gray;
  margin: 3px;
  padding: auto;
}
#tabs .all,
#tabs .pdf1,
#tabs .pdf2,
#tabs .pdf3,
#tabs .pdf4,
#tabs .pdf5,
#tabs .pdf6{
  font-size: 15px;
  font-weight: bold;
}
#tabs .ui-tabs {
	padding: 0;
	border-width: 0;
}
#tabs .ui-widget-header {
	border: 0;
}
#tabs .ui-tabs-nav {
	border-width: 0;
  padding: 0;
  font-size: 100%;
  font-weight: bold;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#tabs .ui-tabs-nav:hover{
  opacity: 0.75;
}
#tabs .ui-tabs-panel {
  padding: 0;
	border-width: 5px;
}
#tabs .ui-tabs-nav li.ui-tabs-selected {
	border-width: 5px;
  margin-bottom: -5px;
}
.ui-widget-header .ui-state-active{
  border: none;
	background: gray;
	font-weight: bold;
}
.tab_content_description{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#tabs #tabs-1 {
  background-image: -webkit-linear-gradient(45deg, #EBE4B8 0%, #EFEFEF 100%);
  background-image: -o-linear-gradient(45deg, #EBE4B8 0%, #EFEFEF 100%);
  background-image: linear-gradient(45deg, #EBE4B8 0%, #EFEFEF 100%);
}
#tabs #tabs-2 {
  background-image: -webkit-linear-gradient(45deg, #FFDBC9 0%, #EFEFEF 100%);
  background-image: -o-linear-gradient(45deg, #FFDBC9 0%, #EFEFEF 100%);
  background-image: linear-gradient(45deg, #FFDBC9 0%, #EFEFEF 100%);
}
#tabs #tabs-3 {
  background-image: -webkit-linear-gradient(45deg, #E6FFE9 0%, #EFEFEF 100%);
  background-image: -o-linear-gradient(45deg, #E6FFE9 0%, #EFEFEF 100%);
  background-image: linear-gradient(45deg, #E6FFE9 0%, #EFEFEF 100%);
}
#tabs #tabs-4 {
  background-image: -webkit-linear-gradient(45deg, #D9E5FF 0%, #EFEFEF 100%);
  background-image: -o-linear-gradient(45deg, #D9E5FF 0%, #EFEFEF 100%);
  background-image: linear-gradient(45deg, #D9E5FF 0%, #EFEFEF 100%);
}
#tabs #tabs-5 {
  background-image: -webkit-linear-gradient(45deg, #FFD5EC 0%, #EFEFEF 100%);
  background-image: -o-linear-gradient(45deg, #FFD5EC 0%, #EFEFEF 100%);
  background-image: linear-gradient(45deg, #FFD5EC 0%, #EFEFEF 100%);
}
#tabs #tabs-6 {
  background-image: -webkit-linear-gradient(45deg, #D8D6FF 0%, #EFEFEF 100%);
  background-image: -o-linear-gradient(45deg, #D8D6FF 0%, #EFEFEF 100%);
  background-image: linear-gradient(45deg, #D8D6FF 0%, #EFEFEF 100%);
}
#tabs #tabs-7 {
  background-image: -webkit-linear-gradient(45deg, #a5c4c4 0%, #EFEFEF 100%);
  background-image: -o-linear-gradient(45deg, #a5c4c4 0%, #EFEFEF 100%);
  background-image: linear-gradient(45deg, #a5c4c4 0%, #EFEFEF 100%);
}
.card1:hover{
  background: #FAF0E6;
}
.card2:hover{
  background: #F0FFF0;
}
.card3:hover{
  background: #e3f0fc;
}
.card4:hover{
  background: #FFF0F5;
}
.card5:hover{
  background: #E9E8F9;
}
.freecard:hover{
  background: #ddede7;
}
.name{
  margin: 9px 3px;
  height: 26px;
}
.name_long{
  margin-top: 3px;
  margin-bottom: -2px;
  line-height: 1.2;
  height: 43px;
}
.listname,
.name,
.name_long {
  font-weight: bold;
  font-size: 15px;
  word-break: break-all;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}
.image{
  -ms-interpolation-mode: bicubic;
  /* width: 99%; */
  height: auto;
  display: block;
  text-align: center;
  margin: auto;
}
.btns{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns:1fr 1fr;
  grid-template-columns: repeat(2,1fr);
  font-weight: bold;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  margin: auto;
  padding: 2px 0 4px 0;
}

.btns_other{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns:1fr 1fr;
  grid-template-columns: repeat(2,1fr);
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 16px;
  margin: 0 auto;
  padding: 0px auto !important;
}

.detailsbtn{
  -ms-grid-column: 1;
  grid-column: 1/1;
  grid-row: auto;
  margin: 1px 2px 1px 12px;
}

.detailsbtn_other{
  display: inline-block;
  padding: 1px 0;
  text-decoration: none;
  color: gray;
  border: solid 2px gray;
  border-radius: 5px;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  width:240px !important;
}

/* ボタンが1つの時用 */
.detailsbtn_add{
  padding:3.7px 28px !important;
}

.detailsbtn_other_add{
  padding:10px 0px !important;
}

.usingenterprisebtn{
  -ms-grid-column: 2;
  grid-column: 2/2;
  grid-row: auto;
  margin: 1px 12px 1px 2px;
}

.detailsbtn, .usingenterprisebtn{
  display: inline-block;
  padding: 3px 0;
  text-decoration: none;
  color: gray;
  border: solid 2px gray;
  border-radius: 5px;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

.detailsbtn:hover, .detailsbtn_other:hover, .usingenterprisebtn:hover{
  text-decoration: none;
  background: gray;
  color: white;
}

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