@charset "utf-8";
/* Webフォント */

.f-min{
font-family: dnp-shuei-mincho-pr6n, sans-serif;
font-weight: 400;
font-style: normal;
}

.f-en{
font-family: adobe-garamond-pro, serif;
font-weight: 400;
font-style: normal;
}

.f-txt{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}


html{
	/*overflow-x: hidden;*/
	font-size:62.5%;
}
body{
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	color: #202020;
	min-width:1174px;
	line-height: 1.8;
	font-size: 14px;
	letter-spacing:2px;
}
body {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@media screen and (min-width:641px) {
.pc{
	display: block;
}
.sp {
	display: none;
}
}

.touchevents * {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

a img:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.80;
    opacity:0.80;
}

a img{
	border:none;
	vertical-align:bottom;
}
a:link {
	color:#202020;
}
a:visited {
	color:#202020;
}
a:active {
	color:#202020;
}
a {
	color:#202020;
}
a:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.80;
    opacity:0.80;
}
@media screen and (max-width:640px) {
	a:hover {
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}
	}

body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,td,th,figure {
	margin:0;
	padding:0;
	font-weight: normal;
}
article,aside,figure,footer,header,main,nav,section {
	display:block;
}

@media screen and (max-width:640px) {
	html{
		overflow-x: hidden;
		width: 100%;
		font-size:3.2vw;
	}
	body{
		min-width: 100%;
		width: 100%;
		min-width: 100%;
		font-size: 1rem;
		line-height: 1.4;
		-webkit-text-size-adjust: none;
		overflow-x: hidden;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	img{
		max-width: 100%;
		height: auto;
	}
}

/* ----------------------------------------
 * fade-up
 * ---------------------------------------- */

.fade-up {
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}

/* ----------------------------------------
 * font
 * ---------------------------------------- */
 .color-y{color: #f4ba1d;}

.fs12{font-size: 1.2rem;}
.fs13{font-size: 1.3rem;}
.fs14{font-size: 1.4rem;}
.fs14{font-size: 1.4rem;}
.fs15{font-size: 1.5rem;}
.fs16{font-size: 1.6rem;}
.fs17{font-size: 1.7rem;}
.fs18{font-size: 1.8rem;}
.fs19{font-size: 1.9rem;}
.fs20{font-size: 2rem;}
.fs21{font-size: 2.1rem;}
.fs22{font-size: 2.2rem;}
.fs23{font-size: 2.3rem;}
.fs24{font-size: 2.4rem;}

.lh12{line-height: 1.2em;}
.lh13{line-height: 1.3em;}
.lh14{line-height: 1.4em;}
.lh14{line-height: 1.4em;}
.lh15{line-height: 1.5em;}
.lh16{line-height: 1.6em;}
.lh17{line-height: 1.7em;}
.lh18{line-height: 1.8em;}
.lh19{line-height: 1.9em;}
.lh20{line-height: 2em;}
.lh21{line-height: 2.1em;}
.lh22{line-height: 2.2em;}
.lh23{line-height: 2.3em;}
.lh24{line-height: 2.4em;}


/* ----------------------------------------
 * clearfix
 * ---------------------------------------- */

.cf:before,
.cf:after {
    content:"";
    display:block;
    overflow:hidden;}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/* ----------------------------------------
 * 汎用イメージフロート
 * ---------------------------------------- */

.imgfl{
	float:left;
	margin: 0px 30px 0px 0px;}
.imgfr{
	float:right;
	margin: 0px 0px 10px 30px;
}

/* ----------------------------------------
 *   汎用float
 * ---------------------------------------- */

.fl { float: left;}
.fr { float: right;}


/* ----------------------------------------
 *   汎用クリア
 * ---------------------------------------- */
.cb { clear: both;}


/* ----------------------------------------
 * btnスタイル
 * ---------------------------------------- */
a.more{
	position: relative;
	display: block;
	padding: 0 0 0 70px;
	vertical-align: middle;
	text-decoration: none;
	line-height: 18px;
}
a.more::before,
a.more::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
a.more::before{
width: 52px;
height: 52px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #eee;
}
a.more::after{
left: 22px;
box-sizing: border-box;
width: 5px;
height: 5px;
border: 5px solid transparent;
border-left: 8px solid #f4ba1d;
}


/* ----------------------------------------
 * header
 * ---------------------------------------- */


nav > ul > li{
/*	padding: 20px 15px;*/
	font-size: 16px;
	color: #fff;
	border-bottom: 1px solid #eee;
}
nav > ul > li:hover{
	background: #f4ba1d;
}
nav > ul > li a{
	padding: 15px;
	display: inline-block;
	width: 100%;
	height: 100%;
}
.pure-drawer > ul > li > ul:hover{
	background-color: #fff;
}
.pure-drawer > ul > li > ul li{
	font-size: 14px;
	line-height: 1.5;
}
.pure-drawer > ul > li > ul li a{
	padding: 5px 10px 10px 30px;
}
.pure-drawer > ul > li > ul li a::after {
    content: '';
    width: 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid #000;
    display: block;
	}
	@media screen and (min-width:641px) {
	.pure-drawer > ul > li > ul li a:hover::after {
    width: 70%;
    border-bottom: 1px solid #000;
	}
}

@media screen and (max-width:640px) {
 header .headerInner{
 	width: 96%;
 	padding-top: 15px;
 	margin: auto;
 }
 .pure-toggle-label[data-toggle-label='right']{
		right: 10px;
	}
	.pure-toggle-label{
		top: 10px;
	}

}

/*add20200820*/
.pure-drawer > ul > li:nth-of-type(1) a:before{
	content:"TOP";
}
.pure-drawer > ul > li:nth-of-type(2) > a:before{
	content:"SERVICE";
}
/* .pure-drawer > ul > li:nth-of-type(3) a:before{
	content:"PHOTO CREATIVE";
}
.pure-drawer > ul > li:nth-of-type(4) a:before{
	content:"WEB CREATIVE";
} */
.pure-drawer > ul > li:nth-of-type(3) a:before{
	content:"CONTACT";
}
.pure-drawer > ul > li:nth-of-type(4) a:before{
	content:"NEWS";
}
.pure-drawer > ul > li:nth-of-type(5) a:before{
	content:"4D BLOG";
}
.pure-drawer > ul > li:nth-of-type(6) a:before{
	content:"RECRUIT";
}
@media screen and (min-width: 641px){
	.pure-drawer > ul > li:nth-of-type(1):hover a:before{
		content:"トップページ";
	}
	.pure-drawer > ul > li:nth-of-type(2):hover > a:before{
		content:"サービス";
	}
	/* .pure-drawer > ul > li:nth-of-type(3):hover a:before{
		content:"広告写真撮影";
	}
	.pure-drawer > ul > li:nth-of-type(4):hover a:before{
		content:"Webサイト制作";
	} */
	.pure-drawer > ul > li:nth-of-type(3):hover a:before{
		content:"お問い合わせ";
	}
	.pure-drawer > ul > li:nth-of-type(4):hover a:before{
		content:"新着情報";
	}
	.pure-drawer > ul > li:nth-of-type(5):hover a:before{
		content:"4D ブログ";
	}
	.pure-drawer > ul > li:nth-of-type(6):hover a:before{
		content:"採用情報";
	}
}




/* ----------------------------------------
 * footer
 * ---------------------------------------- */
footer{
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
}
footer h2 p{
	letter-spacing: 4px;
	font-weight: bold;
	line-height:3;
}
footer h3{
	font-size: 24px;
	font-weight: bold;
	margin: 40px 0;
}
footer h3 span{
	display: block;
	font-size: 14px;

}
footer #gmap{
  width: 100%;
  height: 450px;
  margin-top: 50px;
}
footer .copy{
	background: #f4ba1d;
	padding: 45px 0;
}


@media screen and (max-width:640px) {
	footer{
	font-size: 1.1rem;
	}
	footer h2 img{
		height: 25px;
		width: auto;
	}
	footer h2 p{
		line-height:2;
	}
	footer h3{
		font-size: 1.4rem;
		margin: 20px 0;
	}
	footer h3 span{
		display: block;
		font-size: 1rem;
	}
	footer #gmap{
	  width: 100%;
	  height: 350px;
	}
	footer .copy{
		padding: 30px 0 70px;
	}

	.fixBtn{
		display: none;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 101;
	}

	.fixBtn li{
		float: left;
		width: 50%;
		background: #f4ba1d;
		border-right: 1px solid #fff;
		line-height: 50px;
		text-align: center;
	}
	.fixBtn li:last-child {
        border-right: none; }
	.fixBtn  li a{
		color: #fff;
		display: block;
	}
	.fixBtn li#infos_bnr {
    width: 100%;
    border-right: none;
}
html.is-fixed,
html.is-fixed body {
    height: 100%;
    overflow: hidden;
}
}


/*add 20200820*/
.closebtn{
	background-color: white;
	width: 22px;
	height: 22px;
	position: absolute;
	top: -8px;
	left: -8px;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	z-index: 2;
	cursor: pointer;
	border-radius: 50%;
	border: 5px solid #fff;
}
.closebtn.sp{
	width: 6vw;
  height: 6vw;
	top: 0;
	right: 0;
	left: auto;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	border-radius: 0;
	border:2px solid #fff;
}
.closebtn:before,
.closebtn:after{
	content:"";
	position: absolute;
	left:0;
	right: 0;
	margin: 0 auto;
	width: 2px;
	height: 100%;
	background-color: #808080;
}
.closebtn.sp:before,
.closebtn.sp:after{
	background-color: #f4ba1d;
}
.closebtn:before{
	transform: rotate(-45deg);
}
.closebtn:after{
	transform: rotate(45deg);
}
#info_bnr.hide,
#infos_bnr.hide{
	display: none!important;
}