@charset "utf-8";
/* TOP */
.slick-dots li {width: auto; height: auto; line-height: 1;}
.slick-dots li button {width: 60px; height: 2px;}
.slick-dots li button::before {content: ''; display: block; width: 60px; height: 2px; background: #161616;}
.slick-dots li.slick-active button::before {background: #fabe00;}

.topBtn {font-family: 'IBM Plex Sans', sans-serif; letter-spacing: 0.1em; display: block; max-width: 250px; width: 80%; padding: 20px 0; text-align: center; font-weight: bold; border: 1px solid #000; border-radius: 100px; line-height: 1; background: url(../images/common/ic_arr.png) no-repeat; background-position: center right 20px; transition: all 0.2s ease-in-out}
.topBtn:hover {background-color: #000; background-image: url(../images/common/ic_arr_white.png); color: #fff; background-position: center right 5px;}

main {padding-bottom: 0;}

#mv {max-width: 1820px; width: 95%; margin: 0 auto 160px; height: unset;}
#mv .slide {position: relative;}
#mv .inner{position: absolute; top: 58.75%; left: 0; right: 50%; text-align: center; color: #fff; font-weight: bold;}
#mv .tit{font-size: 1.5rem;}
#mv .tit:after{content: ''; margin: 45px auto 40px; background: #fff; width: 200px; height: 1px; display: block;}
#mv .txt{font-size: 2rem; line-height: 2;}
#mv .txt span{font-size: 70%; display: block; font-weight: normal;}

#concept {position: relative;}
#concept .img {width: 50%; position: absolute; top: -8%; left: 0}
#concept .txt {width: 21.05%; position: absolute; top: -16%; right: 0;}
#concept .container {max-width: 1820px; background: #f6f5ef; padding: 100px 0;}
#concept .container .inner {width: 45%; margin: 0 0 0 auto;}
#concept .container .inner p {margin-bottom: 50px;}

#product {padding: 100px 0;}
#product .container .titH2 {text-align: center;}
#product .container .commonTxt {text-align: center; margin-bottom: 40px;}
#product .container ul li {width: 31.34%; margin-bottom: 3%; border: 2px solid #c3ba7f; padding-bottom: 20px;}
#product .container ul li h4 {font-size: 2.4rem; font-weight: bold; letter-spacing: 0.1em; text-align: center; margin: 20px 0;}
#product .container ul li select {width: calc(100% - 40px); margin: 0 auto; display: block;}
#product .container ul li select {border: 1px solid #6f6f6f; padding: 1rem; width: calc(100% - 40px); margin: 0 auto;  font-family: 'Noto Sans JP', sans-serif; font-size: 1.6rem; background: #fff; color: #6f6f6f}
#product .boxBtn{display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 820px; margin: 0 auto; padding-top: 25px;}
#product .boxBtn div{width: 48.8%;}
#product .boxBtn a{border: 1px solid #000; font-weight: bold; width: 100%; border-radius: 80px; text-align: center; line-height: 1.4;
transition: all 0.2s ease-in-out; font-size: 16px; height: 80px; display: flex; flex-wrap: wrap;justify-content: center;align-items: center; text-align: center; align-content: center;}
#product .boxBtn a span {display: block; font-size: 13px; font-weight: normal;}
#product .boxBtn a.btn-white{background: #fff url("../images/common/ic_arr.png") no-repeat center right 25px;}
#product .boxBtn a.btn-black{background: #000 url("../images/common/ic_arr_white.png") no-repeat center right 25px; color: #fff;}
#product .boxBtn a:hover{background: #c3ba7f url("../images/common/ic_arr_white.png") no-repeat center right 25px !important; color: #fff; border: 1px solid #c3ba7f;}

#voice {background: #f6f5ef; padding: 100px 0;}
#voice .container {max-width: 1400px;}
#voice .container .titH2 {text-align: center;}
#voice .container .commonTxt {text-align: center; margin-bottom: 40px;}
#voice .flexBox {justify-content: flex-start;}
#voice .container ul li {width: /*22.79%*/22.857143%; letter-spacing: 0.1em;margin-right:2.857143%;}
#voice .container ul li:nth-of-type(4n) {margin-right:0;}
#voice .container ul li a .img {position: relative; margin-bottom: 20px;}
#voice .container ul li a .img p {background: #f6f5ef; position: absolute; left: 0; bottom: 0; font-size: 1.8rem; font-weight: bold; padding: 10px 15px 0 0;}
#voice .container ul li a .txt {line-height: 2;}
#voice .container ul li a .txt p:nth-of-type(1) {font-size: 1.4rem;}
#voice .container ul li a .txt p:nth-of-type(2) {font-size: 1.2rem;}
#voice .container ul li a .txt p:nth-of-type(3) {font-size: 2rem; font-weight: bold;}
#voice .container ul li a .txt p:nth-of-type(3) span {font-size: 1.4rem; font-weight: normal;}
#voice .container ul li a .topBtn {padding: 10px 0; font-size: 1.4rem; margin: 20px auto 0;}
#voice .container ul li a:hover .topBtn {background-color: #000; background-image: url(../images/common/ic_arr_white.png); color: #fff; background-position: center right 5px;}
#voice .container ul li a .txt {line-height: 1.8;}
#voice .topBtn {margin: 50px auto;}

#news {padding: 100px 0; border-bottom: 2px solid #d5d4ca;}
#news .titH2 { text-align:center; }
#news .titH2 .en {font-size: 2.4rem;}
#news .listNews li {font-size: 1.4rem; border-top: 1px solid #f6f5ef; align-items: center;}
#news .listNews li:last-of-type {border-bottom: 1px solid #f6f5ef;}
#news .listNews li a {padding: 40px 0; background: url("../images/common/ic_arr_round.png") no-repeat center right 20px; background-size: auto; transition: all 0.2s;}
#news .listNews li a .date {font-family: 'IBM Plex Sans', sans-serif; letter-spacing: 0.1em; color: #c3ba7f; width: 90px;}
#news .listNews li a .txt {width: calc(100% - 120px);}
#news .listNews li a:hover {background-position: center right 10px; opacity: 0.6;}
#news .topBtn {margin: 50px auto;}
#news .listChanel {max-width: 790px; width: 100%; margin: 0 auto;}
#news .listChanel li {width: 48.11%;}
#news .listChanel li a:hover {opacity: 0.6;}
#news h3 {text-align: center; font-size: 2.4rem;}
#news .commonTxt {margin-bottom: 40px; text-align: center;}

#jewlTray {margin-bottom: 100px; border-bottom: 2px solid #d5d4ca; padding: 100px 0;}
#jewlTray .titH2 { text-align:center; }
#jewlTray .titH2 .en {font-size: 2.4rem;}
#jewlTray .box:last-of-type{border-top: 1px solid #d5d4ca; padding-top: 100px; margin-top: 100px;}
#jewlTray h3 {text-align: center; font-size: 2.4rem;}
#jewlTray .commonTxt {margin-bottom: 40px; text-align: center;}
#jewlTray ul{justify-content: flex-start;}
#jewlTray ul li {width: 22.5%; margin-right: 3.33%;}
#jewlTray ul li:nth-of-type(4n) {margin-right: 0;}
#jewlTray ul li a figure {text-align: center; margin-bottom: 20px; overflow: hidden; position: relative;}
#jewlTray ul li a figure:after{content: ''; padding-bottom: 100%; display: block;}
#jewlTray ul li a figure img {transition: all .2s ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#jewlTray ul li a .txt {letter-spacing: 0.1em;}
#jewlTray ul li a .txt .date {font-family: 'IBM Plex Sans', sans-serif; color: #c3ba7f; font-size: 1.4rem; margin-bottom: 10px; font-weight: 500;}
#jewlTray ul li a .txt h4 {font-size: 1.8rem; font-weight: bold; margin-bottom: 10px;}
#jewlTray ul li a .txt .tag{display: flex; flex-wrap: wrap;}
#jewlTray ul li a .txt .tag span {line-height: 1; border: 1px solid #000; padding: 5px 8px; font-size: 1.2rem; margin-bottom: 4px;}
#jewlTray ul li a .txt .tag span:not(:last-of-type) {margin-right: 4px;}
#jewlTray ul li a:hover {opacity: 0.6;}
#jewlTray ul li a:hover figure img {transform: scale(1.1);}
#jewlTray .topBtn {margin: 50px auto 0;}

#footBnr {margin:0 auto 100px;}
#footBnr .d-flex {display: flex;flex-wrap: wrap;justify-content: center;}
#footBnr .d-flex li {width: 32.31%; margin-right: 20px;}
#footBnr .d-flex li:last-of-type {margin-right: 0;}

/*          Media
----------------------------*/
@media (max-width: 1600px){
    #mv .tit{font-size: 1vw;}
    #mv .tit:after{width: 12.5vw; margin: 2.5vw auto 2vw;}
    #mv .txt{font-size: 1.3vw;}
}

@media (max-width: 1199px){   
    #product .container ul li h4 {font-size: 1.8rem;}

    #voice .container ul li a .img p {font-size: 1.6rem;}
}

@media (max-width: 810px){
    .titH2 .jp {font-size: 2rem;}    

    #concept .container {padding-bottom: 30px;}
    #concept .container .inner p {margin-bottom: 30px;}
}

@media (max-width: 767px){
	.slick-dots {bottom: -35px;}

	.topBtn {font-size: 1.6rem; margin: 0 auto; padding: 13px 0;}

	#mv {padding: 0; margin-bottom: 50px; width: 100%; height: unset;}
	#mv .slide img {width: 100%;}
    #mv .inner{right: 0; top: 74%;}
    #mv .tit{font-size: 2.67vw;}
    #mv .tit:after{width: 34.5vw; margin: 3.8vw auto 3vw;}
    #mv .txt{font-size: 4vw; line-height: 1.7;}
	
	#concept {padding-top: 36%;}
	#concept .txt {top: 0; right: 0; width: 60%;}
	#concept .img {position: static; width: 95%;}
	#concept .img img {width: 100%;}
	#concept .container {margin: -10% 0 0 auto; padding: 60px 0 30px; width: calc(100% - 20px);}
	#concept .container .inner {width: 100%; padding: 20px;}
	#concept .container .inner p br {display: none;}

	#product {padding: 60px 0;}
	#product .container .commonTxt {text-align: left;}
	#product .container .commonTxt br {display: none;}
	#product .container ul li {width: 48%; margin-bottom: 4%; padding-bottom: 4%}	
	#product .container ul li select {font-size: 1.2rem; padding: 5px; width: 86%;}
    #product .boxBtn div{width: 100%;}
    #product .boxBtn div:not(:last-of-type){margin-bottom: 15px;}
    #product .boxBtn a,#product .boxBtn a:hover{background-position: center right 12px !important;}
    
	#voice {padding: 60px 0;}
	#voice .container .commonTxt {text-align: left;}
	#voice .container .commonTxt br {display: none;}
	#voice .container ul li {width: 48%; margin-bottom: 6%;}
	#voice .container ul li:nth-of-type(2n) {margin-right: 0;}
	#voice .container ul li a .img {margin-bottom: 10px;}
	#voice .container ul li a .img p {font-size: 4vw; padding: 10px 0 0 0; position: static;}
	#voice .container ul li a .topBtn {width: 100%; margin: 10px auto 0;}
	#voice .container ul li a .txt p:nth-of-type(1) {font-size: 1.2rem;}
	#voice .container ul li a .txt p:nth-of-type(2) {font-size: 1rem;}
	#voice .container ul li a .txt p:nth-of-type(3) {font-size: 1.6rem;}
	#voice .container ul li a .txt p:nth-of-type(3) span {font-size: 1.2rem;}
	#voice .topBtn {margin: 30px auto;}

	#news {padding: 60px 0;}
	#news .commonTxt {text-align: left;}
	#news .commonTxt br {display: none;}
	#news .listNews li a {padding: 20px 50px 20px 0; background-position: center right;}
	#news .listNews li a .date {width: 100%; margin-bottom: 10px;}
	#news .listNews li a .txt {width: 100%;}
	#news .topBtn {margin: 30px auto;}

	#jewlTray {padding: 60px 0; margin-bottom: 60px;}
    #jewlTray .box:last-of-type{padding-top: 60px; margin-top: 60px;}
	#jewlTray .commonTxt {text-align: left;}
	#jewlTray .commonTxt br {display: none;}
	#jewlTray ul li {width: 48%; margin-right: 4%; margin-bottom: 6%;}
	#jewlTray ul li:nth-of-type(2n) {margin-right: 0;}
	#jewlTray ul li a figure {margin-bottom: 10px;}
	
	#footBnr .d-flex li {width: 100%;text-align: center; margin-right: 0 !important; margin-bottom: 20px;}
	
}