/*main-vis*/
.main-vis{
  height: 470px;
  overflow: hidden;
}
@media only screen and (max-width:640px) {
  .main-vis{
    height: auto;
  }
}

/*sttl*/
.sttl {
	font-size: 14px;
	padding: 8px 8px 6px 12px;
	background-color: #ccc;
	color: #fff;
}
.sttl02{
  font-size: 14px;
  font-weight: bold;
}
.sttl02:before{
  content: '■';
  margin-right: 5px;
}
/*clmBlock*/
.clmBlock{
	display: flex;
	flex-wrap: wrap;
}
/*clm2*/
.clmBlock.clm2 .ph{
  width: 47.674418604651166%;  
  margin-right: 4.651162790697675%;
}
.clmBlock.clm2 .ph:nth-child(even){
  margin-right: 0;
}
.clmBlock.clm2 .clmBlock-ph{
  width: 47.674418604651166%;
  margin-right: 4.651162790697675%;
  display: flex;
  flex-wrap: wrap;  
}
.clmBlock.clm2 .clmBlock-ph .ph{
  width: 48.76543209876543%;
  margin-right: 2.4691358025%;
}
.clmBlock.clm2 .clmBlock-ph .ph:nth-child(even){
  margin-right: 0;
}
.clmBlock.clm2 .clmBlock-ph .ph:nth-child(n+3){
  margin-top: 10px;
}
.clmBlock.clm2 .clmBlock-text{
  width: 47.674418604651166%;  
}
/*clm3*/
.clmBlock.clm3 .ph{
  width: 32.55813953488372%;
  margin-right: 1.164000%;
}
.clmBlock.clm3 .ph:nth-child(3n){
  margin-right: 0;
}
/*diff*/
.clmBlock.diff .ph{
  margin-right: 2.3255813953488373%;
}
.clmBlock.diff .clmBlock-text{
  width: 63.95348837209303%;
  margin-right: 5.8139534884%;
}
.clmBlock.diff .clmBlock-ph{
  width: 30.23255813953488%;
}
@media only screen and (max-width:640px) {
  /*clm2*/
  .clmBlock.clm2 .ph{
    width: 100%; 
    margin-right: 0; 
    margin-bottom: 30px;
  }
  .clmBlock.clm2 .ph:nth-child(even){
     margin-bottom: 0;
  }
  .clmBlock.clm2 .clmBlock-ph{
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px; 
  }
  .clmBlock.clm2 .clmBlock-ph .ph{
    margin-bottom: 0;
  }
  .clmBlock.clm2 .clmBlock-ph .ph:nth-child(n+3){
    margin-top: 10px;
  }
  .clmBlock.clm2 .clmBlock-text{
    width: 100%;
  }
  /*clm3*/
  .clmBlock.clm3 .ph{
    width: 32.55813953488372%;
    margin-right: 1.164000%;
  }
  .clmBlock.clm3 .ph:nth-child(3n){
    margin-right: 0;
  }
  /*diff*/
  .clmBlock.diff .ph{
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .clmBlock.diff .ph:last-child{
    margin-bottom: 0;
  }
  .clmBlock.diff .ph img{
    width: 100%;
  }
  .clmBlock.diff .clmBlock-text{
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .clmBlock.diff .clmBlock-ph{
    width: 100%;
  }

}

/*bgBox*/
.bgBox{
	padding:25px;
}
.bgBox.bg-gray{
	background: #f2f2f2;
}
@media only screen and (max-width:640px) {
	.bgBox{
		padding:15px;
	}
}

/*----------------
logoBox
----------------*/
.logoBox{
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
  -webkit-align-items: center; /* Safari */
  align-items: center;
}
.logoBox li{
  line-height:1;
}
.logoBox li:nth-child(n+2){
  margin-left:25px;
}
.logoBox li:nth-child(n+2):before{
  content:'×';
  font-size:22px;
  padding-right:25px;  
  line-height: 2;
}
.logoBox + p{
	margin-top: 30px;
}
@media only screen and (max-width:640px) {
  .logoBox{
    display: block;
  }
  .logoBox li{
    text-align:center;
    position:relative; 
  }
  #clmContent .logoBox li:first-child img{
    width:150px;
  }
  #clmContent .logoBox li:nth-child(2) img{
    width:132px;
  }
  #clmContent .logoBox li:last-child img{
    width:143px;
  }
  .logoBox li:nth-child(n+2){
    margin-left:0;
    padding-top:40px;
  }
  .logoBox li:nth-child(n+2):before{
    padding-right:0;
    position:absolute;
    left:0;
    right:0;
    top:0;
    margin:auto;
  }
}


/*----------------
section-01
----------------*/

.section-01 .clmBlock{
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
  margin:20px 0 50px;
}
.section-01 .clmBlock .clmBlock-ph{
  width: 32.55813953488372%;
  margin-right: 2.9069767442%;
}
.section-01 .clmBlock .clmBlock-text{
  width: 64.53488372093024%;
}
@media only screen and (max-width:640px) {
  .section-01 .clmBlock .clmBlock-ph{
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .section-01 .clmBlock .clmBlock-text{
    width: 100%;
  }
}

/*----------------
section-02
----------------*/
.section-02 .bgBox{
	margin-top: 30px;
}
@media only screen and (max-width:640px) {
	

}

/*----------------
section-03
----------------*/
.section-03 .clmBlock{
	margin-top: 30px;
}
.bukkenList table{
  width: 600px;
  background: #f0f2f3;
}
.bukkenList table th,
.bukkenList table td{
  background: #fff;
  padding:5px 10px;
  box-sizing: border-box;
}
.bukkenList table th{
  width:25%;
}
.bukkenList table td{
  width:75%;
}
@media only screen and (max-width:640px) {
  .bukkenList table{
    width:100%;
  }
}


/*------------------#
unique
-------------------*/
.unique01 {
}
.unique01.clmBlock.clm2 .ph:nth-child(1) {
  width: calc(497/840 * 100 * 1%);
  margin-right: calc(21/840 * 100 * 1%);
}
.unique01.clmBlock.clm2 .ph:nth-child(2) {
  width: calc(302/840 * 100 * 1%);
}