@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;
}}

article{margin-top:50px;}

.swiper-slide h2{font-size:30px; line-height:1.4;}
.swiper-slide h2 span{font-size:42px; color:#050505;}
@media screen and ( max-width:816px ){
.swiper-slide h2{font-size:3.9vw; line-height:1.4;}
.swiper-slide h2 span{font-size:5.1vw; color:#050505;}
}

/*スライダー*/
/*3枚表示の場合*/
#top_slider{width:100%; max-width:1300px; margin:10px auto 25px auto;}
/*1枚表示の場合*/
/*#top_slider{width:80%; max-width:1200px; margin:10px auto 60px 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:#000; 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:4%; color:#000; text-shadow:1px 2px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff; font-weight:bold;}
.sl_rt{position:absolute; top:5%; right:10%; color:#000; 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:4%; color:#000; text-shadow:1px 2px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff; font-weight:bold; background:rgba(95, 95, 95, 0.25);}
.sl_defo{position:absolute; top:0; left:1%; color:#000; text-shadow:1px 2px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff; font-weight:bold;}


/*特徴*/
/*#main00{background:url(./img0/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(./img0/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, #main09b .flcon_b > div{width:32%; margin:10px auto; }
#main09 .flcon_b > div p, #main09b .flcon_b > div p{font-size:13px;}
#main09 .flcon_b > div img, #main09b .flcon_b > div img{width:100%;}
#main09b{width:80%; margin:0 auto 60px auto;}
@media screen and ( max-width:816px ){
#main09 .flcon_b > div, #main09b .flcon_b > div{width:calc(50% - 15px); margin:10px auto; }
}
#main09b{width:90%; margin:0 auto 60px 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:70%; max-width:1000px; margin:90px auto 30px auto; text-align:justify;}
article p{line-height:1.8;}
					@media screen and ( max-width:816px ){
					article{width:94%;}
					}



#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;}

#main09 ul li{text-indent:3em;}

.footer_logo{width:20%; margin:10px auto;}
.footer_logo img{width:100%;}
@media screen and ( max-width:816px ){
.footer_logo{width:30%;}
}

.campaign{margin-left:30px;}

.relative{position:relative;}

/*ページ毎に配色変更検討以下の部分*/
header_nav, footer{border-top:1px solid #999; border-bottom:1px solid #999;}#main09b .cate1, #main09b .cate2, #main09b .cate3, #main09b .cate4, #main09b .cate5, #main09b .cate6, #main09b .cate7, #main09b .cate8, #main09b .cate9, #main09b .cate10, #main09b .cate11, #main09b .cate12, #main09b .cate13, #main09b .cate14, #main09b .cate15,  #main09b .cate16, #main09b .cate17{display:none;}
#top_slider{position:relative;}
#top_slider #top_mess{position:absolute; top:20px; left:5px; z-index:101; width:35%; color:#fff; text-shadow:1px 1px 1px #000; font-weight:bold; width: 22%; text-align: center; background: rgba(134,72,6,0.6); border-radius:25px;}
#top_slider #top_mess img{width:100%;}

p{margin-left:0;}
#header_nav{background:#222;}

.fs160{font-size:160%;}


#main73 .flcon_b > div{width:calc(25% - 40px); margin:20px;}
#main73 .flcon_b > div img{width:100%; max-width:150px; margin-right:auto;}
#main72 .flcon_b > div{width:calc(50% - 120px); margin:30px; padding:20px 28px; min-height:80px; border:1px solid #666; border-radius:20px;}
#main72 .flcon_b > div{position:relative;}
#main72 .flcon_b > div .logotl{position:absolute; top:-30px; left:-30px; width:80px;}
#main72 .flcon_b > div h3{text-indent:3em; margin-bottom:20px;}

#main74 .flcon_b > div{width:calc(33.33% - 60px); margin:20px 10px; padding:20px 8px; min-height:80px; border:1px solid #666; border-radius:20px;}
#main74 .flcon_b > div{position:relative;}
#main74 .flcon_b > div .logotl{position:absolute; top:-30px; left:-30px; width:80px;}
#main74 .flcon_b > div h3{text-indent:3em; margin-bottom:20px;}
#main74 .flcon_b > div p{color:#000;}

#main74 h2, #main74 h3, #main74 p{color:#000;}

@media screen and ( max-width:816px ){
#main72 .flcon_b > div{width:calc(100% - 60px); margin:25px 10px 15px 20px; padding:20px 14px; min-height:80px; border:1px solid #666;}
#main73 .flcon_b > div{width:calc(25% - 16px); margin:8px;}
#main73 h3{font-size:3.1vw; text-align:center;}
#main74 .flcon_b > div{width:calc(100% - 60px); margin:25px 10px 15px 20px; padding:20px 14px; min-height:80px; border:1px solid #666;}

}

#top_pgc_box li{font-size:18px; line-height:1.8;}


#main74{width:80%; padding-left:10%; padding-right:10%; padding-bottom:30px; margin:60px auto;}
.shutter_slider{position:relative; overflow:hidden}
.shutter_slider img{width:100%; max-width:100%;}
.shutter_slider .shutter2 img{position:absolute; top:0; left:0; animation: shutter01 16s ease infinite;}

@media screen and ( max-width:816px ){
#main74{width:94%; padding-left:3%; padding-right:3%; margin:60px auto;}
}

@keyframes shutter01 {
  0% {position:absolute; top:0; left:0;}
  40% {position:absolute; top:0; left:0;}
  50% {position:absolute; top:0; left:-100%;}
  90% {position:absolute; top:0; left:-100%;}
  100% {position:absolute; top:0; left:0;}
}

.pt40{padding-top:40px;}

#main74{background:#ededed;}
#main74 .flcon_b > div.s01{width:64%;}
#main74 .flcon_b > div.s02{width:32%;}
#main74 h2{max-width:400px; min-width:10em; margin:10px auto;}
#main74 h2 img{width:100%;}

.naisou_logo{width:300px; margin:0 auto 20px auto; padding-top:40px;}
.naisou_logo > img{width:100%;}


.inner7 p{line-height:1.8; text-align:justify;}
.show_area li{width:24%; margin:15px 0.5%; list-style-type:none; position: relative;}
.show_area li:before {content:""; display: block; padding-top: 74%;  /* 高さを幅の72%に固定 */ }
.show_area li img{object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

.show_area li img{width:100%;}
.show_mess p{font-size:14px;} 
.show_mess h3{font-size:16px; font-weight:100; overflow: hidden; text-overflow: ellipsis; 	white-space: nowrap;}
		@media screen and ( max-width:816px ){
		.show_area li{width:32.33%; margin:15px 0.5%; list-style-type:none;}
		.show_mess p{font-size:2.8vw;}
		.show_mess h3{font-size:2.8vw;}
		}
.fw100{font-weight:100;}


.show_area li.{display:block;}

.ls4{letter-spacing:4px;}


.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:100%; max-width:300px;}
#logo_img img{width:100%;}
#logo_text{display:none;}
#logo_u_text{margin-bottom:12px; text-indent: 1.5em;}

.top_logo_top{font-size:20px; font-weight:400; line-height:2.0; letter-spacing:1px; /*color:#0167b7;*/}

@media screen and ( max-width:1040px ){
.top_logo_top{font-size:14px; letter-spacing:0;}
header .inner > div:nth-child(2){width:25%;}
.imgarea p{font-size:14px;}
}

@media screen and ( max-width:816px ){
.top_logo_top{font-size:3.1vw; letter-spacing:0;}
header .inner > div:nth-child(2){width:36%;}
.imgarea p{font-size:3.05vw; padding-top:10px;}
}
#header_nav{background:#666;}
#header_nav a, #header_nav a:link, #header_nav a:visited{color:#f6f6f6;}

.fs120p{font-size:120%;}
.kenkei{display:none;}


*{margin:0; padding:0;}

*{color:#f9f9f9;}

header .inner h1{margin-top:0px; 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;}

#top_slider h2{color:#000;}

#slider_bottom > div{width:49.7%;}
#slider_bottom > div img{width:100%;}

@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%;}

#slider_bottom > div{width:100%; padding-top:3em;}
#slider_bottom > div p{color:#fff; font-size:140%; text-align:center;}
}

#slider_bottom h2{color:#f6f6f6; font-sixe:140%; line-height:1.8;}

header .inner .imgarea p{margin-top:30px;}
@media screen and ( max-width:816px ){
header .inner .imgarea p{margin-top:0;}
}

footer p a, footer p a:link, footer p a:visited{color:#f6f6f6;}