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

	works
	
========================================================================== */

#WORKS{
  margin-top : -80px;
  padding-top : 80px;
}
	

.cf:before, .cf:after {content:""; display:table; } .cf:after {clear:both; } .cf {zoom:1; }
.cover { background-size: cover; background-position: center; }
.works-inner { width: auto; max-width: 1400px; padding: 0 70px; margin: auto; position: relative; z-index: 10; }

.contents { position: relative; }
.contents.grey { background: #f1f1f1; }
.contents .works-inner { padding: 0 140px; }
.contents .text_box a.arr { position: absolute; right: 50px; top: 60px; }
.pdd95 { padding-top: 0px; padding-bottom: 10px}


/* prcpl
* ================== */
.prcpl .red_bg { height: 415px; position: absolute; bottom: 0; }
.prcpl { width: 100%; height: 100%; position: relative; padding-top: 5px; padding-bottom: 100px; cursor: pointer; cursor: hand; }
.prcpl ul li { width: 33%; /*min-width: 220px;*/ float: left; margin-left:0%; padding-left: 3%;  padding-bottom: 7%;}
.prcpl ul li:first-child { margin-left: 0; }
.prcpl ul li .prpcl_img { width: 100%; height: 100%; padding-bottom: 100%; position: relative; }
.prcpl p  {  margin-bottom: 0%; position: relative; }



.prpcl_img {
	overflow:hidden;
	position:relative;
}
.prpcl_img .cap {
	font-size:		130%;
	color:			#fff;
}
.prpcl_img .mask {
	width:			100%;	/* 画像をなしにする */
	height:			100%;
	position:		relative;
	top:			00px;
	left:			0;
	margin-left:		-100%;	/* 枠の左に置いて表示させない */
	background-color:	rgba(35,25,21,0.9);
	-webkit-transition:	all 0.1s ease;
	transition:		all 0.1s ease;
}
.prpcl_img:hover .mask {
	margin-left:		0px;	/* 右にずらして表示する */
}

/*
.prpcl_img img {
	-webkit-transition:	all 0.1s ease;
	transition:		all 0.1s ease;
}
.prpcl_img:hover img {
	margin-left:		100%;	 
}

画像を半分サイズ、右にずらす */

/* VIEW-IN
* ================== */
.plx-el { transition: all .3s ease-out; }
.plx-el.fadeUp { opacity: 0; -webkit-transform: translate(0, 40px); transform: translate(0, 40px); }
.plx.in .plx-el.fadeUp { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); margin-bottom: 10px;}
.plx-el.fadeUp-mini { transition: all .2s ease-out; opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); }
.plx.in .plx-el.fadeUp-mini { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); }

@media screen and (max-width:1200px) and (min-width:780px) {

	/* small PC */
	.contents .inner { padding: 0 90px; }
	.img_box .space { padding-left: 90px; }
	.next .img_box .space { margin-left: 90px; }
	.ttl { width: 90px; }
	.ttl span.bar { left: 45px; }
	.ttl span.text { left: -205px; }
	.product_detail .right { right: 0; top: 0; margin-left: 450px; }
	.product_detail .left { left: 0; top: 0; margin-right: 450px; }
	.product_detail .right.text_box { padding-right: 0; width: 430px; }
	.product_detail .left.text_box { padding-left: 0; width: 430px; }
	.contact ul.contact_list li { width: 47.5%; }
	.contact ul.contact_list li:nth-child(2n) { padding-right: 0; }
	.contact ul.contact_list li:nth-child(3n) { padding-right: 5%; }
}



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

	/* tablet and smartphone */
	h2, h3 { width: 100%; font-size: 18px; line-height: 1.5; margin-bottom: 20px; letter-spacing: .05em; }
	p { font-size: 12px; line-height: 1.9; }
	.text_box p br, .prcpl ul li .prpcl_img p br { display: none; }
	.arr { display: block; }
	.arr svg { width: 31px; height: 31px; display: inline-block; vertical-align: middle; }
	.arr svg .c { opacity: 1; }
	.arr svg .ar { stroke-width: 3; }
	.arr .arr_in { width: 31px; height: 25px; margin: 0; display: inline-block; margin-right: 10px; vertical-align: middle; }

	/*common*/
	#wrapper { min-width: 100%; max-width: 100%; }
	.content, #navi, #footer { min-width: 100%; }
	.b { margin-bottom: 1em; }
	.pc { display: none; }
	.sp { display: block; }
	.sp_logo { display: block; }
	
	.sp_sns_facebook { display: block; }
	.sp_sns_twitter { display: block; }
	.sp_sns_instagram { display: block; }
	.sp_sns_youtube { display: block; }
	.sp_sns_cart { display: block; }
	
	.buttom_arrow { width: auto !important; height: 26px; }
	.buttom_arrow span { display: inline-block !important; margin-top: 0 !important; margin-left: 10px; vertical-align: middle; font-size: 13px; }
	.works-inner { padding: 0 20px; }
	.contents .works-inner { padding: 0 20px; }
	.contents .text_box a.arr { width: auto; position: static; right: 0; top: 0; margin-top: 20px; text-align: right; }
	.pdd95 { padding-top: 0px; }
	.pdd20 { padding-top: 20px; }
	
	#navi { position: fixed; padding: 0; right: -100%; left: auto; top: 35px; transition: .5s; }
	#navi.open { right: -30%; transition: .5s; }
	#navi .left, #navi .right { float: none; }
	#navi .left ul li, #navi .right ul li { float: none; margin-right: 0; }
	#navi .left ul li.now a:after { margin-left: 0; top: 50%; left: -20px; }
	#navi .left ul li:first-child { margin-bottom: 50px; padding-left: 0; }
	#navi .left ul li { padding-left: 20px; margin-bottom: 20px; }
	#navi .right ul li { margin: 0 0 20px 0 !important; padding-left: 20px; }
	#navi .right ul li a:after { display: none; }
	#navi .right ul li a.facebook, #navi .right ul li a.twitter, #navi .right ul li a.instagram{ width: 26px; height: 26px; border: 1px solid #cacac7; border-radius: 50%; box-sizing: border-box; font-size: 13px; }
  #navi .right ul li a.facebook.icon-facebook:before { margin: 0 8px; line-height: 25px; }
  #navi .right ul li a.twitter.icon-twitter:before, #navi .right ul li a.instagram.icon-instagram:before { margin: 0 6px; line-height: 25px; }
	#navi a { font-size: 22px; }
	#navi a.logo { background: url(../img/shinbilogo.png) no-repeat center center; background-size: 126px 43px; }
	#navi .navi_inner { padding: 0 20px; }
	.sp_logo { position: absolute; left: 20px; top: 35px; z-index: 100; }
	.sp_logo a { width: 75px; height: 25px; background: url(../img/shinbilogo.png) no-repeat center center; background-size: 75px 25px; }
	
	.sp_sns_facebook { position: absolute; right: 20px; top: 35px; z-index: 100; }
	.sp_sns_facebook a { width: 30px; height: 30px; background: url(../img/facebook.png) no-repeat center center; background-size: 30px 30px; }
	
	.sp_sns_twitter { position: absolute; right: 20px; top: 80px; z-index: 100; }
	.sp_sns_twitter a { width: 30px; height: 30px; background: url(../img/twitter.png) no-repeat center center; background-size: 30px 30px; }
	
	.sp_sns_instagram { position: absolute; right: 20px; top: 125px; z-index: 100; }
	.sp_sns_instagram a { width: 30px; height: 30px; background: url(../img/instagram.png) no-repeat center center; background-size: 30px 30px; }
	
	.sp_sns_youtube { position: absolute; right: 20px; top:170px; z-index: 100; }
	.sp_sns_youtube a { width: 30px; height: 30px; background: url(../img/youtube.png) no-repeat center center; background-size: 30px 30px; }
	
	.sp_sns_cart { position: absolute; right: 20px; top:215px; z-index: 100; }
	.sp_sns_cart a { width: 30px; height: 30px; background: url(../img/cart.png) no-repeat center center; background-size: 30px 30px; }
	
	.sp_navbtn { position: fixed; top: 0; right: 0; z-index: 9999; height: 80px; width: 80px; margin-left: auto; display: block; }
	.ham-holder { width: 60px; height: 60px; margin: 20px 20px 0 0; display: inline-block; }
	.ham { width: 50px; height: 50px; border: 1px solid #fff; position: absolute; right: 20px; top: 20px; z-index: 9999; border-radius: 50%; box-sizing: border-box; display: block; }
	.ham:after { content: ''; width: 50px; height: 50px; background: #fff; border-radius: 50%; display: block; position: absolute; left: -1px; top: -1px; -webkit-transform: scale(0, 0); transform: scale(0, 0); transition: .4s; opacity: 0; }
	.ham.open span { background: #eb0029; }
	.ham.open span.first { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 24px; transition: 0.3s cubic-bezier(0.56, 1, 0.86, 1.39); }
	.ham.open span.second { opacity: 0; transition: .2s; }
	.ham.open span.third { width: 19px; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 24px; transition: 0.3s cubic-bezier(0.56, 1, 0.86, 1.39); }
	.ham.open:after { -webkit-transform: scale(1, 1); transform: scale(1, 1); transition: .2s; opacity: 1; }
	.midnightHeader.red .ham { border: 1px solid #eb6ea5; }
	.midnightHeader.red .ham span { background: #eb6ea5; }
	.midnightHeader.white .ham { border: 1px solid #fff; }
	.midnightHeader.white .ham span { background: #fff; }
	.midnightHeader .ham.open span { background: #eb6ea5; }
	.ham span { width: 19px; height: 2px; background: #fff; display: block; position: absolute; top: 24px; left: 0; right: 0; margin: auto; z-index: 9999; transition: .2s; }
	.ham span.first { top: 19px; }
	.ham span.third { top: 29px; width: 14px; margin-left: 15px; }
	.mask { width: 100%; height: 100%; position: fixed; opacity: 0; background: rgba(255, 255, 255, .6); transition: .5s; z-index: 107; visibility: hidden; }
	.mask.open { top: 0; left: 0; opacity: 1; transition: .3s; visibility: visible; }
	.mask .red_bg { width: 70%; background: #eb6ea5; height: 100%; display: block; position: absolute; right: -70%; top: 0; z-index: 108; transition: .5s; }
	.mask.open .red_bg { right: 0; transition: .5s; }
	.ttl { width: auto; height: auto; position: relative; display: block; top: 0; padding-left: 20px; margin-bottom: 20px; }
	.ttl span.text { -webkit-transform: none; transform: none; position: relative; top: 0; left: 0; margin-left: 0; text-align: left; letter-spacing: .1em; }
	.ttl .crcl, .ttl .bar { display: none !important; }
	.text_box { width: 100%; padding: 0; margin-bottom: 40px; }
	.space { padding-left: 0 !important; }
	.img_box { height: 160px; padding: 20px 0 0; }
	.next.contents { padding-bottom: 40px; }
	.next .img_box .space { padding: 0 20px !important; margin: 0 20px; height: 100%; }
	.next .ttl { position: absolute; top: 200px; }
	.next .text_box { margin: 50px 0 0; }
	.next .text_box h2 { margin-bottom: 5px; }
	.next .text_box p br { display: block; }
	.next.contents .text_box a.arr { margin-top: 20px; }

	/*top*/
	#mainvisual { height: 420px !important; }
	.mainvisual { height: 300px !important; }
	#mainvisual .bottom_text { width: 70% !important; height: auto !important; background-size: 70% auto !important; margin-left: -35% !important; padding-top: 18%; background-position: center bottom !important; bottom: -2px !important; }
	.logo_animation { width: 100%; height: auto; }
	.top.product { height: 450px !important; overflow: hidden; }
	.top.product .inner { margin: 0; }
	.top.product .ttl { padding-top: 40px; }
	.top.product .text_box { text-align: center; }
	.top.product .text_box a.arr { display: inline-block; padding-top: 0; }
	.rules, .plx.in .rules .plx-el.line { height: 75px !important; }
	.rules.rule1, .rules.rule2, .rules.rule3 { position: relative; top: 50%; bottom: 0; left: 0; right: 0; margin: -80px auto 0; }
	.rules.rule3 .button_border { top: 5px; margin-top: -30px; }
	.rules .text { left: 50% !important; margin-left: -140px; }
	.rules .text, .rules .text p { text-align: center; }
	.rules.rule1 .text, .rules.rule2 .text, .rules.rule3 .text { top: auto; bottom: -85px !important; }
	.rules.rule1 .point, .rules.rule2 .point, .rules.rule3 .point { top: auto; bottom: 0; }
	.top.product ul li { width: 100%; height: 290px; position: relative; }
	.top.product .bx-controls { position: absolute; right: 20px; top: -33px; }
	.top.product .bx-pager-item { display: inline-block; margin-right: 5px; }
	.top.product .bx-pager-item a { text-indent: -9999px; background: #fff; width: 6px; height: 6px; border-radius: 50%; opacity: .5; }
	.top.product .bx-pager-item a.active { opacity: 1; }
	.top.product .bx-pager-item:last-child a { margin-right: 0; }
	#footer { padding-bottom: 40px; }
	#footer .logo { width: 80px; height: 27px; background-size: 80px 27px; }
	#footer p { font-size: 11px; }
  #footer .right{ padding: 5px 0; }
	#footer .right ul li { width: 31px; height: 31px; padding: 0; }
	#footer .right ul li:first-child{ display: none; }
  #footer .right ul li .sbtn_in{ width: 30px; height: 30px; }
  #footer .right ul li .sbtn_in p{ line-height: 29px; }

	/* VIDEO
	-------------------------------------------------- */
	.video-ol { z-index: 11; visibility: visible; opacity: 0; }
	.video-ol .video { position: relative; z-index: 4; -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }
	.video-ol .close-btn { right: 0; top: initial; bottom: 0; width: 60px; height: 60px; background-size: 20px; }
	.vid_play .video-ol { z-index: 100; visibility: visible; opacity: 1; }

	/* CONCEPT
	-------------------------------------------------- */
	#concept { width: auto; }

	/*.mainvisual{height: 210px !important; }*/
	.mainvisual .bottom_text { width: 80% !important; height: auto !important; background-size: 80% auto !important; margin-left: -40% !important; padding-top: 18%; background-position: center bottom !important; bottom: -2px !important; }
	.history.contents { padding-bottom: 48px; }
	.history .left, .history .right { width: auto; padding: 0 20px; display: block; }
	.history .left { margin-bottom: -30px; }
	.history .right { overflow: visible; margin-bottom: 0; }
	.history .left .point { padding: 30px 25px; margin-top: 65px; }
	.history .left .point .crcl { width: 52px; height: 52px; font-size: 14px; left: -10px; top: -30px; margin: 0; line-height: 52px; letter-spacing: 0; }
	.history .left .point ul li p { font-size: 13px; letter-spacing: .075em; }
	.swiper-container { max-width: 100%; }
	.swiper-slide { height: 330px; }

	/* Arrows */
	.swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 19px; height: 36px; margin-top: -22px; z-index: 10; cursor: pointer; }
	.swiper-button-prev { left: 0; background: url(../img/icon_slidearr_left.png) no-repeat center center; background-size: 19px 36px; }
	.swiper-button-next { right: 0; background: url(../img/icon_slidearr_right.png) no-repeat center center; background-size: 19px 36px; }
	.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; }
	.history .right ul.history_slide li .history_img { margin: auto; }
	.history .right ul.history_slide li { width: 100% !important; margin-right: 0 !important; }
	.yakitate .text_box p span .logo { width: 53px; height: 11px; }
	.prcpl { padding-bottom: 70px; padding-top: 5px;}
	.prcpl ul li .prpcl_img p { font-size: 13px; right: 0; left: 0; bottom: -35px; letter-spacing: .2em; }
	.prcpl ul li .prpcl_img p span { display: block; }
	.prcpl .red_bg { height: 90%; }
	.prcpl ul li { width: 50%; float:  left; margin-left: 0; margin-bottom: 0px; padding-left: 2%; padding-right: 2%; padding-bottom: 7%;}
	.prcpl ul li .prpcl_img { padding-bottom: 0; height: 200px; }
	
	
	.prcpl ul li.prcpl1 .prpcl_img { background-image: url(../img/so-works/works-001.jpg) !important; background-size: cover; }
	.prcpl ul li.prcpl2 .prpc2_img { background-image: url(../img/so-works/works-002.jpg) !important; background-size: cover; }
	.prcpl ul li.prcpl3 .prpcl_img { background-image: url(../img/so-works/works-003.jpg) !important; background-size: cover; }
	.prcpl ul li.prcpl4 .prpcl_img { background-image: url(../img/so-works/works-004.jpg) !important; background-size: cover; }
	.prcpl ul li.prcpl5 .prpcl_img { background-image: url(../img/so-works/works-005.jpg) !important; background-size: cover; }

	.prcpl .red_bg { height: 90%; }

	/* PRODUCT
	-------------------------------------------------- */
	.price .inner .text_box.product_ttl { background: none; }
	.price .inner .text_box.product_ttl h3 { font-size: 18px; text-align: left; }
	.price .inner .text_box.product_ttl p { font-size: 13px; text-align: left; margin-top: .5em; }
	.price .img_box, .price .img_box .space { height: auto; padding: 0; }
	.price .img_box .cover { background-size: 150% auto; }
	ul.list { width: 100%; padding-top: 40px; }
	ul.list li { width: auto !important; display: block; margin: 0; }
	ul.list li p.b { font-size: 13px; }
	ul.list li.material { margin-bottom: 40px; }
	.price .text_box { padding-bottom: 40px; margin-bottom: 0; }
	.product_detail { margin: 30px auto; }
	.product_detail .left { margin-right: 0; float: none; }
	.product_detail .img_box, .product_detail .img_box .img { height: 270px; padding: 0; }
	.product_detail .right { margin-left: 0; float: none; }
	.product_detail .text_box { width: auto; position: relative; padding: 0; margin-top: 20px; margin-bottom: 0; }
	.product_detail h3 { font-size: 24px; margin-bottom: 5px; }
	.product_detail h4 { font-size: 14px; margin-bottom: 20px; }
	.product_detail h4 br { display: none; }

	/* SHOPS
	-------------------------------------------------- */
	.pagelink { padding-bottom: 0 !important; }
	.shop_box .text_wrapper, .shop_box .img_wrapper, .shop_box .button_openmap_wrapper { width: 100%; }
	.shop_box .text_wrapper { height: 270px; }
	.shop_box .text_box { padding: 40px 20px; }
	.shop_box .img_wrapper { height: 200px; }
	.shop_box { margin-bottom: 40px; }
	.link_wrapper { width: 100%; height: 60px; float: left; position: relative; z-index: 3; }
	.map_link { background: #f1f1f1; text-align: center; }
	.map_link a { color: #e4002b; letter-spacing: .1em; font-size: 14px; line-height: 60px; background: url(../img/icon_link.png) no-repeat left center; background-size: 16px 17px; display: inline-block; padding-left: 25px; }

	/* RECRUIT
	-------------------------------------------------- */
	.recruit_table .left, .recruit_table .right { width: 100%; float: none; }
  .recruit_table .right { padding-left: 0; }
	.recruit_table { margin-top: 40px; }
	.recruit_table ul li .arr { text-align: left; }
	.recruit_table ul li .copy { padding: 20px; }
	.recruit_table ul li p.recruit_text br, .recruit_table ul li .copy p br { display: block; }
	.recruit_table ul li p.recruit_ttl { font-size: 16px; }
	.recruit_table .recruit_mail { padding: 0; }
	.contents .recruit_table ul li .arr { padding: 20px; text-align: center; }
	.requirements .text_box { margin-bottom: 0; }

	/* CONNECT
	-------------------------------------------------- */
	.company #map.img_box { height: 180px; }
	.company ul.list li { margin-bottom: 20px; }
	.company .text_box { padding-bottom: 40px; margin-bottom: 0; }
	.contact { padding-bottom: 20px; }
	.contact ul.contact_list li { width: 100%; height: auto; float: none; margin-bottom: 20px; padding-right: 0; }
	.contact ul.contact_list li .table { height: auto; }
	.contact ul.contact_list li .table_inner { padding: 40px 20px; }
}
@media screen and (max-width:640px) {
	
	#WORKS{
	  margin-top : -60px;
	  padding-top : 60px;
	}

	/* smartphone */
	#mainvisual .bottom_text { width: 90% !important; height: auto !important; background-size: 90% auto !important; margin-left: -45% !important; }
	.mainvisual .bottom_text { width: 90% !important; height: auto !important; background-size: 90% auto !important; margin-left: -45% !important; }
  .shop_box .img_wrapper { height: 110px; }
}



/* woks - p
* ================== */

.woks-title h2{
	margin: 50px 0 10px 0 ;
	font-size: 35px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: bolder;
	}
	
.woks-title p{
	margin: 5px 0 00px 0 ;
	font-size: 16px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: bolder;
	}

.year{
	font-size: 13px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: bolder;
	
		
	}
	
@media screen and (max-width:780px) {
	
	.woks-title h2{
	margin: 50px 0 10px 0 ;
	font-size: 25px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: bolder;
	}
	
.woks-title p{
	margin: 5px 0 00px 0 ;
	font-size: 12px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: bolder;
	}

.year{
	font-size: 13px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: bolder;
	}
	
	}