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

/*フェード タブ1用
===================================*/
.container2 {
  padding: 0;
}

.fade-in {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease-out, transform 1s ease-out;
  transition-delay: calc(var(--delay) * 0.1s);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/*フェード タブ2・3用
===================================*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-panel {
  animation: fadeIn 0.5s ease;
}



/*タブ切り替えのスタイル　ペアリング用
===================================*/
.tabs {
  width: 670px;
  background: #f9f7f2;
  margin: 50px auto 0;
}

/*タブのスタイル*/
.tab_item {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
}

.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  background-color: #3E0703;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/* 1つ目のタブ（ペアリング用） */
#all:checked ~ #all,
#programming:checked ~ #programming,
#titan:checked ~ #titan {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #3E0703;
  color: #fff;
}



/*タブ切り替えのスタイル　ネックレス用
===================================*/

/*タブのスタイル*/
.tab_nc {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
}

.tab_nc:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_nc"] {
  display: none;
}

/* 2つ目のタブ（ネックレス用） */
#silver-nc:checked ~ #silver-nc,
#gold-nc:checked ~ #gold-nc,
#lady-nc:checked ~ #lady-nc {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_nc {
  background-color: #3E0703;
  color: #fff;
}



/*タブ切り替えのスタイル　逆バレンタイン用
===================================*/

/*タブのスタイル*/
.tab_reverse {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
}

.tab_reverse:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_reverse"] {
  display: none;
}

/* 3つ目のタブ（逆バレンタイン用） */
#reverse-nc:checked ~ #reverse-nc,
#reverse-pierce:checked ~ #reverse-pierce,
#reverse-bracelet:checked ~ #reverse-bracelet {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_reverse {
  background-color: #3E0703;
  color: #fff;
}



/*タブ切り替えのスタイル　小物用
===================================*/

/*タブのスタイル*/
.tab_komono {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
}

.tab_komono:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_komono"] {
  display: none;
}

/* 4つ目のタブ（小物用） */
#komono-fashion:checked ~ #komono-fashion,
#komono-business:checked ~ #komono-business,
#komono-zippo:checked ~ #komono-zippo {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_komono {
  background-color: #3E0703;
  color: #fff;
}



/*アイテム 2カラム
===================================*/
.item{
  max-width: 100%;
  width: 670px;
  color: #fff;
  padding: 0;
}
.item h3{
  position: relative;
  width: 250px;
  padding: 0.6em;
  background: #fff;
  text-align: center;
  font-size: 1.2em;
  margin: 20px auto 40px;
  color: #3E0703;
  opacity: 0.8;
  border-radius: 5px;
}

.item h3:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
  width: 0;
  height: 0;
  opacity: 0.8;
}
.item p{
  text-align: center;
  color: #fff;
  font-size: 0.8em;
  margin: 5px 0 ;
}
.item img{
  width: 100%;
  border-radius: 5px;
}
.item ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
}

.item li {
  width: calc((100% - 20px) / 2);
  height: 350px;
  margin: 0 0 10px;
  padding-bottom:24px;
  list-style: none;
}



/* SP用設定 レスポンシブ 共通
================================================== */
@media (max-width: 768px) {
.tabs {
  width: 100%;
  background: #f9f7f2;
  margin: 50px auto 0;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  background-color: #3E0703;
  padding: 40px 20px 0;
  clear: both;
  overflow: hidden;
}

    
/* タブのスタイル ペアリング用
================================================== */
.tab_item {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
  letter-spacing: 1px;
  font-size: 0.8em;
}

.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/* 1つ目のタブ（ペアリング用） */
#all:checked ~ #all,
#programming:checked ~ #programming,
#titan:checked ~ #titan {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #3E0703;
  color: #fff;
}

    
/* タブのスタイル ネックレス用
================================================== */
.tab_nc {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
  letter-spacing: 1px;
  font-size: 0.8em;
}

.tab_nc:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_nc"] {
  display: none;
}

/* 2つ目のタブ（ネックレス用） */
#silver-nc:checked ~ #silver-nc,
#gold-nc:checked ~ #gold-nc,
#lady-nc:checked ~ #lady-nc {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_nc {
  background-color: #3E0703;
  color: #fff;
}

    
/* タブのスタイル 逆バレンタイン用
================================================== */
.tab_reverse {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
  letter-spacing: 1px;
  font-size: 0.8em;
}

.tab_reverse:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_reverse"] {
  display: none;
}

/* 3つ目のタブ（逆バレンタイン用） */
#reverse-nc:checked ~ #reverse-nc,
#reverse-pierce:checked ~ #reverse-pierce,
#reverse-bracelet:checked ~ #reverse-bracelet {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_reverse {
  background-color: #3E0703;
  color: #fff;
}

    
/* タブのスタイル ハワイアン小物用
================================================== */
.tab_komono {
  display: block;
  width: calc(100%/3);
  height: 50px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  line-height: 50px;
  background-color: #d9d9d9;
  border-bottom: 3px solid #3E0703;
  float: left;
  transition: all 0.2s ease;
  letter-spacing: 1px;
  font-size: 0.8em;
}

.tab_komono:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_komono"] {
  display: none;
}

/* 2つ目のタブ（ネックレス用） */
#komono-fashion:checked ~ #komono-fashion,
#komono-business:checked ~ #komono-business,
#komono-zippo:checked ~ #komono-zippo {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_komono {
  background-color: #3E0703;
  color: #fff;
}



/*アイテム 2カラム
===================================*/
.item ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
  font-size:0.6em;
}

.item li {
  width: calc((100% - 10px) / 2);
  height: 200px;
  margin: 0 0 10px;
  padding: 0 0 24px;
  list-style: none;
}