@charset "utf-8";

article h2{margin-top:20px; margin-bottom:40px; padding-top:20px;}
#main2 .flcon > div{width:calc(33.33% - 42px); margin:20px;}
@media screen and ( max-width:816px ){
#main2 .flcon > div{width:calc(100% - 20px); margin:10px;}
article h2{font-size:4.4vw;}
#main2 .flcon > div.fl_min50 {width:calc(50% - 42px); margin:20px;}
}

#main2 .flcon > div h3{text-align: center; margin-bottom: 30px;
}}

abbr{text-decoration:none; border:none;}
article{margin-top:50px;}

.swiper-slide h2{font-size:24px; line-height:1.4;}
@media screen and ( max-width:816px ){
.swiper-slide h2{font-size:3.8vw; line-height:1.4;}
}

/*スライダー*/
/*3枚表示の場合*/
#top_slider{width:100%; max-width:1300px; margin:10px auto 40px auto;}
/*1枚表示の場合*/
/*#top_slider{width:80%; max-width:1200px; margin:10px auto 80px auto;}*/

.display_none{display:none;}

#top_slider .swiper-container{width:100%; margin:0 auto; }
@media screen and ( max-width:816px ){
/* #top_slider .swiper-container{height:49.5vw;}*/
}
#top_slider .swiper-container .swiper-slide img{max-width:100%;}


.swiper-slide{position:relative;}
.sl_lt{position:absolute; top:5%; left:10%; color:#fff; text-shadow:1px 2px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;}
.sl_lb{position:absolute; bottom:2%; left:10%; color:#fff; text-shadow:1px 2px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;}
.sl_rt{position:absolute; top:5%; right:10%; color:#fff; text-shadow:1px 2px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;}
.sl_rb{position:absolute; bottom:2%; right:10%; color:#fff; text-shadow:1px 2px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;}
.sl_defo{position:absolute; top:0; left:1%; color:#fff; text-shadow:1px 2px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;}


/*特徴*/
/*#main00{background:url(./img/tsugaruhantou.jpg) right center; background-size:cover;}*/

#main00 .flcon_b div.imgarea{width:70%; max-width:800px; margin:10px auto; position:relative;} 
#main00 .flcon_b div img{width:100%;}
#main00 .flcon_b div img.point1{width:21%; position:absolute; top:25%; left:7%;}
#main00 .flcon_b div img.point2{width:21%; position:absolute; bottom:0; left:18%;}
#main00 .flcon_b div img.point3{width:21%; position:absolute; top:8%; right:12%;}
#main00 .flcon_b div img.point4{width:21%; position:absolute; bottom:10%; right:15%;}
#main00 .flcon_b div.textarea{width:30%; max-width:400px; margin:auto auto 10px auto; padding-right:0px; text-shadow:1px 1px 1px #fff; font-weight:200;}
@media screen and ( max-width:816px ){
#main00 .flcon_b div.imgarea{width:100%;}
#main00 .flcon_b div.textarea{width:90%; margin:10px auto 10px auto;}
}

/*制作の流れページ*
.step{font-size:250%; font-weight:bold; color:#666; text-align:center; width:100px;}
.step_setu{width:calc(100% - 102px); text-indent:1em; text-align:justify;}
@media screen and ( max-width:816px ){
.step{font-size:220%; font-weight:bold; color:#666; text-align:center; width:65px;}
.step_setu{width:calc(100% - 67px);}
}

.stepbox{width:calc(100% - 34px); max-width:1500px; margin:8px auto; padding:7px; border:1px solid #999; border-radius:20px; background:url(./img/background_5489work.png) no-repeat 95% 5px;}
.stepbox p{line-height:1.8;}
.pricefree{line-height:1.6; padding:0 12px; margin:5px 20px; background:#666; color:#fff; text-align:center;}
.fs3vw5{font-size:3vw;}
@media screen and ( max-width:816px ){.fs3vw5{font-size:5vw;}}





/*制作料金*/
#main4 .flcon .plan_point, #main4 .flcon .option_point{width:calc(50% - 62px); margin:20px 30px;}
@media screen and ( max-width:816px ){#main4 .flcon .plan_point, #main4 .flcon .option_point{width:calc(100% - 22px); margin:20px 10px;}
}

/*バナー*/
#main09 .flcon_b > div{width:32%; margin:10px auto; }
#main09 .flcon_b > div p{font-size:13px;}
#main09 .flcon_b > div img{width:100%;}
@media screen and ( max-width:816px ){
#main09 .flcon_b > div{width:calc(50% - 15px); margin:10px auto; }
}

#main4{
		width: calc(90% - 14px);
		max-width: 1200px;
		margin: 40px auto 10px auto;
		padding: 7px;
		border: 1px solid #999;
		border-radius: 20px;
}

#main5{
		width: calc(90% - 50px);
		max-width: 1200px;
		margin: 40px auto 10px auto;
		padding: 25px;
		border: 1px solid #999;
		border-radius: 20px;
}


		#wide_monitor_area{width:300px; height:195px; margin:30px auto;}
		#normal_m{animation:moving 4s infinite Alternate 2s;}

@keyframes moving{
0%{width:57%; height:100%;}
99.99%{width:100%; height:100%;}
}


.point01 .flcon>div{width:calc(33.33% - 60px); margin:10px auto;}
@media screen and ( max-width:816px ){.point01 .flcon>div{width:calc(33.33% - 10px); margin:10px auto;}}


.point01 .flcon img{width:100%; max-width:300px; margin:10px auto;}

.mt60{margin-top:60px;}

.pc_nt70_sp_mt30{color:#333; margin-top:70px; background: rgba(221,169,100,0.4); padding: 15px 20px; text-shadow:1px 1px 1px #eee, 1px -1px 1px #eee, -1px 1px 1px #eee, -1px -1px 1px #eee;}
.h2_bk{background: rgba(240,240,240,0.3); padding: 15px 20px;}

@media screen and ( max-width:816px ){.pc_nt70_sp_mt30{margin-top:30px;}}

#main5 img{width:100%;}

#graph01 img{width:100%;}


.stance{border:1px solid #999; margin:15px 5px;}

.tool{border:1px solid #999; margin:15px 5px; padding:15px 25px;}
.tool p{font-size:85%;}
.tool ul{list-style-type:none;}
.tool ul li{line-height:2.5;}
.tool ul li a{text-decoration:underline;}

.mt20{margin-top:20px;}

.staf{width:28%; max-width:280px; margin-right:15px; margin-bottom:15px;}
.staf3{width:20%; max-width:200px; margin-left:15px; margin-bottom:15px;}
@media screen and ( max-width:816px ){
.staf{width:38%;}
.staf3{width:30%;}
}


article{width:80%; max-width:1200px; margin:90px auto 30px auto; text-align:justify;}
article p{line-height:1.8;}
					@media screen and ( max-width:816px ){
					article{width:94%;}
					}

#main0 p{font-size:22px;}

#main0 ol{width:80%; margin:30px auto;}
#main0 li{margin-top:20px; font-size:14px; line-height:1.6;}
#main0 li span{font-size:80%;}
@media screen and ( max-width:816px ){#main0 li{margin-top:20px; font-size:3.2vw;}}

#main01 .sakusaku_box{position:relative; width:90%; margin:20px auto 0 auto;}
#main01 #sakusaku01{width:65%; max-width:640px; margin-bottom:20%;}
#main01 #sakusaku02{width:45%; position:absolute; top:30%; right:0;}
@media screen and ( max-width:816px ){

}

.footer_logo{width:20%; margin:10px auto;}
.footer_logo img{width:100%;}
footer #footer_nav ul li a, footer #footer_nav ul li a:link, footer #footer_nav ul li a:visited{color:#333;}
@media screen and ( max-width:816px ){
.footer_logo{width:30%;}
}

.campaign{margin-left:30px;}

.relative{position:relative;}


@media screen and ( max-width:816px ){
header{margin-bottom:-12px;}
footer{margin-top:-12px;}
#main0 p{font-size:4.1vw;}
}

/*hesder*/
.relative{position:relative;}
.kenkei{max-height:100px; position:absolute; top:0; right:9em; z-index:1; opacity:0.4;}
.logo_{position:absolute; top:0; right:0; z-index:3;}
@media screen and ( max-width:816px ){
.kenkei{max-height:60px; position:absolute; top:0; right:4em; z-index:1; opacity:0.4;}
}

#logo_img{width:80%; max-width:300px;}
#logo_img img{width:100%;}
#logo_text{display:none;}
#logo_u_text{margin-bottom:12px; text-indent: 1.5em;}


header .inner h1{margin-top:10px; margin-bottom:5px; font-size:31px;}
header .inner h1 a{color:#555; text-shadow:4px 4px 4px #ffffff, -4px 4px 4px #ffffff, 4px -4px 4px #ffffff, -4px -4px 4px #ffffff;}
header .inner h3{color:#777; text-shadow:4px 4px 4px #ffffff, -4px 4px 4px #ffffff, 4px -4px 4px #ffffff, -4px -4px 4px #ffffff; font-size:14px;}
@media screen and ( max-width:816px ){
header .inner h1{font-size:3.8vw;}
header .inner h3{font-size:2.2vw; margin-left:0px;}
header .inner h2{width:35%; display:inline;}
header .inner h2 img{width:100%;}
}