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


header {
	background-color: #F9F9F9;
}

/* product */



#product {
	margin: 93px 0 0;

}

@media screen and (max-width:1000px) {
#product {
	margin: 75px 0 0;
}	
}

#product_container {
	width: 95%;
	max-width: 1450px;
	margin: 0 auto;
	padding: 50px 0;
}

@media screen and (max-width:1000px) {
#product_container {
	padding: 10px 0 30px;
}	
}

#product_flow {
	padding: 35px 0 0;
}

.slider-main img,
.slider-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.slider-thumb {
  margin-top: 12px;
}

/* サムネの余白（好みで） */
.slider-thumb .slick-slide {
  padding: 0 6px;
  box-sizing: border-box;
}

/* 選択中サムネを分かりやすく（任意） */
.slider-thumb .slick-current img {
  outline: 2px solid #000;
  outline-offset: -2px;
}

#product_box {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width:1000px) {
#product_box {
	display: block;
}	
}

#product_top_img {
	width: 50%;
}

@media screen and (max-width:1000px) {
#product_top_img {
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
}	
}

#product_top_text {
	width: 46%;
	padding: 50px 0 0;
}

@media screen and (max-width:1000px) {
#product_top_text {
	width: 100%;
}
	
}

#product_top_text h1 {
	font-size: 34px;
	color: #4E4E4E;
	margin: 0 0 20px;
}

@media screen and (max-width:1000px) {
#product_top_text h1 {
	font-size: 25px;
	margin: 0 0 15px;
}	
}

#product_top_text h2 {
	font-size: 15px;
	color: #4E4E4E;
	margin: 0 0 20px;
}

@media screen and (max-width:1000px) {
#product_top_text h2 {
	margin: 0 0 12px;
}	
}

#product_top_text .price {
	font-size: 28px;
	font-weight: bold;
	color: #737373;
	margin: 0 0 30px;
}

@media screen and (max-width:1000px) {
#product_top_text .price {
	font-size: 25px;
	margin: 0 0 15px;
}	
}


#product_top_text .price span {
	color: #B2B2B2;
	font-size: 15px;
	font-weight: normal;
}

#product_top_text p {
	font-size: 15px;
	color: #737373;
	margin: 0 0 20px;
}

#item_color_list {
	display: flex;
	flex-wrap: wrap;
	padding: 30px 0;
	max-width: 500px;
}

@media (max-width: 1000px) {
#item_color_list {
	max-width: 1000px;
	padding: 20px 0;
}	
}

#item_color_list li {
	margin: 0 10px 10px 0;
}

@media screen and (max-width:1000px) {
#item_color_list li {
	margin: 0 5px 5px 0;
}	
}

#item_color_list li a {
	display: inline-block;
	width: 100%;
	width: 33px;
	height: 33px;
	padding: 4px;
	background-color: #FFF;
	border: 1px solid rgba(213,213,213,1.00);
	border-radius: 50%;
	position: relative;
} 

@media screen and (max-width:1000px) {
#item_color_list li a {
	width: 28px;
	height: 28px;
} 	
}

#item_color_list li a::after {
	content: "";
	position: absolute;
	height: 25px;
	width: 25px;
	top: 3px;
	left: 3px;
	border-radius: 50%;
}

@media (max-width: 1000px) {
#item_color_list li a::after {
	height: 22px;
	width: 22px;
	top: 2px;
	left: 2px;
}	
}

#item_color_list li .color-SunflowerYellow::after {
	background-color: #FED800;
}

#item_color_list li .color-FreshOrange::after {
	background-color: #E53E27;
}

#item_color_list li .color-TulipRed::after {
	background-color: #E30008;
}

#item_color_list li .color-PlumRed::after {
	background-color: #582536;
}

#item_color_list li .color-PeonyPink::after {
	background-color: #EFC1C5;
}

#item_color_list li .color-PassionPink::after {
	background-color: #F23CAF;
}

#item_color_list li .color-DeepViolet::after {
	background-color: #601E6B;
}

#item_color_list li .color-OceanBlue::after {
	background-color: #2454A6;
}

#item_color_list li .color-NavyBlue::after {
	background-color: #043050;
}

#item_color_list li .color-JeansBlue::after {
	background-color: #085E7F;
}

#item_color_list li .color-EmeraldGreen::after {
	background-color: #19585E;
}

#item_color_list li .color-OliveGreen::after {
	background-color: #486127;
}

#item_color_list li .color-ForestGreen::after {
	background-color: #254938;
}

#item_color_list li .color-SandyBeige::after {
	background-color: #F2E6D2;
}

#item_color_list li .color-EspressoBrown::after {
	background-color: #5A4332;
}

#item_color_list li .color-SmokeGrey::after {
	background-color: #89868C;
}

#item_color_list li .color-IntenseBlack::after {
	background-color: #010101;
}

#item_color_list li .color-habana::after {
	background-color: #632B11;
}

#item_color_list li .color-coffee::after {
	background-color: #311F1C;
}

#item_color_list li .color-ebony::after {
	background-color: #1B1A1E;
}

#item_color_list li .color-pagoda::after {
	background-color: #D43340;
}

#item_color_list li .color-bordeaux::after {
	background-color: #68212D;
}

#item_color_list li .color-roseofparis::after {
	background-color: #E692BA;
}

#item_color_list li .color-goldenglow::after {
	background-color: #FEB92E;
}

#item_color_list li .color-windsorpurple::after {
	background-color: #786ABD;
}

#item_color_list li .color-madonnablue::after {
	background-color: #5C89D9;
}

#item_color_list li .color-navy::after {
	background-color: #192646;
}

#item_color_list li .color-deepblue::after {
	background-color: #0A3979;
}

#item_color_list li .color-elephantgrey::after {
	background-color: #B0B9D3;
}

#item_color_list li .color-reindeerbeige::after {
	background-color: #DBC3B6;
}

#item_color_list li .color-emerald::after {
	background-color: #64B673;
}

#item_color_list li .color-junglegreen::after {
	background-color: #325F60;
}


#item_color_list li .color-oldgold::after {
	background-color: #F0AB44;
}

#item_color_list li .color-scarlet::after {
	background-color: #D44D43;
}

#item_color_list li .color-kingfisher::after {
	background-color: #57BCE5;
}

#item_color_list li .color-olivegreen::after {
	background-color: #A8B053;
}

#item_color_list li .color-tangerine::after {
	background-color: #D85C35;
}

#item_color_list li .color-cerise::after {
	background-color: #C0323E;
}

#item_color_list li .color-desertdust::after {
	background-color: #C6A18B;
}

#item_color_list li .color-tropicalgreen::after {
	background-color: #5FBA47;
}

#item_color_list li .color-vintageblue::after {
	background-color: #A2C9E1;
}

#item_color_list li .color-paradiseblue::after {
	background-color: #01B3D9;
}


.jumpToFlowTabs {
	
	display: flex;
	flex-wrap: wrap;
	max-width: 500px;
}

.jumpToFlowTabs button {
	width: 48%;
	margin: 0 2% 2% 0;
	padding: 8px 5px;
	text-align: center;
	display: block;
	background-color: rgba(224,224,224,1.00);
	color: #636363;
}

@media screen and (max-width:1000px) {
.jumpToFlowTabs button {
	width: 49%;
	margin: 0.5%;
	font-size: 13px;
	padding: 8px 2px;
}	
}

/* ===== モーダル全体 ===== */
/* ===== モーダル（非表示状態） ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-weight: normal;

  /* display: none は使わない（アニメさせるため） */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease;
}

/* ===== 開いている状態 ===== */
.modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 背景（オーバーレイ） */
.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);

  opacity: 0;
  transition: opacity .25s ease;
}

.modal.is-open .modal__overlay{
  opacity: 1;
}

/* 本体 */
.modal__content{
  position: absolute;
  top: 50%;
  left: 50%;

  /* “中央 + アニメ” を両立させる */
  transform: translate(-50%, -50%) scale(.98);
  opacity: 0;

  width: min(90%, 720px);
  max-height: 90vh;
  overflow: auto;

  background: #fff;
  border-radius: 10px;
  padding: 24px;

  transition: opacity .25s ease, transform .25s ease;
}

@media screen and (max-width:1000px) {
.modal__content{
  padding: 15px;

}	
}


.modal.is-open .modal__content{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal__content .modal_masin {
	max-width: 250px;
	width: 60%;
	margin: 0 auto 20px;
}

.modal__content h3 {
	font-size: 32px;
	color: #737373;
	margin: 0 0 30px;
	line-height: 1;
}

@media screen and (max-width:1000px) {
.modal__content h3 {
	font-size: 24px;
}	
}


.modal__content h3 span {
	color: #A8A8A8;
	font-size: 16px
}


.modal__content p {
	color: #737373;
	margin: 0 0 30px;
}

@media screen and (max-width: 1000px) {
.modal__content p {
	font-size: 14px;
}	
}

.shop_link {
	display: flex;
	flex-wrap: wrap;
}

.shop_link li {
	max-width: 180px;
	width: 46%;
	margin: 0 4% 15px 0;
}

.modal__content button {
	display: block;
	width: 100%;
	padding: 5px 0;
	text-align: center;
	background-color: rgba(228,228,228,1.00);
	color: #737373;
	border-radius: 7px;
	margin: 20px 0 0;
	
}



/* 閉じるボタン（任意） */
.modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

#item_list {
	padding: 40px 0 70px;
	display: flex;
	flex-wrap: wrap;
}

#item_list li {
	width: 18%;
	margin: 1%;
}

@media screen and (max-width:1000px) {
#item_list li {
	width: 23%;
	margin: 1%;
}	
}

@media screen and (max-width:800px) {
#item_list li {
	width: 31.3%;
	margin: 1%;
}	
}

@media screen and (max-width:600px) {
#item_list li {
	width: 48%;
	margin: 1%;
}	
}


#item_list li img {
	width: 85%;
	display: block;
	margin: 0 auto 10px;
}

@media (max-width: 500px) {
#item_list li img {
	width: 75%;
}	
}

#item_list li h3 {
	text-align: center;
	font-size: 15px;
	color: #737373;
}

@media (max-width: 500px) {
#item_list li h3 {
	font-size: 14px;
}	
}

#item_list li h3 span {
	font-size: 12px;
	color: #A8A8A8;
}


.flow_list {
	max-width: 1200px;
	margin: 0 auto;
	width: 95%;
} 

.slider .slick-list {
    padding: 0 10% 0 0 !important;
}


.my_dots {
  display: flex;
  justify-content: center;
  width: 320px;
  padding: 20px 0;
  margin: 0 auto;
}

.my_dots li {
  width: 10px;
  height: 10px;
	margin: 0 7px;
  background-color: #fff;
  border-radius: 50%;
}



.my_dots .slick-active {
  background-color: #d15415;
}

.my_dots button {
  opacity: 0;
}

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

/* ===== tabs ===== */
.flowTabs__nav {
  display: flex;
  align-items: flex-end;
  padding: 0 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.flowTabs__tab {
  appearance: none;

  background-color: #fff;
  color: #636363;
  font-weight: normal;
  font-size: 14px;
  padding: 15px 0;
  width: 180px;
	text-align: center;
  cursor: pointer;
  line-height: 1;
  transition: 0.15s ease-in-out;
	position: relative;
	z-index: 1;
}

.flow_item > p {
	font-size: 12px;
}

@media screen and (max-width:500px) {
.flow_item > p {
	font-size: 10px;
}	
}

.flowTabs__tab.is-active {
  background-color: #EBEBEB;
}

#tab-how-to-dye.is-active {
  background-color: #FFC9D5;
}

#tab-how-to-dye.tab_premia.is-active {
	background-color: #B7D6EF;
}

#tab-how-to-dye.tab_multi.is-active {
	background-color: #D1F0C2;
}


/* ===== panel area (pink background like screenshot) ===== */
.flowTabs__panels {
	position: relative;
	z-index: 2;
	margin: -2px 0 0;
}


/* panel */
.flowTabs__panel {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.flowTabs__panel.is-active {
  visibility: visible;
  height: auto;
}

.flowTabs__panel {
  margin: 0;
	background-color: #EBEBEB;
	padding: 50px 0 35px;
}

.tab_masindai.is-active {
	background-color: #FFC9D5;
}

.tab_multi.is-active {
	background-color: #D1F0C2;
}

.tab_premia.is-active {
	background-color: #B7D6EF;
}

/* ===== responsive: tabs look closer on mobile ===== */
@media (max-width: 640px) {
  .flowTabs__nav {
    padding: 0 4px;
  }
  .flowTabs__tab {
    font-size: 12px;
    padding: 12px 1px;
  }

}
@media (max-width: 640px) {
  .flowTabs__nav {
    padding: 0 4px;
  }
  .flowTabs__tab {
    font-size: 10px;
    padding: 12px 1px;
  }

}


.flow_text {
	padding: 20px 5px 35px;
	border-radius: 8px;
	background-color: #FFF;
	margin: 0 15px 0;
}

.flow_text p {
	text-align: center;
	color: #5C5C5C;
	min-height: 60px;
	 display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央（左寄せなら削除） */
  margin: 0;
}

/* 共通 */
.slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;   /* 画像サイズに合わせる */
  height: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}

@media screen and (max-width:1000px) {
.slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;   /* 画像サイズに合わせる */
  height: 42px;
}	
}


.slider .slick-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 左 */
.slider .slick-prev {
  left: -30px; /* 調整可 */
}

@media screen and (max-width:1000px) {
.slider .slick-prev {
  left: -8px; /* 調整可 */
}	
}

/* 右 */
.slider .slick-next {
  right: -30px; /* 調整可 */
}


@media screen and (max-width:1000px) {
.slider .slick-next {
  right: -8px; /* 調整可 */
}	
}


/* 戻るは画像を反転 */
.slider .slick-prev img {

}

/* 端のとき非表示 */
.slider .slick-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== 商品スペック ===== */
.spec {
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
}

.spec__list {
  margin: 0;
  padding: 0;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  background: #fff;
}

.spec__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
}

.spec__row + .spec__row {
  border-top: 1px solid #e6e6e6;
}

.spec__term,
.spec__desc {
  margin: 0;
  padding: 14px 16px;
  line-height: 1.6;
  font-size: 15px;
}

.spec__term {
  background: #fafafa;
  font-weight: 700;
  color: #333;
  border-right: 1px solid #e6e6e6;
}

.spec__desc {
  color: #333;
}

/* SP */
@media (max-width: 640px) {
  .spec__row {
    grid-template-columns: 1fr;
  }

  .spec__term {
    border-right: none;
    border-bottom: 1px solid #e6e6e6;
  }

  .spec__term,
  .spec__desc {
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* ===== DYLON 相性表 ===== */
.dylon-matrix {
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
}

.dylon-matrix__wrap {
  border: 0px solid #111;
  background: #fff;
}

/* table base */
.dylon-matrix__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  color: #111;
}

.dylon-matrix__table th,
.dylon-matrix__table td {
  border: 1px solid #e6e6e6;
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.25;
  background: #fff;
  color: #333;
}

/* top super header */
.dylon-matrix__super {
  font-weight: 700;
  background: #fff;
}

/* left black side header (top) */
.dylon-matrix__table .dylon-matrix__side {
  width: 170px;
  color: #333;
  background: #fafafa;
  font-weight: 700;
}

/* left black row headers */
.dylon-matrix__rowhead {
  color: #333;
  background: #111;
  font-weight: 700;
  text-align: left;
  padding-left: 12px;
}

/* small sub text inside headers */
.dylon-matrix__sub {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
}

/* symbol sizing */
.dylon-matrix__table td {
  font-size: 18px;
  font-weight: 700;
}

/* optional: tune each state (kept monochrome like image) */
.is-good,
.is-ok,
.is-mid,
.is-ng {
  color: #111;
}

/* note mark */
.dylon-matrix__note {
  font-size: 12px;
  font-weight: 700;
  margin-left: 2px;
  vertical-align: super;
}

/* legend */
.dylon-matrix__legend {
  padding: 10px 12px 12px;
}

.dylon-matrix__legendList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  font-size: 13px;
}

.dylon-matrix__legendList li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dylon-matrix__mark {
  display: inline-block;
  width: 1.6em;
  text-align: center;
  font-weight: 800;
}

.dylon-matrix__foot {
  margin: 8px 0 0;
  font-size: 13px;
}

/* responsive: 横スクロールにする */
@media (max-width: 900px) {
  .dylon-matrix__wrap {
    overflow-x: auto;
  }
  .dylon-matrix__table {
    min-width: 860px;
  }
}


/* ===== ご注意リスト ===== */
.caution {
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
  background-color: #FFF;
  padding: 15px;
  box-sizing: border-box;
}

.caution__title {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 15px 0;
}

.caution__list {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}

.caution__list li {
  margin-bottom: 10px;
  line-height: 1.8;
  font-size: 15px;
  color: #333;
}

/* SP */
@media (max-width: 640px) {
  .caution__title {
    font-size: 22px;
  }
  .caution__list li {
    font-size: 14px;
    line-height: 1.7;
  }
}

#link_list {
	display: flex;
	max-width: 1150px;
	margin: 0 auto;
	width: 95%;
	padding: 30px 0;
	flex-wrap: wrap;
}

#link_list button {
	width: 80%;
	max-width: 350px;
	margin: 0 15px 15px 0;
	display: block;
	
}

@media (max-width: 640px) {
#link_list button {
	margin: 0 auto 15px;	
}	
}


#link_list a {
	width: 80%;
	max-width: 350px;
	margin: 0 15px 15px 0;
	display: block;
}

@media (max-width: 640px) {
#link_list a {
	margin: 0 auto 15px;	
}	
}


/* youtubeモーダル **/
/* 非表示 */
.ytModal[hidden] { 
  display: none; 
}

/* モーダル全体 */
.ytModal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* ★中央配置の本体 */
  display: grid;
  place-items: center;

  padding: 24px; /* 画面端との余白（SP安全） */
}

/* 背景 */
.ytModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .25s ease;
	z-index: 1000;
}

/* ダイアログ */
.ytModal__dialog{
  position: relative;
  width: min(960px, 100%);
  max-height: 90vh; /* 縦長端末対策 */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  z-index: 10001;
  transform: scale(.96);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;

  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

/* アニメON */
.ytModal.is-open .ytModal__backdrop { 
  opacity: 1; 
}
.ytModal.is-open .ytModal__dialog { 
  transform: scale(1);
  opacity: 1; 
}

/* 閉じるボタン */
.ytModal__close{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* プレイヤー */
.ytModal__player{
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.ytModal__player iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ytOpen p {
	font-size: 12px;
}