/*
Theme Name: plast
*/

@charset "UTF-8";

/* ――――――――――――――――――――――
 site
―――――――――――――――――――――― */
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
background:transparent;
-webkit-text-size-adjust:none;
}
textarea {font-family:inherit;font-size:inherit;}
article, aside, dialog, figure, footer, header,hgroup, nav, section {display:block;}
li{list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
ins {text-decoration:none;}
mark {font-style:italic;font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
header, section, footer, aside, nav, main, article, figure {display: block;}

/* formパーツリセット */
button[type="submit"]{
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-family:inherit;
vertical-align:baseline;
cursor:pointer;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="date"]{
border:1px solid #ddd;
vertical-align:baseline;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
select{
border:1px solid #ddd;
font-family:inherit;
vertical-align:baseline;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* プレイスホルダー */
/*Webkit*/
::-webkit-input-placeholder{
color:#888;
}
/*Firefox 19以降*/
::-moz-placeholder {
color:#888;
opacity:1;
}
/*IE10以降*/
/* http://msdn.microsoft.com/en-us/library/ie/hh772745(v=vs.85).aspx */
:-ms-input-placeholder {
color: #888;
}

/* tableで線が表示されないfirefoxハック */
html:not([lang*=""]) table{border-collapse:separate;}

/* ――――――――――――――――――――――
 罫線
―――――――――――――――――――――― */
hr {
color:#EBE4D6;
background-color:#EBE4D6;
border-width:1px 0px 0px 0px;
border-style: solid;
border-color:#EBE4D6;
height:1px;
}

/* ――――――――――――――――――――――
 文字
―――――――――――――――――――――― */
.kc {color:#d8315c;}
.kc2 {color:#f53d75;}
.kc3 {color:#ffe400;}
.caution {color:#fc3737;}
.date {font-size:11px;color:#555;font-weight:normal;}
.time {color:#8b8b8b;}
.no-data{color:#bbb;}/* データがない時 */
.sat{color:#006dc9!important;}/*土曜 */
.sun{color:#ff3f6c!important;}/* 日曜 */

/* ――――――――――――――――――――――
 リンク
―――――――――――――――――――――― */
a{outline:none;}
a:link     {color:#047eb7; text-decoration:none; }
a:visited  {color:#047eb7; text-decoration:none; }
a:hover    { color:#058dcd; text-decoration: underline;}
a:active   {color:#047eb7; text-decoration:none; }
/* リンク領域の広いリンク */
.box-link {
opacity:1;
display:block;height:100%;
color:#3c3c3c!important;text-decoration:none!important;
-moz-transition:.2s ease-in-out;
-webkit-transition:.2s ease-in-out;
}
.box-link:hover {
opacity: .8;
background-color:#eeead7;
}
/* もっと見る */
.more{text-align:right;background-color:#f9f9f9;border:1px dotted #eee;border-width:1px 0;}
.more a{
display:block;width:100%;height:100%;padding:10px;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.btn-more{
width:300px;
height:40px;
margin:15px auto;
display:block;
border:2px solid #047eb7;
text-align:center;
line-height:2.6;
font-size:15px;
}
.btn-more:hover{
-webkit-transition:.3s ease-in-out;
transition:.3s ease-in-out;
background-color:#047eb7;
text-decoration:none;
color:#fff;
}

/*===============================================
	▼サイト用　ここから
===============================================*/
html{
font-size:10px;
}
body{
font:1.6rem/1.8 'Noto Sans JP', sans-serif;
height:auto;
width:100%;
position:relative;
text-align:left;
}

/* ――――――――――――――――――――――
 ヘッダーまわり
―――――――――――――――――――――― */
.site-header{
width:100%;height:100%;
/*position:absolute;
top:0;*/
background-color:#fff;
}
.header-inner{
width:100%;
}
.header-logo{
margin:0 auto;
text-align:center;
width:30%;
transition:.2s ease-in-out;
-moz-transition:.2s ease-in-out;
}
.header-logo img{
	width:30%;
}

/* ――――――――――――――――――――――
 グローバルナビゲーション
―――――――――――――――――――――― */
.fixed-header{
position:fixed;
top:0;left:0;
z-index:10000;
}

.nav{
background-color: #FD9267;
width:100%;
}
.nav ul{
margin:0 auto;
width:100%;
}
.header-nav{
display: flex;
justify-content:space-between;
}
.nav-contact{
width:28%!important;
}
.nav ul li{
    width:25%;
}
.nav ul li a{
background-color:#FD9267;
color:#fff;
display:block;
font-size:1.7rem;
font-weight:bold;
padding:10px 0;
text-align:center;
transition:.2s ease-in-out;
-moz-transition:.2s ease-in-out;
}
.sub-ttl{
color:#fff;
font-size:1.2rem;
font-weight:300;
display:block;
}
.nav ul li a:hover{
/*background-color:#e84091;*/
background-color:#fff;
color:#FD9267;
text-decoration:none;
}
.sub-ttl:hover{
    color:#FD9267;
}
.nav ul li a img{display:none;}

/* ――――――――――――――――――――――
	FV
―――――――――――――――――――――― */
.fv-sp{
	display: none;
}

/* ――――――――――――――――――――――
 スクロールしてフェードインするコンテンツ
―――――――――――――――――――――― */
/* 画面外にいる状態 */
.fadein {
opacity:0.1;
transform:translate(0, 50px);
transition:all 500ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
opacity:1;
transform:translate(0, 0);
}

/* ――――――――――――――――――――――
 メインコンテンツ
―――――――――――――――――――――― */

main{
background-color:#fff;
width:100%;
}

.wrap-slick{
background-color:#111;
width:100%;
height:auto;
margin:0 auto 50px;
position:relative;
}
.wrap-slick:before{
content:"";
display:block;
padding-top:56%;
}
.wrap-slick .inner{
position:absolute;
top:0;left:0;
width:100%;
height:100%;
}

.slick div img{
width:100%;
}
.video-ptn{
background:url(./img/pattern.png) repeat;
position:absolute;
z-index:2;
width:100%;height:100%;
}
.wrap-slick video,
.wrap-slick .eyecatch-image{
width:100%;
position:absolute;
top:0;left:0;
}
.catchcopy{
position:absolute;
bottom:20%;left:10%;
width:45%;
z-index:10;
}



.content{
margin:0 auto;
padding-top:100px;/* ページ内リンク時の固定ヘッダー分 */
width:90%;
}
.ttl{
font:bold 3.2rem/1.5 'Roboto','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
margin-bottom:50px;
text-align:center;
   
}
.ttl-sub{
font-size:1.6rem;
font-weight:300;
display:block;
}
.ttl-content{
font:bold 2rem/1.5 'Roboto','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
width:100%;
}
.ttl-middle{
font:bold 2rem/1.5 'Roboto','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
margin:0 auto 25px;
text-align:center;
}
.ttl-middle:after{
border-bottom:2px solid #666;
content:"";
display:block;
margin:20px auto 0;
width:10%;
}
.anchor{
margin-top:-100px;
padding-top:100px;
     color:#FD9267;
}

/* 事業案内 */
.list-service{
    display:flex;
    justify-content: space-between;
}
.service__item{
box-sizing:border-box;
padding:0 .2%;
width:50%;
height:auto;
}
.service__item-header{
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
position:relative;
width:100%;
height:240px;
overflow:hidden;
}
.service-1{background-image:url(../img/service_01.jpg);}
.service-2{background-image:url(../img/service_02.jpg);}
.service-3{background-image:url(../img/service_03.jpg);}
.service-4{background-image:url(../img/service_04.jpg);}
.service__thumb{
display:block;
opacity:.6;
position:absolute;
top:0;left:0;
width:100%;
}
.service__item-header h3{
color:#fff;
position:absolute;
top:45%;
left:0;
text-align:center;
}
.service__item p{
padding:20px;
}
.service-button{
display: block;
padding:0 0 10px 50px;
MARGIN-LEFT:20px;
transition:1s;
position:relative;
}
.service-button:link{
}
.service-button:hover{
color:#000;
transition:1s;
text-decoration: none;
}
.service-button::after{
	content: '';
	position: absolute;
	top: 14px;
	bottom:0;
	left: 0;
	width: 40px;
	height: 1px;
	background-color: #000; 
}


/* 2つ目の要素に200msのdelayをかける */
.list-service .fadein:nth-of-type(2) {
-moz-transition-delay:200ms;
-webkit-transition-delay:200ms;
-o-transition-delay:200ms;
-ms-transition-delay:200ms;
}
/* 3つ目の要素に400msのdelayをかける */
.list-service .fadein:nth-of-type(3) {
-moz-transition-delay:400ms;
-webkit-transition-delay:400ms;
-o-transition-delay:400ms;
-ms-transition-delay:400ms;
}
/* 4つ目の要素に600msのdelayをかける */
.list-service .fadein:nth-of-type(4) {
-moz-transition-delay:600ms;
-webkit-transition-delay:600ms;
-o-transition-delay:600ms;
-ms-transition-delay:600ms;
}

/* 2つ目の要素に200msのdelayをかける */
.wrap-concept{
margin:30px auto;
width:100%;
text-align: center;
position:relative;
overflow:hidden;
}
.wrap-concept li{
display:inline-block;
}
.wrap-concept li img{
width:90%;
text-align:center;
}
/* 画面外にいる状態 */
.fadein-left {
opacity:0.1;
transform:translate(-200px, 0);
transition:all 500ms;
}
/* 画面内に入った状態 */
.scrollin-left {
opacity:1;
transform:translate(0,0);
}
/* 画面外にいる状態 */
.fadein-right {
opacity:0.1;
transform:translate(200px, 0);
transition:all 500ms;
}
/* 画面内に入った状態 */
.scrollin-right {
opacity:1;
transform:translate(0,0);
}
.concept__user{
width:16%;
-moz-transition-delay:200ms;
-webkit-transition-delay:200ms;
-o-transition-delay:200ms;
-ms-transition-delay:200ms;
}
.concept__plast{
width:45%;
margin:0 5%;
-moz-transition-delay:800ms;
-webkit-transition-delay:800ms;
-o-transition-delay:800ms;
-ms-transition-delay:800ms;
}
.concept__client{
width:16%;
-moz-transition-delay:500ms;
-webkit-transition-delay:500ms;
-o-transition-delay:500ms;
-ms-transition-delay:500ms;
}
.management-philosophy{
font:2rem/1.5 'Noto Sans JP', sans-serif;
text-align:center;
line-height: 3.5rem;
}




/* 会社概要 */
.wrap-company{
width:100%;
}
.company,
.message{
box-sizing:border-box;
padding:0px 50px;
}
.service{
padding:0;
}

/* テキストベースのコンテンツで横幅いっぱいにしないやつ */
.txt-inner{
width:60%;
margin:0 auto;
}

.tbl-profile{
width:100%;
border:0;
margin:0 auto;
}
.tbl-profile th,
.tbl-profile td{
padding:8px;
}
.tbl-profile th{
padding-right:1rem;
text-align:right;
vertical-align:top;
width:35%;
}
.tbl-profile td{
padding-left:3rem;
}

/* 採用情報 */
.recruit{
padding:0;
}
#page-recruit{
padding:100px 50px 0px 50px;
}

/* アクセス */
#page-access{
padding:50px 50px 0px 50px;
}
.wrap-map{
margin-bottom:30px;
width:100%;
height:400px;
}
#map-canvas{
width:100%;
height:100%;

}
.map{
margin-bottom:30px;
}
/* お問い合わせ */
.contact{
padding:0;
}
#page-contact{
margin-bottom:100px;
}


.btn--contact{
background-color:#07f;
border-radius:4px;
box-sizing:border-box;
color:#fff!important;
display:block;
margin:20px auto;
padding:15px;
cursor:pointer;
text-align:center;
width:50%;
-webkit-transition:.3s ease-in-out;
transition:.3s ease-in-out;
}
.btn--contact:hover{
background-color:#39f;
color:#fff;
text-decoration:none;
}

/* ――――――――――――――――――――――
 フッターまわり
―――――――――――――――――――――― */
.site-footer{
background-color: #FD9267;
box-sizing:border-box;
color:#fff;
margin-top:50px;
padding:15px 0;
text-align:center;
width:100%;
}
.footer-inner{

}

/* ページトップ */
.scroll-btn{
position:fixed;
bottom:82px;right:14px;
z-index:10000;
}
.scroll-btn a{
background-color:#ccc;
text-align:center;
display:block;
width:60px;
height:60px;
-webkit-transition:.2s ease-in-out;
transition:.2s ease-in-out;
}
.scroll-btn a:hover{
background-color:#111;
}
.scroll-btn a i{
font-size:60px;
line-height:.8;
color:#fff;
opacity:.8;
-webkit-transition:.2s ease-in-out;
transition:.2s ease-in-out;
}
.scroll-btn a:hover i{
color:#fff;
opacity:1;
}

.copyright{
font-size:10px;
}




/*===============================================
	▲サイト用　ここまで
===============================================*/

/*===============================================
	▼タブレット用　ここから
===============================================*/
@media screen and (max-width: 768px){


	.header-logo{width:100px;}

	.nav ul{
	width:100%;
	}
	.nav ul li a{
	background-color: #FD9267;
	color:#fff;
	display:block;
	font-size:1.5rem;
	}
	/* タップ端末にはhover効果を使わない */
	.nav ul li a:hover{
	background-color:#222;
	text-decoration:none;
	}

	/* ――――――――――――――――――――――
	 スクロールしてフェードインするコンテンツ
	 iOSの場合、スクロールが終わったタイミングでスクロール位置を取得してしまい、
	 使いづらくなるのでPC以外は無効にする
	―――――――――――――――――――――― */
	/* 画面外にいる状態 */
	.fadein {
	opacity:1;
	transform:translate(0, 0);
	transition:all 500ms;
	}
	/* 画面内に入った状態 */
	.fadein.scrollin {
	opacity:1;
	transform:translate(0, 0);
	}

	.anchor{
	margin-top:-50px;
	}

	.wrap-slick{margin:0 auto 30px;}
	.slick-prev:before, .slick-next:before{font-size:50px;}
	.slick-prev{left:0;}
	.slick-next{right:0;}
	.slick-prev, .slick-next{
	width:50px;height:50px;
	}

	.content{
	padding:50px 0;
	width:96%;
	}

	/* 事業案内 */
	.service__item{
	width:50%;
	height:auto;
	}
	.service__item-header{
	height:200px;
	}

	/* 会社概要 */
	.company,
	.message{
	float:none;
	width:100%;
	padding:0 50px;
	}
	.message{
	border-left:0;
	}

	/* 採用情報 */
	#page-recruit{
	margin-bottom:50px;
	}

	/* お問い合わせ */
	#page-contact{
	margin-bottom:50px;
	}
	.wrap-map{
	height:300px;
	}

	/* フッターまわり */
	.site-footer{
	margin-top:0;
	}



}
/*===============================================
	▲タブレット用　ここまで
===============================================*/

/*===============================================
	▼SP用　ここから
===============================================*/
@media screen and (max-width: 640px){

	.pc-show{
		display:none;
	}
	.slick{
		display: none;
	}
	.header-logo{
		padding:0;
		width:100%;
	}
	.header-logo img{
		width:25%;
	}

	/* ――――――――――――――――――――――
	 グローバルナビゲーション
	―――――――――――――――――――――― */
	.nav li{
	float:left;
	width:20%!important;
	}
	.nav-contact{
	width:20%!important;
	}
	.nav li a img{
	display:block!important;
	width:100%;
	height:auto;
	}
	.nav li a{
	display:block;
	height:auto;
	padding:5px 0;
	}
	.nav li a img{
	width:100%;
	vertical-align:middle;
	}


	/* ――――――――――――――――――――――
	 FV
	―――――――――――――――――――――― */
	.slick div img{
		display: none;
		}
	.slick-slider{
		margin:0;
	}
	.fv-sp{
		display: block;
		width:100%;
		height:auto;
	}
	/* ――――――――――――――――――――――
	 見出し
	―――――――――――――――――――――― */
	.ttl{
	font-size:2.6rem;
    color:#FD9267;
	}
	.ttl-sub{
	}
	.ttl-content{
	font-size:1.8rem;
	}
	.ttl-middle{
	font-size:1.8rem;
	}
	.ttl-middle:after{
	width:20%;
	}

	.anchor{
	margin-top:-100px;
	}

	.wrap-slick{margin:0 auto 100px;}

	.list-service{
		display: block;
	}

	.service__item{
	border:none;
	width:100%;
	margin-bottom: 50px;
	}
	.service__item-header{
	height:200px;
	}

	.content{
	padding:20px 0;
	}

	.company,
	.message{
	padding:20px 20px 20px;
	}

	/* テキストベースのコンテンツで横幅いっぱいにしないやつ */
	.txt-inner{
	width:90%;
	margin:0 auto;
	}

	.concept__user{
	width:20%;
	}
	.concept__plast{
	width:45%;
	margin:0 5%;
	}
	.concept__client{
	width:20%;
	}

	.management-philosophy{
	font-size:1.6rem;
	}


	/* 採用情報 */


	/* アクセス */
	.wrap-map{
	height:300px;
	}
    .map{
        margin-bottom: 30px;
    }
    
	/* ページトップ */
	.scroll-btn{
	right:10px;
	}
	.scroll-btn a{
	width:40px;
	height:40px;
	}
	.scroll-btn a i{
	font-size:40px;
	line-height:.8;
	}



}
/*===============================================
	▲SP用　ここまで
===============================================*/