/**********

subtitle

************/
.sub-title-product{
	background-color: #AFD642;
	font-weight: 300;	
}
.sub-title-product h1::before{

}
.sub-title-senction h2{
	text-align: center;
	padding-bottom: 24px;
	color: #707070;
	font-weight: 400;	
}
.product-title h2{
	margin-top: -40px;
}

.product-title h2{
	text-align: center;
	color: #707070;
    font-weight: 300;    
}
.topAll{
	display: flex;
    justify-content: space-between;
}
.topAll > *{
    vertical-align: middle;
}
.topRight{
    background:linear-gradient(to top left, rgba(255,255,255,0) 50%, #D6EB9B 50.5%) no-repeat top left/100% 100%;
    width: 150px;
    height: 120px;
    margin-right: 43%;
}
.topLeft{
    background:linear-gradient(to top right, rgba(255,255,255,0) 50%, #D6EB9B 50.5%) no-repeat top right/100% 100%;
    width: 150px;
    height: 120px;
    margin-left: 43%;
}
.sub-title-section {
    width: 80%;
    margin: 0 auto;
}

.sub-title-product .sub-title{
	padding: 24px 0 25px;
}

.sub-title-product .sub-title h1 span{
	font-weight: 200;
	font-size: 16px;
	border-bottom: solid 1px #000000;
	padding: 0 7px 5px;
}

.sub-title-product .sub-title h1 span.h1-main{
	display: block;
	margin-top: 8px;
	text-align: center;
	font-weight: bold;
	font-size: 28px;
	border: none;
	padding: 0;
}

.sub-title-product .sub-title h1{
    line-height: 32px;
}
.sub-title hr{
    margin: auto auto 8px auto;
}
/**********

what learn

************/
.product-what-learn{
	background-color: #4DBFB9;
	padding: 48px 0;	
}
.product-what-learn-box{
	width:1040px;
	max-width: 1280px;
	margin: 0 auto 48px auto;
	background-color: #ffffff;
	padding: 32px;
	border-radius: 16px;
}
.product-what-learn-box-title{
	display: grid;
	display: -ms-grid;
	vertical-align: middle;
	margin-left: 40px;
	grid-template-columns: 3fr 6fr;
	-ms-grid-columns: 3fr 6fr;
	border-radius: 40px;
	padding: 12px 60px 12px 20px;
	align-items: center;
	grid-template-rows:auto auto;
	-ms-grid-rows:auto auto;
}
.product-what-learn-box-title p.title{
	font-size: 16px;
}
@media all and (-ms-high-contrast: none) {
	.product-what-learn-box-title p,
	.product-who-learn-box-title p{
		padding-top: 8px;
	}
}
@media all and (-ms-high-contrast: none) and (max-width: 960px){
	.product-what-learn-box-title p,
	.product-who-learn-box-title p{
		padding-top: 18px;
	}
}
.product-what-learn-box-title span{
	font-size: 24px;
}
.product-what-learn-box-title h2{
	-ms-grid-row:1;
	-ms-grid-column:1;	
}
.product-what-learn-box-title p.title{
	text-align: left;
	-ms-grid-row:1;
	-ms-grid-column:2;
	padding: 0;
}
.product-what-learn-box-title::before{
	content: url(/products/images/whatLearnSongIcon.svg);
	display: inline-block;
	margin-left: -60px;
    margin-top: 0px;
    position: absolute;
}
@supports (-ms-ime-align:auto){
	.product-what-learn-box-title::before{	
		margin-left: -100px;
	}
	.product-what-learn-box-title p{
		padding-top: 6px;
	}
}
.learn-blue {
	border:solid 4px #5B9FD8;	
}
.learn-pink{
	border:solid 4px #FC98BF;	
}
.learn-purple{
	border:solid 4px #A782C7;	
}
.learn-gray{
	border:solid 4px #969696;	
}
.learn-blue  span{
	color:#5B9FD8;	
}
.learn-pink  span{
	color:#FC98BF;
}
.learn-purple  span{
	color:#A782C7;	
}
.learn-gray span{
	color:#969696;	
}
.learn-blue p.title::before{
	background-color:#5B9FD8;	
}
.learn-pink p.title::before{
	background-color:#FC98BF;	
}
.learn-purple p.title::before{
	background-color:#A782C7;	
}
.learn-gray p.title::before{
	background-color:#969696;	
}
.learn-blue::before{
	content: url(/products/images/whatLearnSongIcon.svg);
}
.learn-pink::before{
	content: url(/products/images/whatLearnInstrumentIcon.svg);
}
.learn-purple::before{
	content: url(/products/images/whatLearnVoiceIcon.svg);
}
.learn-gray::before{
	content: url(/products/images/whatLearnQualityIcon.svg);
}
.product-what-learn-box-title p span{
	font-size: 22px;	
}
/*.product-what-learn-box-title p.title::before{
	content: '';
	display: inline-block;
	width: 2px;
	height: 20px;
	margin: 0 40px;
}*/
.product-what-learn-box-title p.title{
	display: flex;
	line-height: 1.4em;
}
.product-what-learn-box-title p.title::before {
    content: '';
    display: block;
    width: 2px;
    height: 45px;
    margin: 0 30px;
}
.product-what-learn-box-content{
	padding-top: 40px;
	display: flex;
}
.productBoxImg{
	margin-right: 32px;
    display: block;
    height: 316px;	
}
.product-box-content-icon{
	display: block;
	/* height: 68px; */
	margin-right: 40px;
	margin-bottom: 4px;		
}

.product-box-content-icon a{
	display: flex;
	padding: 5px 10px;
}

.product-box-content-icon a:hover{
	background-color: rgba(255, 212, 30, 0.4);
}

.product-box-content-icon dd{
	font-size: 12px;
	text-align: left;
}
.product-box-content-icon dt{
	font-size: 15px;
	text-align: left;
}
.product-box-content-icon dl{
	margin-left: 16px;
	font-weight: 300;
    color: black;
    display: inline-block;
    vertical-align: top;
}
.product-box-content-detail-sp,
.product-what-learn-box-title-sp,
.product-what-learn-box-txt-sp,
.product-who-learn-box-title-sp{
	display: none;
}
/**********

who learn

************/
.product-who-learn{
	background-color: #A6D396;
	padding: 48px 0;	
}
.product-who-learn-box{
	width:1040px;
	max-width: 1280px;
	margin: 0 auto 48px auto;
	background-color: #ffffff;
	padding: 32px;
	border-radius: 8px;
}
.product-who-learn-box-title,
.product-who-learn-box-title2{
	display: flex;
	align-items: center;
 	border:solid 4px #6BB84E;
	border-radius: 40px;
	padding: 20px 30px;   
	box-sizing: border-box;
}
.product-who-learn-box-title2{
    grid-template-columns: 4fr 5fr;   
    -ms-grid-columns: 4fr 5fr;   
}
.product-who-learn-box-title p.title,
.product-who-learn-box-title2 p.title{
	text-align: left;
}
.product-who-learn-box-title p span,
.product-who-learn-box-title2 p span{
	font-size: 22px;
	color: #6BB84E;	
}
/*.product-who-learn-box-title p span::after,
.product-who-learn-box-title2 p span::after{
	content: '';
	display: inline-block;
	width: 2px;
	height: 20px;
	margin: 0 20px;
	background-color: #6BB84E;
}*/
.product-who-learn-box-title p.title::before,
.product-who-learn-box-title2 p.title::before{
    content: '';
    display: block;
    width: 2px;
    height: 45px;
		background-color: #6BB84E;
    margin: 0 30px;
}
.product-who-learn-box-title p.title,.product-who-learn-box-title2 p.title
{
	display: flex;
	align-items: center;
	font-size: 16px;
}
/**********

タブ切り替え

************/
.product-tabs {
  background-color: #fff;
  margin: 48px auto 0 auto;
  text-align: center;
}
.productLabelIcon{
	vertical-align: middle;
	margin-right: 12px;

}
.product-tab-item {
	width: calc(100%/6);
	padding: 10.5px 16px;
	margin-right: 24px;
	font-size: 24px;
	text-align: center;
	color: #565656;
	display: inline-block;
	font-weight: bold;
	transition: all 0.2s ease;
	-webkit-border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
	font-weight: 300;
}
.product-tab-item:hover {
  opacity: 0.75;
}
input[name="product-tab-item"]
{
  display: none;
}
.product-tab-content {
  display: none;
  overflow: hidden;
}
#what:checked ~ #what-content,
#who:checked ~ #who-content {
  display: block;
}
.product-tab-green{
  background-color: #4DBFB9;
  color: #fff;	
}
.product-tab-lightgreen{
  background-color: #A6D396;	
	color: #fff;
	margin-right: 0;
}
.product-tabs input:checked + .product-tab-green{
  background-color: #4DBFB9;
  color: #fff;
}
.product-tabs input:checked + .product-tab-lightgreen{
  background-color: #A6D396;
  color: #fff;
}
@media screen and (max-width: 1110px) {
    .product-tab-item:hover{
    opacity: 1.0;
    }
    
@media screen and (max-width: 1110px) {
	.product-what-learn-box,
	.product-who-learn-box{
		width: 261vw;
        max-width: 100%;
        padding: 2.1vw 0.6vw;
        margin: 0 auto 2.1vw auto;
	}
	.product-what-learn,
	.product-who-learn{
		padding: 4.2vw;
	}
	.product-box-content-icon{
		/* height: 10vw; */
		margin-right: 1vw;		
	}
	.product-box-content-icon dt {
    	font-size: 1.6vw;
	}
	.product-box-content-icon dl{
		margin-left: 1vw;		
	}	
	.product-title{
		margin-top: -5vw;
	}	
}
@media screen and (max-width: 960px) {
	.product-tab-item{
		width: 30%;
	}
	.productBoxImg{
	    margin: 0 2.1vw;
	    display: block;
	    height: 100%;
	    width: 30vw;
	}
	.product-box-content-icon {
	    /* height: 8vw; */
	    margin-right: 2.1vw;
	    margin-bottom: 0.8vw;
	}
	.product-box-content-icon dt {
	    font-size: 1.4vw;
	}	
	.product-box-content-icon dd {
    	font-size: 1.2vw;
	}
	.product-what-learn-box-title p span,
	.product-who-learn-box-title p span,
	.product-who-learn-box-title2 p span{
    	font-size: 2.1vw;
	}
	.product-who-learn-box-title p,
	.product-who-learn-box-title2 p{
		font-size: 1.4vw;
		padding: 1.2vw 2.4vw;
	}
	.product-what-learn-box-title p span::after{
		    margin: 0 1.2vw;
		    vertical-align: bottom;
	}
	.product-who-learn-box-title p span::after,
	.product-who-learn-box-title2 p span::after{
		margin: 0 10px;
	}	
	.product-what-learn-box-title::before{
		margin-left: -10vw;
    	margin-top: -3vw;
    	display: block;
	}
	.product-what-learn-box-title p.title::before{
		width: 0.4vw;
    	height: 7vw;
    	margin: 0 2vw;
	}
}

@media screen and (max-width: 680px) {
    .sub-title-product .sub-title h1{
        line-height: 5.6vw;
    }
    .sub-title-product .sub-title h1 span{
			font-size: 3.2vw;
		}
		.sub-title-product .sub-title h1 span.h1-main {
			font-size: 5.3333vw;
			font-weight: normal;
		}
		.sub-title-product .sub-title {
			padding: 2.4vw 0 3.73333vw;
		}
    .sub-title hr{
        width: 30vw;
    }	
    .topRight{
        height: 80px;
        margin-right: 50%;
    }
    .topLeft{
        height: 80px;
        margin-left: 20%;       
    }	
		.product-title{
			margin-top: -5vw;
		}
		.product-title h2 {
			margin: -14.4vw 0 0;
			font-size: 4.8vw;
		}
		.product-tabs {
			margin: 5.3333vw auto 0;
		}
		.product-tab-item {
				width: 40%;
				padding: 2.6vw 2.1vw;
				margin-right: 1.2vw;
				font-size: 3.8vw;
		}
        .product-box-content-detail,
		.product-what-learn-box-title,
		.product-who-learn-box-title,
		.product-who-learn-box-title2{
			display: none;
		}
		.product-what-learn-box-content,
		.product-who-learn-box-title-sp{
			display: block;
		}
	.productBoxImg{
		width: 100%;
		margin:0 auto;
	}
	.product-what-learn-box {
		padding: 2.4vw 3.73333vw 5.3333vw;
		width: 100%;
		margin-bottom: 2.1vw;
		box-sizing: border-box;
	}
	.product-what-learn-box,
	.product-who-learn-box{
		border-radius: 2.1vw;
	}
	.productListIcon{
		width: 100%;
	}
	.productListIcon2{
		width: 100%;	
	}
	.product-pcontent-detail-icon-sp {
		margin-top: 5.3333vw;
	}
	.product-box-content-detail-sp{
		display: block;
		padding: 0;
	}
	.product-what-learn-box-title-sp{
		display: block;
		padding-top: 6.4vw;
	}
	.product-what-learn-box-content{
		padding-top: 0;
	}
	.learn-blue-sp h2{
		color:#5B9FD8;
		border:solid 4px #5B9FD8;
		border-radius: 5vw;	
		padding: 2.1vw;
	}
	.learn-pink-sp h2{
		color:#FC98BF;
		border:solid 4px #FC98BF;	
		border-radius: 5vw;	
		padding: 2.1vw 14vw 2.1vw 0;
	}
	.learn-purple-sp h2{
		color:#A782C7;
		border:solid 4px #A782C7;
		border-radius: 5vw;	
		padding: 2.1vw 0 2.1vw 8vw;
	}
	.learn-gray-sp h2{
		color:#969696;
		border:solid 4px #969696;
		border-radius: 5vw;	
		padding: 2.1vw 0 2.1vw 8vw;
	}			
	.product-what-learn-box-title-sp h2::before{
		width: 4vw;
		height: 4vw;
		display: inline-block;
		margin-left: -33.8vw;
		margin-top: -12.0vw;
		position: absolute;
	}
	.learn-blue-sp h2::before{
		content: url(/products/images/whatLearnSongIcon.svg);
	}
	.learn-pink-sp h2::before{
		content: url(/products/images/whatLearnInstrumentIcon.svg);
		margin-left: -34.8vw;
	}
	.learn-purple-sp h2::before{
		content: url(/products/images/whatLearnVoiceIcon.svg);
		margin-left: -32.8vw;
	}
	.learn-gray-sp h2::before{
		content: url(/products/images/whatLearnQualityIcon.svg);
		margin-left: -30.8vw;
	}			
	.product-what-learn-box-txt-sp{
		display: block;
		padding: 8vw 0 4.2666vw;
		text-align: left;
	}
	.product-what-learn-box-txt-sp p {
		font-size: 3.73333vw;
		line-height: 1.75;
	}
	.product-who-learn-box-title-sp h2{
		border-bottom: 1px solid #6BB84E;
		color: #6BB84E;
		width: 100%;
		margin: 0 auto;
		font-size: 5.3333vw;
		padding-bottom: 3.73333vw;
		margin-bottom: 1.8vw;
	}
	.product-who-learn-box-title-sp p{
		text-align: center;
		font-size: 3.73333vw;
		margin-bottom: 5.3333vw;
	}
	.product-who-learn-box{
		padding: 4.8vw 2.6666vw;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 340px) {
.product-what-learn-box-title-sp h2::before{
	width: 0.5vw;
    height: 0.5vw;
    margin-left: -36.8vw;
    margin-top: -17.0vw;
}

}