@charset "utf-8";
.cfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.cfix {
  min-height: 1px;
}

#stocking_chart2024 {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}

#stocking_chart2024 .imgArea{
 margin:9% auto;
 position: relative;
}
#stocking_chart2024 .imgArea p{
position: absolute;
font-size: 21px;
border-bottom: 1px solid #525252;
margin: 0 auto;
}
#stocking_chart2024 .imgArea p.color_name1{
top: 83%;
left: 17%;
}
#stocking_chart2024 .imgArea p.color_name2{
top: 87.5%;
left: 15.5%;
}
#stocking_chart2024 .imgArea p.color_name3{
top: 83%;
left: 34.5%;
}
#stocking_chart2024 .imgArea p.color_name4{
top: 90.5%;
left: 34.5%;
}
#stocking_chart2024 .imgArea p.color_name5{
top: 83%;
left: 52.6%;
}
#stocking_chart2024 .imgArea p.color_name6{
top: 90.5%;
left: 53.5%;
}
#stocking_chart2024 .imgArea p.color_name7{
top: 83%;
left: 72.5%;
}
#stocking_chart2024 .imgArea p.color_name8{
top: 90%;
left: 71.7%;
}
#stocking_chart2024 .imgArea p.color_name9{
top: 90.5%;
left: 14.7%;
}
#stocking_chart2024 .imgArea a:hover{
  opacity:0.7;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}


.content01 {
  margin-bottom: 15%;
}

ul.cfix.row-fluid.itemArea.liquid-column2{
 margin-top:7%;
}

ul.btn2 {
  margin: 0 13%;
}
ul.btn3 {
  margin-top: 4%;
}
/*#stocking_chart2024 ul.cfix.row-fluid.itemArea.liquid-column2.span2{
    width: 16%;
    margin-left: 0.8%;
}*/

#stocking_chart2024 li.span2{
    width: 19%;
    margin-left: 1%;
    height: 950px;
}

#stocking_chart2024 li.span2:nth-child(6){
    margin-left: 11%;
}


/*pickupItem*/
#stocking_chart2024 .main_catch,
#stocking_chart2024 h2{
 font-size:26px;
 margin:5% auto 2%;
 line-height: 1.5em;
}

#stocking_chart2024 .main_catch {
  margin: 5% auto;
}

#stocking_chart2024 h2.title2 ,#stocking_chart2024 h2.title3{
 margin:5% auto 6%;
}

@media screen and (max-width: 768px){
  #stocking_chart2024 h2.title2 ,#stocking_chart2024 h2.title3 {
    margin: 10% auto 6%;
  }
}


#stocking_chart2024 div p.color {
  height: 65px;
}

/* new-chart */
#new-chart {
  margin-bottom: 12%;
}

#new-chart .main_catch ,
#new-chart ._info{
 font-size:26px;
 margin:5% auto 2%;
 line-height: 1.5em;
}

p .txtblock {
  display: inline-block;
}


/*ロゼワイン*/
#stocking_chart2024 div.frame1 ,
#stocking_chart2024 div.rose-wine{
  border: 1px solid #e5dbd2;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame1 p.color,
#stocking_chart2024 div.rose-wine p.color{
  background-color: #e5dbd2;
  padding: 6%;
}

/*ヌーディベージュ*/
#stocking_chart2024 div.frame2,
#stocking_chart2024 div.nude-beige{
  border: 1px solid #e7c4a6;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame2 p.color,
#stocking_chart2024 div.nude-beige p.color{
  background-color: #e7c4a6;
  padding: 6%;
}

/*ハニーブラウン*/
#stocking_chart2024 div.frame3{
  border: 1px solid #cda886;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame3 p.color{
  background-color: #cda886;
  padding: 6%;
}

/*クリアヌード*/
#stocking_chart2024 div.frame4,
#stocking_chart2024 div.clear-nude{
  border: 1px solid #eed4b3;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame4 p.color,
#stocking_chart2024 div.clear-nude p.color{
  background-color: #eed4b3;
  padding: 6%;
}

/*サワーベージュ*/
#stocking_chart2024 div.frame5,
#stocking_chart2024 div.sour-beige{
  border: 1px solid #decaa7;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame5 p.color,
#stocking_chart2024 div.sour-beige p.color{
  background-color: #decaa7;
  padding: 6%;
}

/*バーリー*/
#stocking_chart2024 div.frame6{
  border: 1px solid #dbb48f;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame6 p.color{
  background-color: #dbb48f;
  padding: 6%;
}

/*シャドーグレー*/
#stocking_chart2024 li.frame7,
#stocking_chart2024 li.shadow-gray{
  border: 1px solid #a9a298;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  margin: 0 2% 0 2%;
  height: 450px;
}
#stocking_chart2024 li.frame7 p.color,
#stocking_chart2024 li.shadow-gray p.color{
  background-color: #a9a298;
  padding: 6%;
}

/*ブラック*/
#stocking_chart2024 li.frame8{
  border: 1px solid #000000;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin: 0 1% 0 2%;
  height: 450px;
}
#stocking_chart2024 li.frame8 p.color{
  background-color: #000000;
  padding: 6%;
}

/*コーラルベージュ*/
#stocking_chart2024 div.frame9,
#stocking_chart2024 div.coral-beige{
  border: 1px solid #fdebd5;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame9 p.color,
#stocking_chart2024 div.coral-beige p.color{
  background-color: #fce9d4;
  padding: 6%;
}

/*シアーベージュ*/
#stocking_chart2024 div.frame10{
  border: 1px solid #fbdfb2;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame10 p.color{
  background-color: #fbdfb2;
  padding: 6%;
}

/*ペールベージュ*/
#stocking_chart2024 div.frame11{
  border: 1px solid #ecd0ab;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame11 p.color{
  background-color: #ecd0ab;
  padding: 6%;
}

p.annotation {
    font-size: 13px;
    margin-top: 5%;
    text-align: left;
}

/*オークルベージュ*/
#stocking_chart2024 div.frame12{
  border: 1px solid #e9c594;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  height: 450px;
}
#stocking_chart2024 div.frame12 p.color{
  background-color: #e9c594;
  padding: 6%;
}

#stocking_chart2024 p.color0{
  padding: 3% 6%;
  margin: 0;
  font-size: 18px;
  height: 65px;
}

#stocking_chart2024 p.color1{
  padding: 3% 6%;
  margin: 0;
  color: #000000;
}

#stocking_chart2024 span.small_text{
  font-size: 15px;
  font-weight: normal;
  margin-top: 4%;
  display: inline-block;
}

#stocking_chart2024 .pickupItem .span4 p{
    margin:7% auto;
}

/*btn
-------------------*/
.buyBtn a{
    display: block;
    background-color: #ed1980;
    color: #fff;
    padding: 10% 3%;
    margin: 7% auto;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ed1980;
    border-radius: 20px;
    width: 85%;
    box-shadow: 2px 2px 4px gray;
    background-image: url("../images/arrow.png");
    background-repeat: no-repeat;
    background-position: 92% 50%;
}
#stocking_chart2024 .buyBtn a:hover {
  background-color: #fff;
  border: 1px solid #ed1980;
  color: #ed1980;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-image: url("../images/arrow2.png");
  background-repeat: no-repeat;
  background-position: 92% 50%;
}
p.column_2 a{
    display: block;
    background-color: #ed1980;
    color: #fff;
    padding: 5% 3%;
    margin: 5% auto;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ed1980;
    border-radius: 20px;
    width: 85%;
    box-shadow: 2px 2px 4px gray;
    background-image: url("../images/arrow.png");
    background-repeat: no-repeat;
    background-position: 92% 50%;
}

.buyBtn img.arrow {
  margin: 0 0 3% 5%;
}

.row-fluid .span3 {
    width: 16%;
}

.row-fluid .span4 {
    width: 28.914894%;
}
.row-fluid .span6 {
    width: 35.93617%;
}

p.brandbtn {
    font-size: 18px;
    text-align: left;
    margin: 4% 2% 15%;
    line-height: 1.5em;
}
.pickupItem .buyBtn a{
    margin:0 auto;
    width: 60%;
}
.buyBtn.all a{
    margin:0 auto;
    width: 70%;
    font-size: 18px;
    padding: 2%;
}
span.center {
    margin-right: 8%;
}

@media(max-width: 1200px){
  #stocking_chart2024 {
  width: 100%;
}
#stocking_chart2024 p.color0 {
  height: 80px;
}
#stocking_chart2024 .imgArea p{
font-size: 16px;
}
#stocking_chart2024 .imgArea p.color_name1{
top: 82%;
left: 17.2%;
}
#stocking_chart2024 .imgArea p.color_name2{
top: 86.5%;
left: 15.8%;
}
#stocking_chart2024 .imgArea p.color_name3{
top: 82%;
left: 34.5%;
}
#stocking_chart2024 .imgArea p.color_name4{
top: 90.5%;
left: 35%;
}
#stocking_chart2024 .imgArea p.color_name5{
top: 82%;
left: 52.8%;
}
#stocking_chart2024 .imgArea p.color_name6{
top: 90.5%;
left: 53.7%;
}
#stocking_chart2024 .imgArea p.color_name7{
top: 82%;
left: 72.6%;
}
}

@media(max-width: 979px){
#stocking_chart2024 {
  width: 100%;
  margin: 0 auto;
}
#stocking_chart2024 p.color0 {
  height: 95px;
}
#stocking_chart2024 li.span2 {
  height: 850px;
}
#stocking_chart2024 .imgArea p{
font-size: 12.5px;
}
#stocking_chart2024 .imgArea p.color_name1{
top: 81%;
left: 17.2%;
}
#stocking_chart2024 .imgArea p.color_name2{
top: 86.5%;
left: 15.5%;
}
#stocking_chart2024 .imgArea p.color_name3{
top: 81%;
left: 34.4%;
}
#stocking_chart2024 .imgArea p.color_name4{
top: 89.5%;
left: 34.4%;
}
#stocking_chart2024 .imgArea p.color_name5{
top: 81%;
left: 52.8%;
}
#stocking_chart2024 .imgArea p.color_name6{
top: 89.5%;
left: 53.6%;
}
#stocking_chart2024 .imgArea p.color_name7{
top: 81%;
left: 72.5%;
}
}


@media(max-width: 767px){
#stocking_chart2024 {
  width: 100%;
  margin: 0 auto;
}

#stocking_chart2024 p.color0 {
    height: 80px;
}
#stocking_chart2024 h2 , #stocking_chart2024 .main_catch {
    font-size: 16px;
    margin: 10% auto 6%;
}

/*  */
#new-chart {
  margin-bottom: 12%;
}

#new-chart .main_catch ,
#new-chart ._info {
  font-size: 16px;
  margin: 10% auto 6%;
}




/*  */

#stocking_chart2024 div.frame1 {
  font-size: 18px;
  height: 410px;
}
#stocking_chart2024 div.frame2 {
  font-size: 18px;
  height: 410px;
}
#stocking_chart2024 div.frame3 {
  font-size: 18px;
  height: 410px;
}
#stocking_chart2024 div.frame4 {
  font-size: 18px;
  height: 410px;
}
#stocking_chart2024 div.frame5 {
  font-size: 18px;
  height: 410px;
}
#stocking_chart2024 div.frame6 {
  font-size: 18px;
  height: 410px;
}
#stocking_chart2024 div.frame7 {
  border: 1px solid #d3d1df;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin: 0 2% 0 2%;
  height: 410px;
}
#stocking_chart2024 div.frame7 p.color{
  background-color: #d3d1df;
  padding: 6%;
}

#stocking_chart2024 div.frame8 {
  border: 1px solid #000000;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin: 0 2% 0 2%;
  height: 410px;
}
#stocking_chart2024 div.frame8 p.color{
  background-color: #000000;
  padding: 6%;
}
#stocking_chart2024 div.frame9 {
  height: 410px;
}
#stocking_chart2024 div.frame10 {
  height: 410px;
}
#stocking_chart2024 div.frame11 {
  height: 410px;
}
#stocking_chart2024 div.frame12 {
  height: 410px;
}


#stocking_chart2024 p.color0 {
  color: #000000;
  font-size: 15px;
}

#stocking_chart2024 .imgArea p{
font-size: 11px;
line-height: 1em;
}
#stocking_chart2024 .imgArea p.sp_color_name1{
top: 64%;
left: 7%;
}
#stocking_chart2024 .imgArea p.sp_color_name2{
top: 68%;
left: 4%;
}
#stocking_chart2024 .imgArea p.sp_color_name3{
top: 88%;
left: 20.5%;
}
#stocking_chart2024 .imgArea p.sp_color_name4{
top: 64%;
left: 54%;
}
#stocking_chart2024 .imgArea p.sp_color_name5{
top: 69.5%;
left: 56%;
}
#stocking_chart2024 .imgArea p.sp_color_name6{
top: 88%;
left: 70%;
}
#stocking_chart2024 .imgArea p.sp_color_name8{
top: 94%;
left: 67.5%;
}
#stocking_chart2024 .imgArea p.sp_color_name9{
top: 70%;
left: 2%;
}
#stocking_chart2024 .imgArea p.sp_color_name10{
top: 94%;
left: 20%;
}

ul.cfix.row-fluid.itemArea.liquid-column2 {
    margin: 12% auto 0;
    width: 95%;
}

#stocking_chart2024 li.span2:nth-child(6){
    margin-left: 1%;
}

#stocking_chart2024 li.span2{
    width: 40%;
    margin: 5% 0;
}

#stocking_chart2024 li.span4{
    margin: 5% 0;
}
p.brandbtn {
  font-size: 14px;
}
/*btn
-------------------*/
.buyBtn a {
    background-color: #ed1980;
    color: #fff;
    padding: 7% 3%;
    margin: 7% auto;
    text-align: center;
    font-size: 15px;
    border-radius: 20px;
    width: 80%;
}
#stocking_chart2024 .buyBtn a:hover {
  background-image: url("../images/arrow.png");
  background-repeat: no-repeat;
  background-position: 92% 50%;
}
.pickupItem .buyBtn a {
    width: 80%;
    font-size: 11px;
}
ul.btn2 {
  margin: 0;
}
.buyBtn.all a {
    margin: 0 auto;
    width: 90%;
    font-size: 11px;
    padding: 2%;
}
img[usemap] {
    max-width: 100%;
    height: auto;
}
}


.Coordination {
  width: 1200px;
  margin: 0 auto;
}

.Coordination h3 {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 28px;
  letter-spacing: .05em;
  color: #000000;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 30px;
}

.Coordination h3::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #000000;
  margin-right: 9px;
}

.Coordination h3 a {
  display: block;
  width: 100%;
}

.Coordination h3 .small {
  font-size: 20px;
  padding-left: 0.5em;
  font-weight: 400;
}

#page-body .Coordination p {
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  margin-bottom: 80px;
}

.Coordination ul {
  display: flex;
  margin-bottom: 50px;
}

.Coordination ul li {
  max-width: 390px;
  width: calc((100% / 3) - 7.5px);
}

.Coordination ul li:not(:first-of-type) {
  margin-left: 15px;
}

@media screen and (max-width:1200px) {
  .Coordination {
  width: 100%;
  margin: 0 auto;
  }

  #page-body .Coordination p {
    font-size: 15px;
    margin-bottom: 40px;
  }

  .Coordination h3 {
    align-items: flex-start;
    font-size: 18px;
    margin-bottom: 15px;
  }

  .Coordination h3 .small {
    display: block;
    margin-top: 10px;
    font-size: 11px;
  }

  .Coordination ul {
    margin-bottom: 25px;
  }

}

.check02_colorchart {
  margin-top:7%;
}

.check02_colorchart .check02_head {
  padding: 13px 0;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .1em;
  background: #f4f4f4;
}

@media screen and (max-width:820px) {
  .check02_colorchart .check02_head {
    font-size: 20px;
  }
}

@media screen and (max-width:640px) {
  .check02_colorchart .check02_head {
    font-size: 16px;
  }
}

.check02_colorchart ._colorList {
  padding: 5% 0 7%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}


@media screen and (max-width:768px) {
  .check02_colorchart ._colorList {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

@media screen and (max-width:768px) {
  .check02_colorchart ._colorList ._colorListItem {
    width: 49%;
  }
}

.check02_colorchart ._colorList ._colorListItem:not(:first-of-type) {
  margin-left: 14px;
}



@media screen and (max-width:768px) {
  .check02_colorchart ._colorList ._colorListItem:not(:first-of-type) {
    margin-left: 0;
  }

  .check02_colorchart ._colorList ._colorListItem:nth-of-type(even) {
    margin-left: 1%;
  }

}

._colorListItem ._color {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 80px;
  font-size: 16px;
  line-height: 1.375;
}

@media screen and (max-width:640px) {
  ._colorListItem ._color {
    width: 170px;
    height: 75px;
    font-size: 15px;
  }
}


._colorListItem .rose-wine {
  background: #e5dbd2;
}

._colorListItem .coral-beige {
  background: #fce9d4;
}

._colorListItem .nude-beige {
  background: #fce9d4;
}

._colorListItem .clear-nude {
  background: #eed4b3;
}

._colorListItem .sour-beige {
  background: #decaa7;
}

._colorListItem .shadow-gray {
  background: #a9a298;
}

._colorListItem .black {
  background: #000000;
  color: #fff;
}



.sec {
  margin-bottom: 15%;
}

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

  .sec {
    margin-bottom: 20%;
  }
}


.purchaselist_btn{
	position: relative;
	display: inline-block;
	border-radius: 10px;
	border: 1px solid #000;
	background-color: #000;
	color: #FFF;
	font-size: 18px;
	padding: 10px 0;
	max-width: 650px;
	width: 100%;
}
#page-body .Coordination .purchaselist_btn{
	font-size: 18px;
}
.purchaselist_btn::after{
	content: url(https://fukuskeonline.itembox.design/item/lp/stocking_colorchart/images/wearing_arrow.png);
  transform: scale(0.1);
  position: absolute;
	top: 50%;
	right: 15%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.purchaselist_btn:hover{
	background-color: #FFF;
	color: #000;
	
}
.purchaselist_btn:hover::after{
	content: url(https://fukuskeonline.itembox.design/item/lp/stocking_colorchart/images/wearing_arrow_2.png);
}

@media screen and (max-width:768px){
	.purchaselist_btn{
		width: 90%;
	}
	.purchaselist_btn::after{
		right: 5%;
	}
#page-body .Coordination .purchaselist_btn{
	font-size: 13px;
}
	
}