@charset "utf-8";
/* ====================================
	対応機種・便利な機能基本
===================================== */

.fcImg a img:hover{
    opacity: 0.8;
}
/* ====================================
	PC版
===================================== */
@media print, screen and (min-width: 768px) {
    
	#cocoro_about_wrap #prodCocoro{
		text-align: center;
		padding-top: 2rem;
		padding-bottom: 3rem;
	}
	#cocoro_about_wrap #prodCocoro h2{
		font-size: 2.8rem;
		font-weight:200;
		color: #535353;
	}
    
    .ccrLineup{
        max-width: 1200px;
        width: 100%;
        margin-bottom: 3rem;
    }
    .ccrLineup h3.lineupTitle{
        text-align: center;
        font-size: 1.4em;
        font-weight: 500;
        padding-bottom: 2rem;
    }
    .ccrLineup .ccrLineupArea{
        width: 960px;
        margin: 0 auto;
    }
    .ccrLineupArea .ccrItem{
        display: block;
        width: 30%;
        margin-right: 5%;
    }
    .ccrLineupArea .ccrItem:nth-child(3){
        margin-right: 0;
    }
    .ccrLuImg{
        max-width: 185px;
        width: 100%;
        margin: 0 auto;
    }
    .ccrProdName{
        display: block;
        text-align: center;
        line-height: 1.4;
    }
    .ccrProdName span{
        font-size: 1.4em;
        font-weight: 500;
    }
    
    /****** スライド用 ******/
    #prodSlideArea{
        width: 960px;
        margin: 0 auto;
    }
    .ccrLineupArea .ccrItemSlde{
        display: block;
    }
    
/*	#la,#ra {display: none !important;opacity: 0!important;}
	img {vertical-align: bottom;margin: 0;padding: 0;}
*/	
    /****** ドットナビ用 ******/
	.dotNavs{
        position: absolute;
        bottom: -20px;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
	}
	.dotNavs li{
        position: relative;
        display: inline-block;
        width: 5px;
        height: 5px;
        margin: 0 4px;
        padding: 0;
    	opacity: .3;
        cursor: pointer;
	}
	.dotNavs li button{
        font-size: 0;
        line-height: 0;
        display: block;
        width: 5px;
        height: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
	}
	.dotNavs li button:before{
    	margin: 0;
    	font-family: 'slick';
    	font-size: 5px;
    	line-height: 7px;
    	box-shadow: 0 0 0;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 5px;
    	height: 5px;
    	content: '•';
    	text-align: center;
    	color: #333;
	    -webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	.dotNavs li.slick-active button:before{
		color: #252525 !important;
	}
	.dotNavs li.slick-active{
		opacity: 1.0 !important;
	}

    
    .slide-arrow{
        position: absolute;
        top: 50%;
        margin-top: -15px;
        cursor: pointer;
    }
    .prev-arrow{
        left: -40px;
        width: 40px!important;
        height: 0;
        opacity: 0.6;
    }
    .next-arrow{
        right: -40px;
        width: 40px!important;
        height: 0;
        opacity: 0.6;
    }
    .prev-arrow:hover,.next-arrow:hover{
        opacity: 1;
    }

    /****** 便利な機能 ******/
    #functionArea{
        max-width: 1200px;
        margin: 4rem auto 3rem;
        background-color: #eaeded;
        padding: 1.5rem;
    }
    #functionArea h2{
        display: block;
        line-height: 2.4;
		font-size: 2.8rem;
		font-weight:200;
		color: #535353;
        text-align: center;
    }
    
    #functionArea .functionWrap{
        max-width: 1020px;
        width: 100%;
        margin: 1rem auto;
        display: flex;
        flex-wrap: wrap;
    }
    #functionArea .functionWrap .funcItem{
        width: 50%;
        max-width: 450px;
        padding: 1em 30px;
        position: relative;
        margin-bottom: 1.5rem;
    }
    #functionArea .functionWrap .funcItem h3{
        font-size: 1.2em;
        color: #c0046d;
        font-weight: 500;
    }
    #functionArea .functionWrap .funcItem .fcImg{
        width: 100%;
        max-width: 450px;
    }
    #functionArea .functionWrap .funcItem p{
        width: 100%;
        max-width: 450px;
        padding: 1rem 0 2rem 0;
    }
    
	#functionArea .functionWrap .funcItem a.shosaiBtn{
		color: #7492a5;
		padding: 0 1rem;
		font-size: 1rem;
		border: 1px solid #cad1d0;
		text-decoration: none;
		position: absolute;
		bottom: 0;
		right: 30px;
	}
	#functionArea .functionWrap .funcItem a.shosaiBtn:hover{
		opacity: 0.5;
		transition: all 0.8s;
	}
}


/* ====================================
	SP版
===================================== */
@media only screen and (max-width: 767px) {
    
	#cocoro_about_wrap #prodCocoro{
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 2rem;
		padding-bottom: 3rem;
	}
	#cocoro_about_wrap #prodCocoro h2{
		font-size: 2rem;
		font-weight:200;
		color: #535353;
		margin-bottom: 1.5rem;
	}
    
    .ccrLineup{
        width: 100%;
        margin-bottom: 6rem;
    }
    .ccrLineup h3.lineupTitle{
        text-align: center;
        font-size: 1.4em;
        font-weight: 500;
        padding-bottom: 1rem;
    }
    .ccrLineup .ccrLineupArea{
        width: 90%;
        margin: 0 auto;
    }
    .ccrLineupArea .ccrItem{
        display: block;
        width: 47%;
        margin-right: 6%;
    }
    .ccrLineupArea .ccrItem:nth-child(even){
        margin-right: 0;
    }
    .ccrLuImg{
        max-width: 185px;
        width: 100%;
        margin: 0 auto;
    }
    .ccrProdName{
        display: block;
        text-align: center;
        line-height: 1.4;
        font-size: 0.8rem
    }
    .ccrProdName span{
        font-size: 1.2rem;
        font-weight: 500;
    }

    /****** スライド用 ******/
    #prodSlideArea{
        margin: 0 auto 3rem;
        width: 85%;
    }
    .ccrLineupArea .ccrItemSlde{
        display: block;
    }

	.dotNavs{
        position: absolute;
        bottom: -20px;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
	}
	.dotNavs li{
        position: relative;
        display: inline-block;
        width: 5px;
        height: 5px;
        margin: 0 4px;
        padding: 0;
    	opacity: .3;
        cursor: pointer;
	}
	.dotNavs li button{
        font-size: 0;
        line-height: 0;
        display: block;
        width: 5px;
        height: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
	}
	.dotNavs li button:before{
    	margin: 0;
    	font-family: 'slick';
    	font-size: 5px;
    	line-height: 7px;
    	box-shadow: 0 0 0;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 5px;
    	height: 5px;
    	content: '•';
    	text-align: center;
    	color: #333;
	    -webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	.dotNavs li.slick-active button:before{
		color: #252525 !important;
	}
	.dotNavs li.slick-active{
		opacity: 1.0 !important;
	}
     
    .slide-arrow{
        position: absolute;
        top: 50%;
        margin-top: -15px;
        cursor: pointer;
        z-index: 99;
    }
    .prev-arrow{
        left: -15px;
        width: 20px!important;
        height: 0;
    }
    .next-arrow{
        right: -15px;
        width: 20px!important;
        height: 0;
    }
    .prev-arrow:hover,.next-arrow:hover{
        opacity: 1;
    }
    
    
   
    #functionArea{
        width: 100%;
        margin: 2rem auto 3.5rem;
        background-color: #eaeded;
        padding: 1rem 0;
    }
    #functionArea h2{
        display: block;
        line-height: 1.4;
		font-size: 1.8rem;
		font-weight:200;
		color: #535353;
        text-align: center;
    }
    
    #functionArea .functionWrap{
        width: 94%;
        margin: 1rem auto;
    }
    #functionArea .functionWrap .funcItem{
        padding: 1em 30px;
        position: relative;
        margin-bottom: 2rem;
    }
    #functionArea .functionWrap .funcItem h3{
        font-size: 1.2em;
        color: #c0046d;
        font-weight: 600;
    }
    #functionArea .functionWrap .funcItem .fcImg{
        width: 100%;
    }
    #functionArea .functionWrap .funcItem p{
        width: 100%;
        padding: 1rem 0 2rem 0;
    }
	#functionArea .functionWrap .funcItem a.shosaiBtn{
		color: #7492a5;
		padding: 0 1rem;
		font-size: 1rem;
		border: 1px solid #cad1d0;
		text-decoration: none;
		position: absolute;
		bottom: 0;
		right: 1rem;
	}
}