@charset "UTF-8";
/* CSS Document */




a:hover{
	opacity: 1!important;
}

body {
	overflow-x: hidden;
 　　text-size-adjust: 100%;
 　　-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
 　　-ms-text-size-adjust: 100%;/*EgdeMobile*/
 　　-moz-text-size-adjust: 100%;/*firefox*/
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", 'メイリオ', 'Meiryo',sans-serif;
}

.main-title{
	margin: 4% auto 6%;
}
.main-title h1{
	    text-align: center;
    font-size: 2.4rem;
}

.main-title h1 span{
	    font-family: 'Lexend Peta', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'メイリオ', 'Meiryo', sans-serif;
    font-size: 1rem;
}

.column-box{
display: -webkit-box;
display: flex;
	padding: 0 4% 10%;
}
.column-box .slide-item{
    width: 50%;
    padding: 1vw;
align-items: center;
justify-content: center;
}

.column-box .slide-item .text-box{
	text-align: center;
	    margin: 10% 0;
}

.column-box .slide-item .text-box .title{
	    font-size: 1.6rem;
    font-weight: 600;
    text-align: left;
}

.column-box .slide-item .text-box .text{
	 font-size: 1.4rem;
    line-height: 22px;
    margin: 8% 0;
    text-align: left;
}

.arrow {
    position: relative;
    width: 85%;
    display: inline-block;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
}


@media screen and (min-width: 600px){
.column-box{
flex-wrap: wrap;
}

}

.column-box{
flex-wrap: nowrap;
overflow-x: scroll;
}
.column-box .slide-item{
width:100%;
	min-width:42%;}


.product-ttl{
        width: 90%;
    margin: 4% 0;
    position: relative;
    padding-left: 16px;
    font-size: 2rem;
}


.product-ttl::before {
    content: '';
    position: absolute;
    left: 0;
    top: 52%;
    transform: translateY(-50%);
       width: 4px;
    height: 38px;
    background-color: #AA9E8F;
}
*, ::before, ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}
.jjproduct-item-list{
	    margin-bottom: 18%;
}
	
	
.jjproduct-item-list li{
	background: #FAF9F7;
    padding: 4%;
    border-radius: 5px;
	    margin: 4% 0;
}

.jjproduct-item-list li a{
	    display: flex;
	
}

.jjproduct-item-list li img{
	width: 30%;
       height: 100%;
}


.jjproduct-item-list li .text-box{
	    width: 70%;
        margin: auto auto auto 4%;
}


.jjproduct-item-list li .text-box .icon{
	background: #AA9E8F;
    border-radius: 5px;
    color: #fff;
    font-size: 1rem;
    display: inline;
    padding: 2%;
}

.jjproduct-item-list li .text-box .name{
	     font-size: 1.6rem;
    margin: 2% 0;
}

.jjproduct-item-list li .text-box .text{
	margin-bottom: 0!important;
}

.collection li a{
	    display: block;
}


.collection li img {
	    width: 100%;
    height: 100%;
}

.collection li .text-box {
    width: 100%;
    margin: 4% 0;
}

.jjproduct-item-list li:first-child {
	    margin-top: 10%;
}

@media screen and (min-width: 481px) {
	/* ------------------481px以上に適用されるCSS（タブレット）------------------- */
	
/*common*/
	body{
		max-width: inherit;
	}
	main{
		    min-width: 481px!important;
	}
	
}
	



@media screen and (min-width: 960px) {
		/* --------------------------------960px以上に適用されるCSS（PC）-------------------------------- */
h1, h2, p{

    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", 'メイリオ', 'Meiryo',sans-serif;
}
small{
	text-align: center;
	}
	main{   
	background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  
	}
	p{
		font-size: 1.6rem;
	}
	
	
	.column-box{
		    width: 968px;
    margin: auto;
		    padding: 0;
		    overflow-x: unset;
	}
	
	.column-box .slide-item {
    width: 100%;
    min-width: 25%;
}
	
	.main-title {
    margin: 2% auto;
}
	
	.jjproduct-item-list{
		display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
	}
	.jjproduct-item-list li {
    background: #FAF9F7;
    flex: 0 0 48%;
    padding: 4%;
    border-radius: 5px;
    margin: 1%;
}
	
	.jjproduct-item-list li:first-child {
     margin-top:1%; 
}
	
	.jjproduct-item-list li .text-box .name {
    font-size: 2rem;
    margin: 6% 0;
}
	
	.arrow {
    position: relative;
    width: 96%;
	}
	
	.jjproduct-item-list li .text-box .icon {
    font-size: 1.2rem;
	}
	
	.product-ttl {
		margin: 4% 1%;}

	.product-ttl p{
		font-size: 2.2rem;
	}
	
	.product-block{
		margin-bottom: 10%;
	}
}