@charset "utf-8";

#di #main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

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

 di-info

-------------------------------------------------- */
#di-info{
  background: #f2f2f2;
}
#di-info .wrap{
	display: flex;
	overflow: hidden;
}
#di-info .-js-tanamin-window{
	display: block;
	position: relative;
  overflow: hidden;
	width: 26%;
	margin-right: 16px;
	padding: 16px;
	background: #a6e5f6;
  color: #000;
  min-height: 230px;
}
#di-info .-js-tanamin-window h2{
	margin-bottom: 16px!important;
}
#di-info .-js-tanamin-window img.tanamin {
  position: absolute;
  bottom: 16px;
  left: 16px;
	width: 100px;
}
#di-info .-js-tanamin-window p:not(.link-btn){
  width: 60%;
  margin: 0 0 16px 40%;
}
#di-info .-js-tanamin-window .link-btn{
  width: 60%;
  margin: 0 0 0 40%;
}
#di-info .-js-tanamin-window .link-btn span{
  display: inline-block;
  margin-bottom: 4px;
  font-size: 85%;
}
#di-info .-js-tanamin-window .link-btn i{
  display: inline-block;
  position: relative;
	width: 100%;
  padding: 6px 5px 5px;
  border: 2px solid #0070c0;
  border-radius: 20px;
  background: #fff;
  color: #0070c0;
	font-size: 90%;
  line-height: 1.2;
  font-style: normal;
}
#di-info .-js-tanamin-window .link-btn i:after{
  position: absolute;
  top: calc(50% - 2px);
  right: 10px;
  transform: rotate(45deg);
  width: 3px;
  height: 3px;
  border-top: 1px solid #0070c0;
  border-right: 1px solid #0070c0;
  content: '';
}
#di-info .-js-tanamin-window:hover .link-btn i{
  background: #0070c0;
  color: #fff;
  text-decoration: none;
}
#di-info .-js-tanamin-window:hover .link-btn i:after{
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
#di-info .wrap ul{
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 26% - 16px);
  align-content: flex-start;
}
#di-info .wrap ul li{
	width: calc(50% - 16px);
	margin: 0 8px 16px;
}
#di-info .wrap ul li a{
  display: block;
  position: relative;
  padding: 5px 5px 7px;
  border: 2px solid #0070c0;
  border-radius: 20px;
  background: #fff;
  color: #0070c0;
  line-height: 1;
	text-align: center;
}
#di-info .wrap ul li a:after{
  position: absolute;
  top: calc(50% - 2px);
  right: 10px;
  transform: rotate(45deg);
  width: 3px;
  height: 3px;
  border-top: 1px solid #0070c0;
  border-right: 1px solid #0070c0;
  content: '';
}
#di-info .wrap ul li a:hover{
  background: #0070c0;
  color: #fff!important;
  text-decoration: none!important;
}
#di-info .wrap ul li a:hover:after{
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

#di .mvp-contents-menu #di-guide-menu li a {
  color: #4472c4!important;
}

#di .mvp-contents-menu #di-guide-menu li a:hover {
	color: #fff!important;
}

#di .mvp-contents-menu #di-guide-menu  li span {
  padding: 0;
	background: none;
}

#di .mvp-contents-menu #di-guide-menu  li a:hover span {
	background: none;
}

/* ----- SP ----- */
@media screen and (max-width: 767px) {
	#di .di-top h1{
		position: relative;
	}
	#di .di-top h1::after{
		position: absolute;
		top: calc(50% - 20px);
		right: 12px;
		transition: transform 0.3s;
		color: #4372C0;
		font-size: 60%;
    font-weight: normal;
    text-align: center;
		content: '▼\A MENU';
    white-space: pre;
	}
	#di .di-top h1.open::after{
		content: '×\A MENU';
	}
  #di-info{
		display: none;
	}
  .di-bottom-template #di-info{
		display: block;
	}
	#di-info .wrap{
		display: inherit;
		padding: 0 16px 24px;
	}
	#di-info .-js-tanamin-window{
		width: 100%;
		margin-right: 0;
		padding: 8px;
    min-height: 180px;
	}
	#di-info .-js-tanamin-window h2{
		max-width: 60%;
		margin-bottom: 10px;
	}
	#di-info .-js-tanamin-window img.tanamin {
    bottom: 8px;
    width: 80px;
  }
	#di-info .-js-tanamin-window p:not(.link-btn) {
    width: calc(100% - 62px);
    margin-left: 62px;
    text-align: center;
  }
	#di-info .-js-tanamin-window .link-btn {
    width: calc(100% - 108px);
    margin-left: 100px;
	}
	#di-info .-js-tanamin-window .link-btn a{
	  width: 100%;
	  padding: 2px 5px 4px;
	  font-size: 90%;
	}
	#di-info .-js-tanamin-window .link-btn .pc-br{
		display: none;
	}
	#di-info .wrap ul{
		display: inherit;
		width: 100%;
		margin-top: 16px;
	}
	#di-info .wrap ul li{
		width: 100%;
		margin: 8px 0 0 0;
	}
	#di-info .wrap ul li a{
	  padding: 5px 5px 7px;
	}

	/* 	 di-table sp
	-------------------------------------------------- */
  #floatMenu-box{
		height: inherit!important;
	}
	#floatMenu{
		position: static!important;
		height: inherit!important;
		padding: 10px 0 2px;
	}
	.di-50 {
    margin-bottom: 0;
  }
	.di-50 ul {
		display: flex;
		flex-wrap: wrap;
		/*justify-content: space-between;*/
		width: inherit;
		margin: 0 -2px;
	}
	.di-50 ul li {
		display: inherit;
		margin: 0 2px 8px;
	}
	.di-50 li a {
	  padding: 8px;
	}
	.download-packins-container:not(.di-annex){
		display: none;
	}
	.di-50 .download-packins-container.di-annex{
		margin-bottom: 20px;
	}
	.di-50 .link-btn{
		margin-bottom: 20px;
	}
	.di-50 .link-btn a{
		padding: 4px 32px;
		width: auto;
	}
	#main .di-table{
		border-top: 1px solid #a7b8d2;
	}
	#floatMenu-box .di-table{
		display: none!important;
	}
	#main .di-table th.content-cell, #main .di-table td.content-cell{
		display: none;
	}
	#main .di-table th.product-cell, #main .di-table td.product-cell{
		text-align: left;
	}
	#main .di-table th.product-cell, #main .di-table td.product-cell a[id^='prdct']{
		display: block;
		padding: 8px 0;
	}
	/* #mvp-code-menu */
	#mvp-code-menu li {
		width: calc((100% - 10px) / 2);
	}
	#mvp-code-menu li:not(:nth-child(2n)){
		margin-right: 10px;
	}
	#mvp-code-menu li:not(:nth-last-child(-n + 1)){
		margin-bottom: 15px;
	}
	/* #di-guide-menu */
	#di-guide-menu li {
		width: calc((100% - 20px) / 3);
		margin-bottom: 15px;
	}
	#di-guide-menu li:not(:nth-child(3n)){
		margin-right: 10px;
	}
	#di-guide-menu li:not(:nth-child(3n)){
		margin-right: 10px;
	}
	#di-guide-menu li:nth-child(3n+1):nth-last-child(-n+3){
		margin-bottom: 0;
	}
	#di-guide-menu li:nth-child(3n+1):nth-last-child(-n+3) ~ li{
		margin-bottom: 0;
	}
	#di-guide-menu .mvp-contents-menu li a {
		background: none;
		border: none;
		text-shadow: none;
	}
}

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

 di-qa-producttop

-------------------------------------------------- */
.mvp-di-qa-producttop .mvp-template-qa-box {
  position: absolute;
  top: 340px;
  left: 0;
  right: 0;
  z-index: 2;
  padding-bottom:10px;
  background: #fff;
}
#di .mvp-di-qa-producttop #main {
    margin-top: 140px;
}
#di.header-fixed .mvp-di-qa-producttop #main {
    margin-top: 60px;
}
#di .mvp-di-qa-producttop #main dl.faq {
  margin-top: -150px;
  padding-top: 150px;
}

body.header-fixed .mvp-di-qa-producttop .mvp-template-qa-box {
  position: fixed;
  top: 60px;
  width: 100%;
}

body.header-fixed .mvp-di-qa-producttop #main {
  position: static;

}

/* ----- SP ----- */
@media screen and (max-width: 767px) {
  .mvp-di-qa-producttop .mvp-template-qa-box {
  position: static;
  margin-bottom: 40px;
  }
  #di .mvp-di-qa-producttop #main {
  margin: 0;
  }
  body.header-fixed .mvp-di-qa-producttop .mvp-template-qa-box {
  position: static;
  }
  .contents {
  margin: 0;
  }
}