@charset "utf-8";


#slider_area{margin-bottom: 3rem;}




/* ---------------------------------------------------------------------------------------*/
/*ベストセラーと新商品／タブ切り替え (2024.2.14)*/
/* ---------------------------------------------------------------------------------------*/
#new_products{xdisplay: block;
    xpadding: 0 ;
    xbackground-color: aquamarine;
    background-color: #fff;
    position:relative;
    margin-bottom: 3rem;
}

#new_products::before {/* 擬似要素で背景にボーダー */
  content: '';
  width: 100%;
  height: 1px;
  display: inline-block;
  background-color: #ccc;
  position: absolute;
  top: 100px;
  left: 0;
  xz-index: -1;
}
/* タブレット用 （W=1180px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
#new_products::before { /* 1080px 未満はボーダーを非表示 */
  content: '';
  display:none;
}
}


.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    xwidth: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


.tab-label {
    color: #666;
    background: #fff;
    margin-right: 25px;
    xpadding: 3px 12px;
    order: -1;
}
/* タブレット用 （W=1180px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
.tab-label {
    margin: 0 13px;
}
}

.tab-content {
    width: 100%;
    display: none;
    padding: 20px 0;
    xbackground-color: antiquewhite;
    xborder-top: 2px solid #666;
}
/* タブレット用 （W=1080px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
.tab-content {
    padding: 0 0;
}
}


/* アクティブなタブ */
.tab-switch:checked+.tab-label {
color: #000;
font-weight: 600;
    xbackground: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content {
     display: block;
}

/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}


.row01{ display: flex;
xjustify-content: space-between;
xalign-items: flex-start;
max-width: 1280px;
xbackground-color: burlywood;
overflow-x: scroll;
xwhite-space: nowrap;
padding-bottom: 20px;
margin: 20px 0;
}

/* スクロールの幅の設定 */
.row01::-webkit-scrollbar {
height: 4px;
}

/* スクロールの背景の設定 */
.row01::-webkit-scrollbar-track {
border-radius: 2px;
box-shadow: 0 0 2px #666 inset;
}

/* スクロールのつまみ部分の設定 */
.row01::-webkit-scrollbar-thumb {
border-radius: 2px;
background: #000;
}

/* スクロールのつまみ部分の設定 */


.row01 .item01{xwidth: 24%; 
min-width: 270px;
margin-right: 16px}

.row01 .item01:last-child{margin-right: 0px}

.row01 .item01 img {xwidth: 100%; width: 270px;}

.row01 p,.row01 p a{width: 270px; line-height: 1.5; color: #000; white-space: normal;}
.row01 p a:hover{text-decoration: underline;}


/* グラデーションのリンクボタン (2024.2.15) */
.grad-button {
  position: relative; /* static以外を指定 */
  z-index: 0; /* グラデーションよりも上に配置 */
  display: inline-block; /* inline以外にする */
  padding: 1rem;
  xwidth: 200px; /* 横幅 */
  xheight: 60px; /* 縦幅 */
  xline-height: 60px; /* 行の高さ(heightと同じにする) */
  background: transparent; /* 背景を透明にする */
  border-radius: 8px; /* 角の丸み */
  overflow: hidden; /* はみ出した部分を非表示(角丸を付ける場合は必須) */
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}

.grad-button-02 {
  position: relative; /* static以外を指定 */
  z-index: 0; /* グラデーションよりも上に配置 */
  display: inline-block; /* inline以外にする */
  padding: 0.25rem 2rem;
  xwidth: 200px; /* 横幅 */
  xheight: 60px; /* 縦幅 */
  xline-height: 60px; /* 行の高さ(heightと同じにする) */
  background: transparent; /* 背景を透明にする */
  border-radius: 8px; /* 角の丸み */
  overflow: hidden; /* はみ出した部分を非表示(角丸を付ける場合は必須) */
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}

/* ::before, ::afterで2種類の色を用意 */
.grad-button::before,
.grad-button::after, 
.grad-button-02::before,
.grad-button-02::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* hover前（単色） */
.grad-button::before, 
.grad-button-02::before{
  transition: all 0.6s; /* アニメーション実行時間 */
  z-index: -1;
  background-color: #000;
}

/* hover時（グラデーション）  */
.grad-button::after,
.grad-button-02::after{
  z-index: -2;
  background-image: linear-gradient(90deg, rgba(104, 104, 216, 1) 15%, rgba(254, 134, 100, 1));
}

/* hover時にhover前（単色）を透明にする */
.grad-button:hover::before,
.grad-button-02:hover::before
{
  opacity: 0;
}











/* ---------------------------------------------------------------------------------------*/
/* 商品カテゴリー リンク (2024.3.1)
*/
/* ---------------------------------------------------------------------------------------*/

#product_category{max-width: 1280px;
    margin: 0 auto 4rem;}

#products{text-align: center;}

#products h2{}

#products_list{max-width: 1280px;
    margin: 0 auto;}

#products_list li{overflow: hidden;}


.products_list{
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* 折返し指定 */
xpadding:0;
}

.products_list li {
	width: 49.2%;
    margin-bottom: 20px;/*各画像下に余白をつける*/
    border-radius: 10px;
    position: relative;
}

.txt_products_list{
display: block;
width: 90%;
position: absolute;
left: 5%;
top:25%;
z-index: 10;
}

.txt_products_list h3{
font-family: 'Inter';
font-size:1.8125rem; /*29px*/
font-weight: 800;
line-height: 1.2;
color: #fff;
margin: 0;
text-transform: none;
text-align: left;
}
.txt_products_list h3.ja{
font-family: 'Noto Sans JP', sans-serif;
font-size:1.125rem; /* 18px */
font-weight: 700;
line-height: 1.2;
color: #fff;
margin-bottom: 2%;
text-transform: none;
}
.txt_products_list p{
font-weight: 600;
line-height: 1.4;
color: #fff;
}


@media only screen and (max-width : 1180px ){
.txt_products_list{
display: block;
width: 90%;
position: absolute;
left: 5%;
top:15%;
z-index: 10;
}
}

@media only screen and (max-width: 960px) {
.txt_products_list h3{
font-size:1.5625rem; /*25px*/
line-height: 1.2;
}
.txt_products_list h3.ja{
font-size:1rem; /* 16px */
line-height: 1.2;
}
.txt_products_list p{
font-size:0.875rem; /* 14px */
line-height: 1.2;
}
}



@media only screen and (max-width: 768px) {
.products_list{
display: block;
padding:0 10px;
}
.products_list li {
	width: 100%;
}
}

/*イメージは横幅100%にする*/
.products_list img{
	width:100%;
	height:auto;
	vertical-align: bottom; /*画像の下にできる余白を削除*/}
	
.products_list img{xopacity: 0.5;}
.products_list img:hover{xopacity: 1;}


@media only screen and (max-width: 768px) {

}



/* ---------------------------------------------------------------------------------------*/
/* 画像リンクの動き */
/* ---------------------------------------------------------------------------------------*/

/*　画像が拡大＋回転　*/

.zoomInRotate{
/*opacityとtransformがかけあわさると生じる表示バグの回避*/
    backface-visibility: hidden;
}
.zoomInRotate img{
	transform: scale(1);
	transition: 1s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(0deg) scale(1.2);/*回転（今回、未使用）、拡大の値を変更したい場合はこの数値を変更*/
}



/* ---------------------------------------------------------------------------------------*/
/* カラーエキスパートのご紹介 */
/* ---------------------------------------------------------------------------------------*/

#mainSec01{max-width: 1280px;
    margin: 0 auto 4rem;}
    
.color_experts{display: flex;}

.color_experts .txt{margin-right: 40px;
width: 35%;
display: flex;
align-items: center;
xpadding-right: 20px;
}

.color_experts h2{
font-family: 'Inter';
font-size:1.5rem; /*29px*/
font-weight: 500;
line-height: 1;
margin-bottom: 5px;
text-align: left;
}

.color_experts h2.ja{
font-family: 'Noto Sans JP', sans-serif;
font-size:1.125rem; /* 18px */
font-weight: 400;
line-height: 1.2;
margin-bottom: 5%;
text-transform: none;
}

@media only screen and (max-width: 768px) {
.color_experts{display: block;
width: 100%;}

.color_experts .txt{
width: 90%;
display: block;
text-align: center;
margin: 0 auto 2rem;
}

.color_experts h2{text-align: center;}

.slider_thmb {
   width: 100%;
   margin: 0 auto;
}

.slider_thmb li{

}

}



/* ---------------------------------------------------------------------------------------*/
/* サムネイル・スライダーのためのcss */
/* ---------------------------------------------------------------------------------------*/
.slider_thmb {
   width: 65%;
xbackground-color: beige;
	xmargin-bottom: 1rem;
    xpadding-left: 40px;
	touch-action:auto;  /* ★Slick上でピンチアウトを有効に */
}


.slider_thmb li{
width: 25%;
height:auto;
xmargin-left:20px;
text-align: center;
}

.slider_thmb li img{width: 73%;
border-radius: 50%;
margin:0 auto 30px}


/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 ;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev_02, 
.slick-next_02 {
    position: absolute;/*絶対配置にする*/
    top: 50%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #000;/*矢印の色*/
    border-right: 2px solid #000;/*矢印の色*/
    height: 15px;
    width: 15px;
	z-index: 555;
}

.slick-prev_02 {/*戻る矢印の位置と形状*/
    left: 0;
    transform: rotate(-135deg);
}

.slick-next_02 {/*次へ矢印の位置と形状*/
    right: 0;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
    text-align:center;
  position: absolute;/*絶対配置 センターにする*/
    top: 94%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  
}

.slick-dots li {
    display:inline-block;
	margin:0 8px;
    
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    xbackground:#555;/*ドットボタンの色*/
    border: solid 1px #fff;
}

.slick-dots .slick-active button{
    background:#fff/*ドットボタンの現在地表示の色*/
}


/* ---------------------------------------------------------------------------------------*/
/* パントン・カラー・インスティテュート */
/* ---------------------------------------------------------------------------------------*/
#mainSec02{max-width: 1280px;
    margin: 0 auto 4rem;}
    
.pantone_color_institute {display: flex;
width: 100%;
xbackground-color: antiquewhite}

.pantone_color_institute .video{
width: 47%;
position: relative;
  padding-bottom: 27%; /*高さ 要調整*/
  height: 0;
  overflow: hidden;
  margin-right: 3%;
}
.pantone_color_institute .video iframe{
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.pantone_color_institute .txt{width: 50%;
display: block;
xbackground-color: beige;}

.pantone_color_institute .txt p{margin-bottom: 1rem;}


.pci_client {display: flex;
justify-content: space-between;
align-items: center;}

.pci_client li{width: 20%;}


@media only screen and (max-width: 768px) {
.pantone_color_institute {display: block;
width: 100%;
text-align: center;
xbackground-color: antiquewhite}

.pantone_color_institute .video{
width: 90%;
position: relative;
  padding-bottom: 50%; /*高さ 要調整*/
  height: 0;
  overflow: hidden;
  margin: 0 auto 2rem;
  
}

.pantone_color_institute .txt{width: 90%;
display: block;
xbackground-color: beige;
margin: 0 auto;
}


}




/* ---------------------------------------------------------------------------------------*/
/* Pantone Connectのご紹介 */
/* ---------------------------------------------------------------------------------------*/
#mainSec03{max-width: 1280px;
    margin: 0 auto 4rem;}
    
.meet_pantone_connect {display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
xbackground-color: antiquewhite}


.meet_pantone_connect .meet_img{width: 60%;
display: block;}

.meet_pantone_connect .meet_nav{width: 38%;
display: block;}



/* ---------------------------------------------------------------------------------------*/
/* アコーディオンメニュー */
/* ---------------------------------------------------------------------------------------*/

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 100%;
    xmax-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 1rem 0;
}

.accordion-area section {
	xborder: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    transition: all .5s ease;
    display: flex;
    align-items: center;
    height: 36px;
     padding: 3% ;
    xmargin-bottom: 1rem;
    xbackground-color: antiquewhite;
}

.title.open h3{color: #666;} /*.open・.closeをJSより付与*/
.title.close h3{color: #000;}


.title h3{font-size: 22px;
margin-top:16px;
margin-left:16px;
color: #666;
}



/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    xbackground: #f3f3f3; 
    color: #000;
    margin:0 3% 3% 3%;
    padding: 3%;
}





/* アコーディオンに連動して表示される画像エリア （2024.3.13 未作業）*/