/* CSS Document */
@charset "UTF-8";

@media(max-width:834px){
   .inner{max-width:100%;}
   .sp_only{ display:block; }
   .pc_only{ display:none; }

/* ------------------------------
   header 
------------------------------ */
   .navToggle{position:absolute;top:10px;right:10px;width:40px;height:40px;z-index:1000;}
   .navToggle span{width:30px;height:1px;background:#000;position:absolute;left:50%;transition:0.5s;}
   .navToggle span:first-child{top:10px;transform:translate(-50%,-50%);}
   .navToggle span:nth-child(2){top:50%;transform:translate(-50%,-50%);}
   .navToggle span:last-child{bottom:10px;transform:translate(-50%,50%);}
   .navToggle.active span:first-child{top:50%;transform:translate(-50%,-50%) rotate(135deg);}
   .navToggle.active span:nth-child(2){width:0%;}
   .navToggle.active span:last-child{bottom:50%;transform:translate(-50%,50%) rotate(-135deg);}
   header nav{width:0%;height:100%;box-sizing:border-box;background:#FFF;position:fixed;top:0;right:0;z-index:999;transition:0.5s;}
   header .navToggle.active + nav{width:100%;}
   header nav ul{padding:50px;width:100vw;height:100%;box-sizing:border-box;}
   header nav ul li{display:block;text-align:center;font-size:18px;line-height:24px;margin:20px 0;padding:0;}
/* ------------------------------
ページ共通
------------------------------ */

	.left_title {min-height:60px;margin: 0 auto -30px;}
	.left_title span:first-child{line-height:60px; padding-left:20px;padding-right:20px;}
	.lead{font-size:20px; font-weight:500; line-height:40px;}
/*--写真リサイズ--*/
/*=====フッター上 CONTACT=====*/
	#secCont{padding:40px 0;}
	#secCont .flexBx{flex-wrap:wrap;justify-content:center;}
	#secCont .poppins{margin-bottom:20px;}
	#secCont .poppins+p{width:100%;text-align:center;}
	#secCont .btn01{margin-top:30px;}

/*=====下層共通=====*/
	.next .visualBox{height:200px;}
	.pageTitle{font-size:30px; max-width:100%; line-height:40px; padding:30px 20px 30px;box-sizing:border-box;}
	.next .blueBox{width:auto; height:auto;padding:20px;}
/* ------------------------------
TOP PAGE
------------------------------ */
   .top .catch{font-size:20px; max-width:100%;line-height:30px; padding:20px;box-sizing:border-box;}
/* --スライダー-- */
   .bg-slider{height:300px;}
   .top .left_title{width:100%;}

   .top .left_title span:first-child{position:relative;z-index:2;}
   .top .left_title span:last-child{position:absolute;  top:50px;left:auto;right:0; line-height:60px; padding-right:20px; height:60px;padding-left:70px;padding-right:20px;background:#FFF;}
   .top .left_title span:last-child::before{left:10px;top:31px;width: 40px; height: 1px;background-color: #141414;}
/* --sec01-- */
   .top #sec01{padding:20px;}
   .top #sec01 .flexBx{flex-wrap:wrap;}
   .top #sec01 .flexBx .lead{width:100%; padding-bottom:0; margin:20px auto;}
   .top #sec01 .btn01{margin-left:0;}
   .top #sec01 .btn01+.flexBx{background-size:250px auto; background-repeat:no-repeat; background-position:right 0 top 60px;margin-top:50px;}

   .top #sec01 .btn01+.flexBx p{padding-top:200px;}
/* --sec02-- */
   .top #sec02{padding:40px 20px; min-height:auto;position:relative;}
   .top #sec02::before{content:"";width:100%;height:100%;background:rgba(0,0,0,0.5);position:absolute;top:0;left:0;}

   .top #sec02 .flexBx{text-shadow:2px 2px 2px #000;position:relative;z-index:2;}
   .top #sec02 .flexBx .poppins{font-size:30px; line-height:24px;right: 0; bottom:0;}
/* --sec03-- */
   .top #sec03{padding:30px 20px;position:relative;}
   .top #sec03 .flexBx{flex-wrap:wrap;padding-bottom:50px;}
   .top #sec03 .flexBx div{width:100%;position:static;min-height:auto;}
   .top #sec03 .flexBx ul{width:315px;margin: 0 auto; flex-wrap:wrap;}
   .top #sec03 .flexBx ul li{margin-top:30px;padding-bottom:20px;}
/* --sec04-- */
   .top #sec04{margin-bottom:40px;}
   .top #sec04 .of .p2{float:none;width:100%;height:auto;}
   .top #sec04 .of .rBox{float:none; width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;}
   .top #sec04 .of .rBox .blueBox{float:none;margin: 0 auto;}

   .top #sec04 .of .rBox .img01{width:calc(50% - 30px);height:calc(50vw - 30px);float:none;margin:20px 10px 20px auto;}
   .top #sec04 .of .rBox .img01 span{width:100%;height:100%;}
   .top #sec04 .of .rBox .img02{width:calc(50% - 30px); height:calc(50vw - 30px);float:none;margin:20px auto 20px 10px;}
   .top #sec04 .of .rBox .img02 span{width:100%;height:100%;}
   .top #sec04 .of .rBox .logoBox{width:215px;  float:none;margin: 0 auto;}
/* --sec05-- */
   .top #sec05 {padding:20px 0;}
   .top #sec05:before{position: static;width: 100%; height: 300px;display:block;background-size: cover;}
   .top #sec05 .inner{ padding:20px 20px 60px;position:relative;}
   .top #sec05 .inner:after{display:none;}
   .top #sec05 .inner .flexBx{ margin-bottom:20px;}
   .top #sec05 .inner .flexBx .btn01{position:absolute;bottom:20px;left:20px;}
   .top #sec05 .inner ul li{ width:100%;margin-bottom:20px;}
   .top #sec05 .inner ul li:nth-child(n+3){margin-top:0;}
   .top #sec05 .inner ul li:nth-child(even){margin-left:0;}

/* ------------------------------
会社概要
------------------------------ */
/* --sec01-- */
	.about #sec01{padding:0 0 60px;}
	.about #sec01 .flexBx{position:relative;background-size:cover;}
	.about #sec01 h2{width:auto;height:auto; padding:20px;position:absolute;top:0;right:0;margin: 0;z-index:3;}
	.about #sec01 .flexBx{flex-wrap:wrap;}
	.about #sec01 .flexBx div{width:calc(100% - 40px);padding:10px;box-sizing:border-box;background:rgba(255,255,255,0.8);margin:30px auto;}
	.about #sec01 .flexBx div >*{text-shadow:1px 1px 4px #FFF;}
/* --sec02-- */
	.about #sec02{padding-bottom:0px;}
	.about #sec02 .flexBx{flex-wrap:wrap;}
	.about #sec02 .flexBx div:first-child{padding:20px;box-sizing:border-box;}
	.about #sec02 .flexBx div .ttl01{margin-bottom:30px;}
/* --sec03-- */
	.about #sec03 .inner{ padding:70px 0 0;}
	.about #sec03 .inner:after{display:none;}
	.about #sec03 .inner .flexBx{flex-wrap:wrap;}
	.about #sec03 .inner .ttl02{position:absolute; left:0; top:0;}
	.about #sec03 .inner .flexBx ul{margin: 0 auto;padding-top:50px;}
/* ------------------------------
自社の強み／品質方針
------------------------------ */
/* --sec01-- */
	.quality #sec01 .inner{ padding: 0 ;background:linear-gradient(90deg,white 0%,white 20px,#019fe8 20px,#019fe8 100%);flex-wrap:wrap;}
	.quality #sec01 .inner .videoBx{margin-top:20px;}
	.quality #sec01 .inner .videoBx+div{width:100%;padding: 20px 20px 20px 40px;box-sizing:border-box;}
/* --sec02-- */
	.quality #sec02 .flexBx{flex-wrap:wrap;margin-bottom:20px;}
	.quality #sec02 .flexBx:nth-child(even){background:linear-gradient(-90deg,#019fe8 0%,#019fe8 20px,#FFF 20px,#FFF 100%);}
	.quality #sec02 .flexBx:nth-child(odd){background:linear-gradient(90deg,#019fe8 0%,#019fe8 20px,#FFF 20px,#FFF 100%);}
	.quality #sec02 .flexBx>p{width:100%;margin-top:20px;}
	.quality #sec02 .flexBx > div{order:2;}
	.quality #sec02 .flexBx:nth-child(even)>div{padding:20px 40px 20px 20px;}
	.quality #sec02 .flexBx:nth-child(odd)>div{padding:20px 20px 20px 40px;}
	.quality #sec02 .flexBx>div h3{font-size:24px;line-height:40px;}
/* ------------------------------
設備情報
------------------------------ */
/* --sec01-- */
	.equip #sec01{margin:30px 0; }
	.equip #sec01:before{width:100%;}
	.equip #sec01 .inner{position:relative;}
	.equip #sec01 .flexBx .titleBox{position:absolute;top:0;left:0;width:auto;transform:translateY(-50%);}
	.equip #sec01 .flexBx .videoBx{min-height:auto;}
/* --sec02-- */
	.equip #sec02 table{width:100%;}
	.equip #sec02 table tbody {width:100%;}
	.equip #sec02 table tr {font-size:12px;display:flex;width:100%;}
	.equip #sec02 table tr >*:first-child{padding-left:10px;box-sizing:border-box;width:30%;}
	.equip #sec02 table tr >*:nth-child(2){text-align:center;width:10%;}
	.equip #sec02 table tr >*:nth-child(3){width:20%;}
	.equip #sec02 table tr >*:last-child{padding-right:10px;box-sizing:border-box;width:40%;}
/* ------------------------------
制作事例　一覧
------------------------------ */
	.workslist #sec01{padding:30px 0 0;}
	.workslist #sec01 .inner{padding: 0 20px;box-sizing:border-box;}
	.workslist #sec01 ul li{width:100%; margin:30px 0 50px;}
	.workslist #sec01 ul li .photo{width:calc(100vw - 40px);height:calc(100vw - 40px);}
/* ------------------------------
制作事例　詳細
------------------------------ */
	.worksinfo #sec01{padding:30px 20px;}
	.worksinfo #sec01 .inner div .thumb-item-nav ul{}
	.worksinfo #sec01 .inner div .thumb-item-nav li{width:calc(20vw - 8px)!important;}
	.worksinfo #sec01 .inner div .thumb-item-nav .p4{width:calc(20vw - 12px);height:calc(20vw - 12px);margin:4px;}
/* ------------------------------
新着情報　一覧
------------------------------ */
	.newslist #sec01{padding:30px 0 0;}
	.newslist #sec01 .inner{padding: 0 20px;box-sizing:border-box;}
	.newslist #sec01 .inner ul li{width:100%; margin:30px 0 50px;}
	.newslist #sec01 ul li .photo{width:calc(100vw - 40px);height:calc(100vw - 40px);}

/* ------------------------------
新着情報　詳細
------------------------------ */

	.newsinfo #sec01{padding:30px 20px;}
	.newsinfo #sec01 .inner div .thumb-item-nav ul{}
	.newsinfo #sec01 .inner div .thumb-item-nav li{width:calc(20vw - 8px)!important;}
	.newsinfo #sec01 .inner div .thumb-item-nav .p4{width:calc(20vw - 12px);height:calc(20vw - 12px);margin:4px;}
/* ------------------------------
お問い合わせ
------------------------------ */
	.contact section{padding:30px 0;}
	.contact .title{border-top:none;font-size:20px;padding: 40px 20px 0;box-sizing:border-box;}
	.contact .secoutput { padding: 0 20px;box-sizing:border-box;}
	.contact .secoutput .caption{text-align:justify;}
	.contact .secinput .center p{font-size:16px;padding-left:20px;padding-right:20px;}
	.contact .secinput form{width:calc(100% - 40px);padding:20px;box-sizing:border-box;margin: 30px auto;}
	.contact .secinput .item .name{ float:none;}
	.contact .secinput .item .input{padding:0;}
	.contact .secinput .item .radio label{ margin-right:10px;}
}