@charset "utf-8";

@media print, screen and (max-width: 767px) {/*ウィンドウ幅が最大767pxまでの場合に適用*/
	.pc_content{
display:none;
	}
	.sp_content{
display:block;
	}

body{
	background-color:#fff;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height:2.0em;
	color:#555;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
a img{
	-webkit-transition: .8s;
	-moz-transition: .8s;
	-o-transition: .8s;
	-ms-transition: .8s;
	transition: .8s;
}
a img:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
}
.bold{
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
}
.underline{
	text-decoration:underline;
}
.large{
	font-size:1.3em;
}
.w1050{
	max-width:1050px;
	width:100%;
	margin:0 auto;
	text-align:center;
}
#main_wrapper{
	position:relative;
	background-color:#fff;
	margin: 0 auto;
	width:100%;
	height:100vh;
	/*min-width:1050px;*/
}

/*メインスライダー*/
.slick01 img {width: 100%;}
.slick01 li {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
}
.slick01 li.img01_sp {
  background-image: url(https://graphic-paradise.com//img/main001sp.jpg);
}
.slick01 li.img01t_sp {
  background-image: url(https://graphic-paradise.com//img/main001sp_txt.jpg);
}
.slick01 li.img02_sp {
  background-image: url(https://graphic-paradise.com//img/main002sp.jpg);
}
.slick01 li.img02t_sp {
  background-image: url(https://graphic-paradise.com//img/main002sp_txt.jpg);
}
.slick01 li.img03_sp {
  background-image: url(https://graphic-paradise.com//img/main003sp.jpg);
}
.slick01 li.img03t_sp {
  background-image: url(https://graphic-paradise.com//img/main003sp_txt.jpg);
}
.slick01 li.img04_sp {
  background-image: url(https://graphic-paradise.com//img/main004sp.jpg);
}
.slick01 li.img04t_sp {
  background-image: url(https://graphic-paradise.com//img/main004sp_txt.jpg);
}
.slick01 li.img05_sp {
  background-image: url(https://graphic-paradise.com//img/main005sp.jpg);
}
.slick01 li.img05t_sp {
  background-image: url(https://graphic-paradise.com//img/main005sp_txt.jpg);
}
.slick01 li.img06_sp {
  background-image: url(https://graphic-paradise.com//img/main006sp_txt.jpg);
}


#totop{
	position:fixed;
	bottom:5%;
	right:3%;
}
#footer{
	float:left;
	width:100%;
	margin:8% 0 0 0;
	text-align:center;
	padding:4% 0
}
#footer_txt{
	text-align:left;
	color:#fff;
	font-size:0.76em;
}

/*ハンバーガーメニュー*/
nav.NavMenu{
	position: fixed;	/*表示位置を固定*/
	z-index: 2;/*重ね順を変更*/
	top: 0;/*表示位置を指定*/
	right: 0;	/*表示位置を指定*/
	background: #fff;/*背景を白にする*/
	color: #000;	/*文字色を黒にする*/
	text-align: left;/*テキストを中央揃え*/
	width: 100%;	/*全幅表示*/
	padding:0 2%;
	height:100vh;
	transform: translateX(100%);	/*ナビを右に隠す*/
	transition: all 0.6s;	/*アニメーションの時間を指定*/
	box-shadow: none;
}
nav.NavMenu ul{
	background: #fff;
	width: 80%;	
	margin: 0 10%;
	padding: 40px 0 0;
}

nav.NavMenu ul li{
	font-size: 1.0em;
	list-style-type: none;
	padding: 0;
	width: 100%;
}

nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none;	/*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a{
	display: block;/*クリックできる領域を広げる*/
	color: #000;
	padding: 1.0em 0;
	text-decoration:none;
}

nav.NavMenu ul li ul{
	background: #fff;
	width: 100%;	
	margin: 0 auto;
	padding: 0;
}
nav.NavMenu ul li ul li{
	font-size: 1.0em;
	list-style-type: none;
	padding: 0;
	width: 100%;
}
nav.NavMenu ul li ul li img{
	width: 80%;
}
nav.NavMenu ul li ul li a{
	display: block;/*クリックできる領域を広げる*/
	padding: 0;
	text-decoration:none;
}

nav.NavMenu.active{
	transform: translateY(0%);/*ナビを表示する*/
}

.Toggle {
	display: block;
	position: fixed;	/* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 12px;
	width: 42px;
	height: 42px;
	cursor: pointer;
	z-index: 3;
}
 
.Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #000;
	-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
	-moz-transition: .35s ease-in-out;/*変化の速度を指定*/
	transition: .35s ease-in-out;	/*変化の速度を指定*/
	left: 6px;
}
 
.Toggle span:nth-child(1) {
	top: 9px;
}
 
.Toggle span:nth-child(2) {
	top: 18px;
}
 
.Toggle span:nth-child(3) {
	top: 27px;
}
 
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-color:#000;
}
 
/* 2番目透過 */
.Toggle.active span:nth-child(2) {
	opacity:0;
	border-color:#0C743F;
}
/* 3番目のspanを45度に */
.Toggle.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	border-color:#000;
}

/*WORKS*/
header{
	position:relative;
	padding:10px 0 5%;
	width:100%;
}
#logo{
	float:left;
	width:30%;
	clear:both;
}
#lower_midashi{
	width:100%;
	max-width:none;
	text-align:center;
	border-bottom:1px solid #552E0F;
	padding-bottom:3%;
	padding-top:3%;
	margin:1% auto 2%;
}
#lower_midashi img{
	width:90%;
}
#lower_wrapper{
	width:100%;
	max-width:none;
	margin:0 auto;
	padding:0 5%;
}
#content_work{
	float:left;
	width:100%;
	margin:4% 0 3%;
}
#content_work img{
	width:90%;
}
#footer{
	width:100%;
	max-width:none;
	text-align:center;
	border-top:1px solid #552E0F;
	margin:2% auto 0;
}
#copyright{
	font-size:80%;
	margin-top:3%;
}

#sub_navi{
	overflow:hidden;
	width:100%;
	text-align:center;
	margin-bottom:2.0%;
}

#snavi01{
	float:left;
	width: 95px;
	height: 31px;
}
#snavi01 a{
	width: 95px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi01.png) no-repeat top left;
} 
#snavi01 a.active,
#snavi01 a:focus,
#snavi01 a:hover{
	width: 95px;
	height: 31px;
	background:url(../img/product/snavi01.png) no-repeat bottom left;
} 

#snavi02{
	float:left;
	width: 190px;
	height: 31px;
}
#snavi02 a{
	width: 190px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi02.png) no-repeat top left;
}
#snavi02 a.active,
#snavi02 a:focus,
#snavi02 a:hover{
	width: 190px;
	height: 31px;
	background:url(../img/product/snavi02.png) no-repeat bottom left;
}

#snavi03{
	float:left;
	width: 183px;
	height: 31px;
}
#snavi03 a{
	width: 183px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi03.png) no-repeat top left;
} 
#snavi03 a.active,
#snavi03 a:focus,
#snavi03 a:hover{
	width: 183px;
	height: 31px;
	background:url(../img/product/snavi03.png) no-repeat bottom left;
}

#snavi04{
	float:left;
	width: 65px;
	height: 31px;
}
#snavi04 a{
	width: 65px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi04.png) no-repeat top left;
} 
#snavi04 a.active,
#snavi04 a:focus,
#snavi04 a:hover{
	width: 65px;
	height: 31px;
	background:url(../img/product/snavi04.png) no-repeat bottom left;
}

#snavi05{
	float:left;
	width: 73px;
	height: 31px;
}
#snavi05 a{
	width: 73px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi05.png) no-repeat top left;
} 
#snavi05 a.active,
#snavi05 a:focus,
#snavi05 a:hover{
	width: 73px;
	height: 31px;
	background:url(../img/product/snavi05.png) no-repeat bottom left;
}

#snavi06{
	float:left;
	width: 94px;
	height: 31px;
}
#snavi06 a{
	width: 94px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi06.png) no-repeat top left;
} 
#snavi06 a.active,
#snavi06 a:focus,
#snavi06 a:hover{
	width: 94px;
	height: 31px;
	background:url(../img/product/snavi06.png) no-repeat bottom left;
}

#snavi07{
	float:left;
	width: 115px;
	height: 31px;
}
#snavi07 a{
	width: 115px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi07.png) no-repeat top left;
} 
#snavi07 a.active,
#snavi07 a:focus,
#snavi07 a:hover{
	width: 115px;
	height: 31px;
	background:url(../img/product/snavi07.png) no-repeat bottom left;
}

#snavi08{
	float:left;
	width: 257px;
	height: 31px;
}
#snavi08 a{
	width: 257px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi08.png) no-repeat top left;
} 
#snavi08 a.active,
#snavi08 a:focus,
#snavi08 a:hover{
	width: 257px;
	height: 31px;
	background:url(../img/product/snavi08.png) no-repeat bottom left;
}

#snavi09{
	float:left;
	width: 92px;
	height: 31px;
}
#snavi09 a{
	width: 92px;
	height: 31px;
	display: block;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0px;
	background:url(../img/product/snavi09.png) no-repeat top left;
} 
#snavi09 a.active,
#snavi09 a:focus,
#snavi09 a:hover{
	width: 92px;
	height: 31px;
	background:url(../img/product/snavi09.png) no-repeat bottom left;
}

#product_box{
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap:wrap;
	-webkit-justify-content: space-between; /* Safari */
	justify-content:
	space-between;
	margin:5% 0 6%;
	line-height:1.5em;
}
#product_box li{
	list-style:none;
	text-align:center;
	margin-bottom:7%;
	width:50%;
	font-size:80%;
}
#product_box li img{
	width:86%;
	height:auto;
}
#product_box::after{
	content:"";
	display: block;
	width:50%;
	height: 0;
}
#product_box::before {
	content: "";
	display: block;
	width:50%; /* .boxに指定したwidthと同じ幅を指定する */
	height: 0;
	order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}
.sakamoto_komidashi01{
	width:100%;
	text-align:center;
	margin-top:10%;
}
.sakamoto_komidashi02{
	width:100%;
	text-align:center;
}
.sakamoto_komidashi03{
	width:100%;
	text-align:center;
}
#company_content{
	width:100%;
	margin:7% 0;
}
#company_content th{
	display:block;
	vertical-align:top;
	text-align:left;
	padding-right:5%;
	width:100%;
}
#company_content td{
	display:block;
	vertical-align:top;
	text-align:left;
	font-size:90%;
	margin-bottom:2.5%;
}

.contact_table{
	display:block;
	border-top:none;
	border-left:none;
	width:100%;
}

.contact_table td{
	display:block;
	border-bottom:none;
	border-right:none;
	padding:5px 10px;
	width:100%;
}
.contact_table th{
	display:block;
	border-bottom:none;
	border-right:none;
	padding:5px 15px;
	width:100%;
}
.caption{
	font-size:12px;
}
.contact_table input{
	border:1px solid  #ccc;
	padding:0 15px;
	width:100%;
}
.contact_table select{
	border:1px solid  #ccc;
	padding:0 15px;
	width:50%;
}
.contact_table textarea{
	border:1px solid  #ccc;
	padding:0 15px;
	width:100%;
}
.submit_btn{
	background-color:#87BF23;
	width:100%;
	color:#fff;
	border-radius:8px;
	height:40px;
	line-height:40px;
	margin-bottom:10px;
}
.submit_btn:hover{
	opacity:0.7;
}
.reset_btn{
	background-color:#87BF23;
	width:100%;
	color:#fff;
	border-radius:8px;
	height:40px;
	line-height:40px;
}
.reset_btn:hover{
	opacity:0.7;
}
}