@charset "utf-8";

*{margin:0; padding:0; color:#333;}
html{scroll-behavior: smooth;}
body{background:#f2ece3;}

#wraper{position:relative; max-width: 1920px; margin: 0 auto;}/*20200826追記*/
.swiper--body{z-index:10;}

@media screen and ( max-width:816px ){#wraper{width: 100%; overflow: hidden;}}

header{width:100%; min-height:90px; position:absolute; top:0; z-index:22;
background: linear-gradient(to bottom, rgba(220,220,220,0.7) 0%,rgba(220,220,220,0.7) 3%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(220,220,220,0.7)', endColorstr='rgba(255,255,255,0)',GradientType=0 ); /* IE6-9 */
}
.inner{width:80%; max-width:1200px; margin:0 auto; z-index:23;}
		@media screen and ( max-width:816px ){
		.inner{width:90%; margin:0 auto; z-index:23;}
		}


.swiper-slide > div{background-size:cover; background-position:center 80%;}
.top_logoarea{width:100%;}
.top_logoarea > h1{width:281px; max-width:38vw; margin:5px auto 0 auto;}
.top_logoarea > h1 img{width:100%;}

.swiper01 h1{position:absolute; bottom:20px; right:10%; font-size:20px; color:#eee; text-shadow:1px 1px 1px #111, -1px -1px 1px #999; font-weight:100; z-index:12;}
.swiper01 .scroll{position:absolute; bottom:20px; left:calc(50% - 2.3em); color:#ddd; text-shadow:1px 1px 1px #000, -1px -1px 1px #999; font-size:24px; z-index:12; font-weight:400; z-index:801;}
.swiper01 .scroll p{font-size:16px; letter-spacing:2px; color:#ccc;}

.swiper-container2 > div > div img{width:100%;}

#main02{padding-top:10px;}
		@media screen and ( max-width:816px ){
		#main02{padding-top:5px;}
		#main02 #global-nav{margin-bottom:5px;}
		}

#main02 .fixed{position:fixed; top:0; z-index:59; background:rgba(211,209,192,0.9);}
#toppage #main02 #global-nav{background:rgba(211,209,192,0.9);}

#main02 #global-nav{width:100%; padding-top:10px; padding-bottom:10px; margin-bottom:10px;}
#main02{padding-top:10px;}
		@media screen and ( max-width:816px ){
		#main02{padding-top:5px;}
		#main02 #global-nav{margin-bottom:5px;}
		}


#global-nav .inner{position:relative;}
#global-nav .inner #contact{position:absolute; top:0; right:10px;}

#main02 nav .flcon_b{align-items: flex-end;}
#main02 nav .flcon_b a, #main02 nav .flcon_b a:link, #main02 nav .flcon_b a:visited{color:#ccc; text-shadow:1px 1px 1px #000;/*, -1px -1px 1px #666;*/ font-weight:200; font-size:18px; line-height:1.8;}
#main02 nav #contact a, #main02 nav #contact a:link, #main02 nav #contact a:visited{color:#ccc; text-shadow:1px 1px 1px #000;/*, -1px -1px 1px #666;*/ font-weight:200; font-size:17px; letter-spacing:3px; line-height:1.4;}

				@media screen and ( max-width:1080px ){#main02 nav .flcon_b a, #main02 nav .flcon_b a:link, #main02 nav .flcon_b a:visited{font-size:16px;}}

#work #main02 nav .flcon_b a, #main02 nav .flcon_b a:link, #main02 nav .flcon_b a:visited{font-weight:800;}
#main02 nav .flcon_b .top_logoarea2{width:20%; max-width:180px; margin-right:10px;}
				@media screen and ( max-width:816px ){#main02 nav .flcon_b .top_logoarea2{width:27%; max-width:300px; margin-right:10px;}}


/*#main02 nav.fixed .flcon_b .top_logoarea2{width:17%; max-width:150px; margin-right:5px;}*/

#main02 nav .flcon_b .top_logoarea2 img{width:100%;}

		@media screen and ( max-width:816px ){
		#sp_menu{position:fixed; top:15px; right:18px;}
		#main02 nav #global-nav .flcon_b{display:none;}
		}



#main03 p{line-height:1.8; letter-spacing:2px; text-align:justify;}

#main04 p{line-height:1.8; letter-spacing:2px; text-align:justify;}


.box70p{width:70%; max-width:1200px; margin:60px auto;}
		@media screen and ( max-width:816px ){
		.box70p{width:90%; margin:40px auto;}
		}

#main09 .flcon_b > div{width:30%; margin-top:40px; background:#fff;}
#main09 .flcon_b > div img{width:100%;}
		@media screen and ( max-width:816px ){
		#main09 .flcon_b > div{width:47%; margin-top:20px; background:#fff;}
		}


footer{background:rgba(211,209,192,0.9); min-height:100px;}
.footer_logo{width: 220px; max-width: 30vw; margin: 0px auto; padding-top:10px;}
.footer_logo img{width:100%;}
footer .flcon_b{width:70%; max-width:1000px; margin:20px auto;}
.footer_logoarea2 img{width:120px; max-width:24vw; margin-top:15px;}
		@media screen and ( max-width:816px ){
		footer .flcon_b{width:90%; margin:20px auto;}
		.footer_logo{width:30vw; margin: 10px auto 0 0; padding-top:10px;}
		.footer_logoarea2 img{width:22vw; margin: 0 auto 0 0; padding-top:10px;}
		}
footer .flcon_b a{color:#ccc; text-shadow:1px 1px 1px #000}


.animarea h3, .animarea h2{z-index:3;}
.animarea h3 a, .animarea h2 a{color:#ccc; text-shadow:1px 1px 1px #666, -1px -1px 1px #ccc; font-weight:400; font-size:18px; line-height:2;}

.animarea h2.anim04 a span{font-size:80%; color:#ccc; letter-spacing:2px; padding-left:2px;}

body .slick-slider{margin-bottom:10px;}


#main{max-width:2000px; margin:0 auto; overflow:hidden;}

/*workページ ほか*/
#main13{width:100%; max-width:1600px; margin:30px auto; }
#main13 .inner_nana .flcon_b > div.comme,
#main13 .inner_nana2 .flcon_b > div.comme,
#main13 .inner_nana3 .flcon_b > div.comme,
#main13 .inner_nana4 .flcon_b > div.comme{width:calc(65% - 80px); margin:40px;}

		@media screen and ( max-width:816px ){
#main13{margin:0 auto;}
#main13 .inner_nana .flcon_b > div.comme,
#main13 .inner_nana2 .flcon_b > div.comme,
#main13 .inner_nana3 .flcon_b > div.comme,
#main13 .inner_nana4 .flcon_b > div.comme{width:100%; margin:20px 0;}
}

#main13 .overarea .inner_nana .flcon_b > div.img{width:20vw; max-width:300px; height:20vw; max-height:300px; padding:0px; background:#fff; border-radius: 50%; box-shadow:30px 30px 30px 30px rgba(240,240,240,0.7) inset, 20px 20px 10px 10px rgba(240,240,240,0.4); background:url(../img/img_marcketing.jpg); background-size:cover; margin-top:-30px;}
.circle{position: absolute; top: 0; left: 0; bottom: 0; right: 0;}









#main13 .overarea2 .inner_nana .flcon_b > div.img{width:18vw; max-width:250px; height:18vw; max-height:250px; background:#fff; box-shadow:10px 10px 30px 30px rgba(240,240,240,0.7) inset, 20px 20px 10px 10px rgba(240,240,240,0.4); background:url(../img/img_websystem.jpg); background-size:cover; transform: rotate(-10deg);}

#main13
 .overarea3 .inner_nana .flcon_b > div.img{width:18vw; max-width:250px; height:18vw; max-height:250px; padding:0px; background:#fff; border-radius: 50% 0 0 0; box-shadow:30px 30px 30px 30px rgba(240,240,240,0.7) inset, -10px -10px 10px 10px rgba(240,240,240,0.4); background:url(../img/img_seo.jpg); background-size:cover;}

#main13 .overarea4 .inner_nana .flcon_b > div.img{width:22vw; max-width:300px; height:18vw; max-height:250px; padding:0px 10px 0 -10px; background:#fff; border-radius: 70% 30%; box-shadow:30px 30px 30px 30px rgba(240,240,240,0.7) inset, -10px -10px 10px 10px rgba(160,160,160,0.4); background:url(../img/img_dgien__.jpg); background-size:cover; transform: rotate(2deg);}

		@media screen and ( max-width:816px ){
#main13 .overarea .inner_nana .flcon_b > div.img, 
#main13 .overarea2 .inner_nana .flcon_b > div.img{width:100%; border-radius:0; height:40vw; margin-top:30px; margin-bottom:80px; box-shadow:0px 0px 0px rgba(240,240,240,0.7) inset, 15px 15px 10px 10px rgba(240,240,240,0.4);}
#main13 .overarea3 .inner_nana .flcon_b > div.img,
#main13 .overarea4 .inner_nana .flcon_b > div.img{width:100%; border-radius:0; height:40vw; margin-top:30px; margin-bottom:80px; box-shadow:0px 0px 0px rgba(240,240,240,0.7) inset, 15px 15px 10px 10px rgba(240,240,240,0.4);}
.sp_rev{flex-direction: column-reverse;}
		}


#main13
 .inner_nana .flcon_b{align-items: center; width:66.67%; margin-left:9%;}
#main13 .inner_nana .flcon_b > div img{width:100%; margin:0 auto; display:block;}
#main13 .inner_nana .flcon_b > div.comme h2{margin-bottom:40px;}
		@media screen and ( max-width:816px ){#main13 .inner_nana .flcon_b > div.comme h2{margin-bottom:10px; font-size: 4.2vw;}}
#main13 .inner_nana .flcon_b > div.comme p{line-height:1.8; text-align:justify;}

#main13 h1{margin-top:20px; margin-bottom:50px; padding-top:20px; padding-bottom:20px;}
		@media screen and ( max-width:816px ){#main13 h1{margin-top:0px; margin-bottom:10px; padding-top:10px; padding-bottom:10px;}}

#work #main0{background:url(../img/work_top.jpg) no-repeat center top; background-size:cover; width:100%; height:30vw; max-height:450px; position:absolute; top:0; z-index:-1;}
		@media screen and ( max-width:816px ){#work #main0{background:url(../img/work_top_sp.jpg) no-repeat center top; background-size:cover; height:60vw;}}

#web_system #main0{background:url(../img/websystem_top.jpg) no-repeat center 40%; background-size:cover; width:100%; height:30vw; max-height:450px; position:absolute; top:0; z-index:-1;}
		@media screen and ( max-width:816px ){#web_system #main0{background:url(../img/websystem_top_sp.jpg) no-repeat center 60%; background-size:cover; height:60vw;}}

#ec_site #main0{background:url(../img/ecsite_top.jpg) no-repeat center 40%; background-size:cover; width:100%; height:30vw; max-height:450px; position:absolute; top:0; z-index:-1; }
		@media screen and ( max-width:816px ){#ec_site #main0{background:url(../img/ecsite_top_sp.jpg) no-repeat center bottom; background-size:cover; height:60vw;}}

#nagare #main0{background:url(../img/nagare_top.jpg) no-repeat center 40%; background-size:cover; width:100%; height:30vw; max-height:450px; position:absolute; top:0; z-index:-1;}
		@media screen and ( max-width:816px ){#nagare #main0{background:url(../img/nagare_top_sp.jpg) no-repeat center 40%; background-size:cover; height:60vw;}}

#contact #main0{background:url(../img/contact_top.jpg) no-repeat center 60%; background-size:cover; width:100%; height:30vw; max-height:450px; position:absolute; top:0; z-index:-1;}
		@media screen and ( max-width:816px ){#contact #main0{background:url(../img/contact_top_sp.jpg) no-repeat center 70%; background-size:cover; height:60vw;}}


#main13{/*overflow:hidden;*/ padding-bottom:60px;}

#main13 .overarea{
  -webkit-transform: rotate(-5deg) translate3d(0, 0, 0);
  background: rgba(180,180,180,0.98);
  margin: 20px -15%;
  padding: 60px 10%;
  position: relative;
  transform: rotate(-5deg) translate3d(0, 0, 0);
  width: 130%;
}

#main13 .overarea2{
  -webkit-transform: rotate(-5deg) translate3d(0, 0, 0);
  background: rgba(160,160,160,0.7);
  margin: 20px -15%;
  padding: 60px 10%;
  position: relative;
  transform: rotate(-5deg) translate3d(0, 0, 0);
  width: 130%;
}


#main13 .overarea .inner_nana {
overflow:hidden;
  -webkit-transform: rotate(5deg) translate3d(0, 0, 0);
  color: #fff;
  margin: 0 auto;
  max-width: 100%;
  transform: rotate(5deg) translate3d(0, 0, 0);
}

#main13 .overarea2 .inner_nana {
overflow:hidden;
  -webkit-transform: rotate(5deg) translate3d(0, 0, 0);
  color: #fff;
  margin: 0 auto;
  max-width: 100%;
  transform: rotate(5deg) translate3d(0, 0, 0);
}

#main13 .overarea3{
  -webkit-transform: rotate(5deg) translate3d(0, 0, 0);
  background: rgba(160,160,160,0.7);
  margin: 20px -15% -40px -15%;
  padding: 50px 10%;
  position: relative;
  transform: rotate(5deg) translate3d(0, 0, 0);
  width: 130%;
	z-index:46;
}

#main13
 .overarea3 .inner_nana {
overflow:hidden;
  -webkit-transform: rotate(-5deg) translate3d(0, 0, 0);
  color: #fff;
  margin: 0 auto;
  max-width: 100%;
  transform: rotate(-5deg) translate3d(0, 0, 0);
}

#main13
 .overarea4{
  -webkit-transform: rotate(5deg) translate3d(0, 0, 0);
  background: rgba(160,160,160,0.7);
  margin: 20px -15% -40px -15%;
  padding: 50px 10%;
  position: relative;
  transform: rotate(5deg) translate3d(0, 0, 0);
  width: 130%;
	z-index:46;
}

#main13 .overarea4 .inner_nana {
overflow:hidden;
  -webkit-transform: rotate(-5deg) translate3d(0, 0, 0);
  color: #fff;
  margin: 0 auto;
  max-width: 100%;
  transform: rotate(-5deg) translate3d(0, 0, 0);
}
#main13 h1{color:#eee; letter-spacing:3px; font-size:38px; text-shadow:2px 1px 1px #000;}
		@media screen and ( max-width:816px ){#main13 h1{font-size:5vw;}}

/*websystemページ ほか*/


a:hover img{opacity:0.4; transition:0.8s;}

#toppage h2{line-height:1.8;}