@charset "UTF-8";

/*----------------------------------
OEM・卸
---------------------------------- */
.title_jp {
	font-size: 22px;
	font-family: "a-otf-futo-min-a101-pr6n";
	margin: 65px auto 15px;
}

.main_area {
	width: 100%;
	background: #222;
	margin: 0 auto;
  padding: 0 0 30px 0;
	text-align: center;
  font-size: 15.5px;
  color: #ddd;
  line-height: 1.6;
}

.main_img {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  background: url(../oem/images/oem_handimg_1080.jpg) 0px 0px no-repeat;
  background-size: contain;
  display: flex;
  justify-content: flex-end;
}

.oem_title {
  width: 460px;
  margin-top: 150px;
  text-align: right;
}

.oem_title h1 {
  display: inline-block;
  font-size: 25px;
  color: #eee;
  font-family: "a-otf-futo-min-a101-pr6n";
  margin-bottom: 25px;
  border-bottom: 1px #eee dotted;
}

.oem_title div {
  text-align: justify;
}

.oem_center {
  margin: 50px auto;
}
.oem_center h2 {
  font-size: 23px;
  color: #eee;
  font-family: "a-otf-futo-min-a101-pr6n";
  margin-bottom: 15px;
}
.oem_center_txt {
  width: 90%;
  margin: 0 auto;
}

.oem_clients {
  display: flex;
  justify-content: center;
  margin: 5px auto 0;
}

.oem_clients ul:first-child {margin-right: 50px;}
.oem_clients li {text-align: left; font-size: 13px; line-height: 1.6; list-style-type:disc;}

.oem_btn {
  display:inline-block;
  border: 1px #ccc solid;
  margin: 30px auto 0;
}
.oem_btn a {display: block; padding: 9px 40px 12px 40px;}

.oem_btn a:link {color: #ccc; text-decoration: none;}
.oem_btn a:visited {color: #ccc; text-decoration: none;}
.oem_btn a:hover {background: #222; color: #E4007F; text-decoration: none;}
.oem_btn a:active {color: #ccc; text-decoration: none;}

.oem_btn i {font-size: 24px; margin: 4px 20px 0 0;}

.oem_base {
  width: 100%;
  max-width: 1080px;
  display: flex;
  justify-content: space-between;
  margin: 100px auto 20px;
}
.oem_base h2 {
  text-align: center;
  font-size: 23px;
  color: #eee;
  font-family: "a-otf-futo-min-a101-pr6n";
  margin-bottom: 15px;
}
.oem_base > div {text-align: justify; flex: 1;}
.oem_base > div:nth-child(1) {margin: 0 5% 0 0;}
.oem_base > div:nth-child(2) {margin: 0 0 0 5%;}


@media (max-width: 767px) {
  .oem_center_txt {text-align: left;}
  .oem_clients {display: inline-block;}
  .oem_clients ul:first-child {margin-right: 0;}
  
  .oem_base {width: 90%; margin: 25px auto; display: block;}
  .oem_base > div:nth-child(1) {margin: 0;}
  .oem_base > div:nth-child(2) {margin: 0;}
  .oem_base > div:nth-child(2) {margin-top: 40px;}
}

/*----------------------------------
OEM・卸　リンク
---------------------------------- */
.oem_contents_list {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 50px 0;
  font-size: 21px;
}

.oem_contents_list .list00 {
  display: flex;
  justify-content: center;
}

.oem_contents_list .list00 a {
  width: 500px;
  height: 180px;
  color: #FFF;
  padding: 80px 0 0 0;
  font-family: "a-otf-futo-min-a101-pr6n";
  box-sizing: border-box;
  background: url(../oem/images/btn_oem.jpg) top center no-repeat;
  background-size: cover;
}

.oem_contents_list .list01 {
  display: flex;
  justify-content: space-between;
  margin: 40px auto;
}

.oem_contents_list .list01 a {
  width: 500px;
  height: 180px;
  color: #FFF;
  padding: 80px 0 0 0;
  font-family: "a-otf-futo-min-a101-pr6n";
  box-sizing: border-box;
}
.oem_contents_list .list01 a:first-child {
  background: url(../oem/images/btn_ntr.jpg) top center no-repeat;
  background-size: cover;
}
.oem_contents_list .list01 a:nth-child(2) {
  background: url(../oem/images/btn_sf.jpg) top center no-repeat;
  background-size: cover;
}

.oem_contents_list .list02 {
  display: flex;
  justify-content: space-between;
  margin: 40px auto;
  height: 180px;
}
.oem_contents_list .list02 a {
  width: 100%;
  height: 180px;
  background-size: contain;
  color: #FFF;
  padding: 80px 0 0 0;
  font-family: "a-otf-futo-min-a101-pr6n";
  background-image: linear-gradient(90deg, rgba(85, 85, 85, 1), rgba(0, 0, 0, 1));
  box-sizing: border-box;
  border-right: 1px #ccc dotted;
}

.oem_contents_list .list02 a:nth-child(3) {padding: 65px 0 0 0; border-right: 0px;}
.oem_contents_list a:hover {text-decoration: none; opacity: 0.85;}

.oem_contents_list .list03 {
  display: flex;
  justify-content: center;
  margin: 40px auto;
  height: 180px;
}
.oem_contents_list .list03 a {
  width: 33.33%;
  height: 180px;
  background: url(../oem/images/btn_nail.jpg) top center no-repeat;
  background-size: cover;
  color: #FFF;
  padding: 80px 0 0 0;
  font-family: "a-otf-futo-min-a101-pr6n";
  box-sizing: border-box;
  border-right: 1px #ccc dotted;
}

.oem_contents_list .list04 {
  display: flex;
  justify-content: center;
  margin: 40px auto 0;
}
.oem_contents_list .list04 a {
  width: 75%;
  height: 100px;
  margin: 0 auto;
  color: #FFF;
  padding: 40px 0 0 0;
  font-family: "a-otf-futo-min-a101-pr6n";
  background-image: linear-gradient(90deg, rgba(85, 85, 85, 1), rgba(0, 0, 0, 1));
  box-sizing: border-box;
  border-right: 1px #ccc dotted;
}


@media (max-width: 767px) {
  .oem_contents_list {font-size: 19px;}
  .oem_contents_list .list01, .oem_contents_list .list03 {display: block; height: auto;}
  .oem_contents_list .list00 a, .oem_contents_list .list01 a,.oem_contents_list .list03 a {
    width: 100%;
    height: auto;
    display: block;
    padding: 50px 0;
  }
  .oem_contents_list .list01 a:nth-child(1) {border-bottom: 1px #ccc dotted;}
  .oem_contents_list .list02, .oem_contents_list .list04 {display: block; height: auto;}
  .oem_contents_list .list02 a, .oem_contents_list .list04 a {
    width: 100%;
    height: auto;
    display: block;
    padding: 20px 0;
    border-bottom: 1px #ccc dotted;
    border-right: 0;
  }
  .oem_contents_list .list02 a:nth-child(3) {padding: 15px 0; border-bottom: 0px;}
}

/*----------------------------------
OEM・卸 TOP　ロゴループ
---------------------------------- */
.loop {
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  overflow: hidden;
}
.loop_box {
  display: flex;
  align-items: center;
  animation: loop-list 50s linear infinite;
}
.loop_item img {padding: 0 20px;}

@keyframes loop-list {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*----------------------------------
OEM・卸 TOP　天然毛
---------------------------------- */
.oem h1 {
  display: inline-block;
  font-size: 25px;
  color: #eee;
  font-family: "a-otf-futo-min-a101-pr6n";
  margin: 90px auto 25px;
  border-bottom: 1px #eee dotted;
}

.title_copy {width: 90%; margin: 0 auto;}

.natural {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-direction: row-reverse;
  width: 90%;
  max-width: 1080px;
  margin: 100px auto;
}

/*--
.natural h2 {
  text-align: center;
  font-size: 20px;
  line-height: 1.3;
  color: #eee;
  letter-spacing: -0.05em;
  font-family: "a-otf-futo-min-a101-pr6n";
  margin-bottom: 10px;
}
.natural div {
  width: 29%;
  text-align: justify;
  margin-bottom: 50px;
}


@media (max-width: 767px) {
  .title_copy {text-align: justify;}
  .natural {width: 85%;}
  .natural div {width: 100%; margin-bottom: 50px;}
}
-- */

/*----------------------------------
OEM・卸 TOP　天然毛
---------------------------------- */
ul#natural_headline {
  width: 25%;
  margin: 10px 0px 0 0;
  padding: 0;
}
ul#natural_headline li{
  display: inline-block;
  position: relative;
  width: 100%;
  margin: 0 0 4px 0;
  padding: 10px 0;
  background-color: #666;
  text-align: center;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  color: #fff;
}

ul#natural_headline li.current{
  background-color: #fff;
  color: #E4007F;
}

ul#natural_story {
  width: 75%;
  margin: 0;
  padding: 40px 5%;
  box-sizing: border-box;
  border: 1px #fff solid;
  border-radius: 10px;
}

ul#natural_story li {
  display: none;
  vertical-align: top;
  padding: 0;
  z-index: 2;
}
ul#natural_story li.current{
  display: block;
}

ul#natural_story li h2 {
  text-align: left;
  font-size: 23px;
  line-height: 1.3;
  color: #eee;
  letter-spacing: -0.05em;
  font-family: "a-otf-futo-min-a101-pr6n";
  margin-bottom: 25px;
}
ul#natural_story li div {
  text-align: justify;
  width: 75%;
  float: right;
}

.oem_series {color: #eee; font-size: 13px; margin: 30px 0 5px 0; text-align: left;}
.series_photo {width: 100%; margin: 0 auto; text-align: center;}
.series_photo img {width: 100%; max-width: 330px; height: auto; border: 1px #999 solid;}
.oem_cap {font-size: 13px; line-height: 1.5; margin-top: 15px; text-align: justify;}


@media (min-width: 768px) {
ul#natural_headline li.current:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
}
}

@media (max-width: 767px) {
  .title_copy {text-align: justify;}
  .natural {width: 90%; display: block; margin: 70px auto;}
  ul#natural_headline, ul#natural_story {width: 100%;}
  ul#natural_headline {display: flex; justify-content: space-between;  flex-wrap: wrap;}
  ul#natural_headline li {flex-grow: 1; width:30%; margin: 0 2% 10px 0; border-radius: 5px; box-sizing: border-box; font-size: 13px;}
  ul#natural_headline li:nth-child(3), ul#natural_headline li:nth-child(6), ul#natural_headline li:nth-child(7) {margin: 0 0 10px 0;}
  
  ul#natural_story {margin: 20px 0; padding: 40px 7% 30px 7%;}
  ul#natural_story li h2 {font-size: 21px;}
  ul#natural_story li div {width: 100%; float: none;}
  
  ul#natural_headline li.current:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #fff;
}
}

@media (max-width: 640px) {
  ul#natural_headline li {flex-grow: 1; width:49%; margin: 0 2% 9px 0; border-radius: 5px; box-sizing: border-box; font-size: 13px;}
  ul#natural_headline li:nth-child(3) {margin: 0 2% 9px 0;}
  ul#natural_headline li:nth-child(2), ul#natural_headline li:nth-child(4), ul#natural_headline li:nth-child(6), ul#natural_headline li:nth-child(7) {margin: 0 0 10px 0;}
}

/*----------------------------------
OEM・卸　天然毛　画像ループ
---------------------------------- */
.loop01 {
  padding-top: 30px;
  display: flex;
  overflow: hidden;
}
.loop01_box {
  display: flex;
  align-items: center;
  animation: loop-list 50s linear infinite;
}
.loop01_item img {padding: 0;}

@keyframes loop-list {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*----------------------------------
OEM・卸 TOP　合成繊維
---------------------------------- */
.sf_center {
  width: 90%;
  max-width: 1080px;
  margin: 60px auto 30px;
}
.sf_center h2, .sf_txt h2 {
  font-size: 21px;
  color: #eee;
  font-family: "a-otf-futo-min-a101-pr6n";
  margin-bottom: 15px;
}

.sf_txt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  max-width: 1080px;
  margin: 60px auto 20px;
  padding: 40px 0 0 0;
  border-top: 1px #ccc dotted;
}

.sf_txt div {
  width: 45%;
  text-align: justify;
  margin-bottom: 50px;
}

.sf_center .oem_center_txt {text-align: justify; margin: 0 auto;}

.sf_flex {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

@media (max-width: 767px) {
  .sf_txt {width: 80%;}
  .sf_txt div {width: 100%; margin-bottom: 60px;}
  .sf_flex {display: block;}
  .sf_img {width: 100%; max-width: 430px;}
  .sf_img img {width: 100%; max-width: 430px; height: auto; margin: 10px auto 50px;}
  .sf_center .sf_center_txt {text-align: justify; margin: 0 auto;}
}

/*----------------------------------
OEM・卸　フルオーダー
---------------------------------- */
.title_copy2 {width: 90%; max-width: 800px; margin: 0 auto; text-align: justify;}
h3 {color: #fff; font-size: 16px; font-weight: bold; text-align: center; padding: 0 0 20px 0;}

.flow {
	width: 570px;
	border-radius: 10px;
	margin: 30px auto 20px;
	background: #DDD;
	padding: 40px 0 10px 0;
}
.flow_title {
  margin-bottom: 20px;
  font-size: 19px;
  color: #222;
  font-family: "a-otf-futo-min-a101-pr6n";
  letter-spacing: -0.02em;
}
.flow_box {position: relative; width: 90%; margin: 0 auto 15px; color: #333;}
.float_mark img {position: absolute; top: 50%; left: 0;transform: translateY(-50%) translateX(0%);}
.float_mark_non {text-align: left;}

.flow_txt {
	float: right;
	display: table;
	width: calc(100% - 60px);
	height: 118px;
	background: #fff;
	border-radius: 8px;
	box-sizing: border-box;
	padding: 0 18px 0 70px;
	text-align: left;
}
.flow_txt >* {display: table-cell; vertical-align: middle;}
.flow_box .line {position: absolute; bottom: -15px; left: 55px;}
.flow_txt_cap {font-size: 12px; line-height: 1.4; padding-top: 6px; color: #009;}

.semi_link {
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 30px auto 20px;
}
.semi_link img {width: 100%; max-width: 400px; height: auto;}
.gift_image {width: 100%; margin-bottom: 25px;}
.gift_image img {width: 100%; max-width: 800px; height: auto;}

@media (min-width:600px) and (max-width:980px) {
	.flow {width: 90%; max-width: 570px;}
	.flow_box {width: 95%;}
}

@media (max-width:599px) {
	.flow {width: 90%; max-width: 570px;}
	.flow_box {width: 95%; margin: 75px auto 15px;}
	.flow_box:last-child {width: 95%; margin: 0 auto 15px;}
	.float_mark img {position: absolute; top: -60px; left: 50%; transform: translateY(0%) translateX(-50%);}
	
	.flow_txt {
		float: none;
		display: table;
		width: 100%;
		height: 118px;
		padding: 67px 20px 20px 25px;
	}
	.flow_box .line {position: absolute; bottom: -15px; left: 50%; transform: translateY(0%) translateX(-50%);}
	.float_mark_non {text-align: center;}
}


.nail_img {margin: 10px auto 25px;}
.nail_img img {width: 100%; max-width: 800px; height: auto;}

/*----------------------------------
OEM・卸　ブランド
---------------------------------- */
.brand_img {width: 90%; max-width: 525px; margin: 0 auto; background: #fff;}
.brand_img img {width: 100%; max-width: 525px; height: auto;}

.brand h3 {font-weight: normal; text-align: center; padding: 50px 0 10px 0;}
.brand .oem_clients ul {margin-bottom: 50px;}
.brand .oem_clients li {text-align: left; font-size: 14px; line-height: 1.8; list-style-type:disc;}

/*----------------------------------
OEM・卸　商品リスト
---------------------------------- */
.detail01 h2, .detail02 h2 {
  margin: 30px auto 10px;
  font-size: 16px;
  color: #fff;
  font-family: "a-otf-futo-min-a101-pr6n";
}

/*--------- 01：シリーズから --------- */
.detail01 ul {width: 915px; margin: 0 auto 15px; display: flex; flex-wrap: wrap;}
.detail01 li {
	width: 177px;
	padding: 0 3px;
	text-align: left;
	font-size: 12px;
}
.detail01 li img {padding: 0 0 10px 0; width: 177px; height: 94px;}
.detail01 li:nth-child(5):after, .detail01 li:nth-child(10):after, .detail01 li:nth-child(15):after {
	clear: both;
	content:"";
	display: block;
	height: 25px;
	visibility: hidden;
}

@media (min-width:860px) and (max-width:1024px) {
	.detail01 ul {width: 724px;}
	.detail01 li {width: 23%; padding: 0 1%;}
	.detail01 li img {width: 100%; height: auto;}
}

@media (min-width:641px) and (max-width:859px) {
	.detail01 ul {width: 100%; max-width: 561px;}
	.detail01 li {width: 31.3%; padding: 0 1%;}
	.detail01 li img {width: 100%; height: auto;}
	
	.detail01 li:nth-child(3n):after {
		clear: both;
		content:"";
		display: block;
		height: 25px;
		visibility: hidden;
	}
}

@media (max-width:640px) {
	.detail01 ul {width: 100%; max-width: 374px;}
	.detail01 li {width: 48%; padding: 0 1%;}
	.detail01 li img {width: 100%; max-width: 177px; height: auto;}
	
	.detail01 li:nth-child(2n):after {
		clear: both;
		content:"";
		display: block;
		height: 25px;
		visibility: hidden;
	}
}

/*--------- 02：タイプから --------- */
.detail02 ul {width: 909px; margin: 0 auto; text-align: left;}
.detail02 li {float: left; padding: 0 3px 13px 3px;}
.detail02 p {
	text-align: left;
	font-size: 11px;
	line-height: 1.1;
	padding-top: 6px;
}

.detail02 .type_subtitle{
  display: block;
  width: calc(100% - 4px);
  background: #e9e8e0;
  color: #663;
  padding: 6px 0 6px 25px;
  box-sizing: border-box;
  font-size: 20px;
  margin: 5px auto 8px;
  font-family: futura-pt, sans-serif;
	font-weight: 500;
	font-feature-settings: normal;
}
.detail02 .type_subtitle span {font-size: 14px;}

@media (min-width:859px) and (max-width:1024px) {
	.detail02 ul {width: 707px;}
}
@media (min-width:768px) and (max-width:860px) {
	.detail02 ul {width: 606px;}
}
@media (min-width:550px) and (max-width:767px) {
	.detail02 ul {width: 505px;}
}
@media (min-width:450px) and (max-width:549px) {
	.detail02 ul {width: 404px;}
}
@media (max-width:449px) {
	.detail02 ul {width: 303px;}
}

/*--------- PDFカタログ --------- */
.pdf {
  width: 85%;
  max-width: 909px;
  margin: 40px auto 50px;
  background: #eee;
  padding: 35px 0 5px 0;
  border: 1px #999 solid;
  color: #333;
}
.pdf_title {text-align: center; font-weight: bold; margin-bottom: 15px;}
.pdf ul {width: 380px; margin: 0 auto;}
.pdf li {float: left; width: 180px; padding: 0 20px 13px 0; font-size: 11px; text-align: center;}
.pdf li:nth-child(2n) {padding: 0 0 13px 0;}
.pdf img {padding-bottom: 4px;}
.pdf_txt {font-size: 11px; margin-bottom: 15px;}

@media (max-width:599px) {
	.pdf ul {width: 180px;}
	.pdf li {padding: 0 0 13px 0;}
}