/*************************
メディアクエリ
*************************/
@media screen and (max-width:1024px){

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}




body {
-webkit-text-size-adjust: 100%;
	background:#fff;
font-family:"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
　　　font-weight: 200;	
word-wrap:break-word;
word-break:break-all;
}


img{
  max-width: 100%;
  height: auto;
  border: 0;
  text-align:center;
}



/**************************************************************************************************

WRAPPER

**************************************************************************************************/

#wrapper{
	margin:96px auto 0 auto;
	width:100%;
}



/**************************************************************************************************

固定ヘッダー

**************************************************************************************************/
.fix-header {
display:block;
	background-color:#fff;
	top: -76px;/* 上に隠す鷹さ */
	left: 0;
	text-align:left;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	position: fixed;
 	-webkit-box-shadow:4px 4px 4px rgba(0,0,0,0.1);
box-shadow:4px 4px 4px rgba(0,0,0,0.1);

	opacity:0;/* 	最初読み込んだときは透過 */
	z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */
/*	opacity: 0; */
	}

	.fix-header-contents{
display:block;
		width:100%;
		margin: 0 auto;
	}

/**************************************************************************************************

SPHEADER

**************************************************************************************************/

#spHeaderBox {
/*** PCでは表示しない箇所 ***/
display:none;
}


/**************************************************************************************************

HEADER

**************************************************************************************************/
header{
   width: 100%;
margin: 0 auto;
background:#003367;
}

#headerWrap{
display:block;
margin: 0 auto;
width:100%;
z-index:100;
}

.headerBox {
width:100%;
margin:0 auto;
padding:12px 1% 0 1%;
height:104px;
}

/*** PCH1***/
#headaerTxt{
display:inline-block;
vertical-align:middle;
width:39%;
}

#headaerTxt h1, #headaerTxt p{
color:#fff;
font-size:11px;
letter-spacing:1.2px;
}

/*** PCロゴ ***/
#headerLogoPc{
display:inline-block;
vertical-align:middle;
width:18%;
}

#headerLogoPc img{
width:100%;
height:auto;
}

/*** PCTel ***/
#headerTel{
display:inline-block;
vertical-align:middle;
width:43%;
margin:0 0 0 0;
}

#headerTel ul {
}

#headerTel ul li{
display:inline-block;
width:44%;
margin:0 0 0 6%;
vertical-align:middle;
}

#headerTel ul li:last-child{
display:inline-block;
width:50%;
margin:0;
vertical-align:middle;
}


#headerTel ul li p.addr{
font-size:11px;
line-height:1.2em;
text-align:left;
letter-spacing:1.0px;
color:#fff;
margin:3px 0 5px 0;
}

#headerTel ul li .tel{
font-size:20px;
text-align:left;
line-height:1.2em;
color:#fff;
position:relative;
letter-spacing:2.0px;
padding:0 0 0 35px;
   font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}

#headerTel ul li .tel .telcap{
font-size:12px;
position:absolute;
top:1px;
left:1px;
}

#headerTel ul li:last-child a{
width:185px;
float:right;
	font-size:12px;
	vertical-align:middle;
text-align:center;
	font-weight:700;
	color:#fff;
	line-height:1.6em;
	text-decoration: none;
border:solid 1px #7f98b3;
	display: block;
margin:0 auto 0 auto;
	padding:12px 0;
background:#003367;
position:relative;
}


#headerTel ul li:last-child .visited a, {
	opacity:1.0;
}


#headerTel ul li:last-child a:hover {
background:#00559f;
}

#headerTel ul li:last-child a:active {
background:#00559f;
}

#headerTel ul li:last-child i{
margin:0 7px 0 0;
}




/***  スマホロゴ ***/
.headerLogoSp{
display:none;
}

.headerContact{
float:left;
display:block;
width:254px;
margin:0 0 0 100px;
}

/***  ヘッダーロゴより右側 ***/
.headerBoxR{
float:right;
width:590px;
padding:10px 0 0 0;
}




/**************************************************************************************************

GLOBAL NAVIGATION

**************************************************************************************************/
#headerSpMenu{
/*** PCでは表示しない箇所 ***/
display:none;
}



/**************************************************************************************************
ここからマウスオーバーナビ処理 
**************************************************************************************************/

.mddNav {
    width: 100%;
    background:#002248;
    height:76px;
    position: relative;
    box-sizing: border-box;
    z-index: 10;
 	-webkit-box-shadow:4px 4px 4px rgba(0,0,0,0.1);
box-shadow:4px 4px 4px rgba(0,0,0,0.1);

} 

.mddNav > ul {
width:100%;
margin: 0 auto;
}
 

.mddNav > ul > li:last-child {
}
 
.mddNav > ul > li > a {
	float: left;
	font-size:15px;
	text-align:center;
	color:#fff;
	display:block;
	padding:26px 0;
		text-decoration: none;
    transition: all 0.2s linear;
}
 
.mddNav > ul > li:nth-child(1) > a {
	width:11%;
}

.mddNav > ul > li:nth-child(2) > a {
	width:13%;
}

.mddNav > ul > li:nth-child(3) > a {
	width:15%;
}

.mddNav > ul > li:nth-child(4) > a {
	width:12%;
}

.mddNav > ul > li:nth-child(5) > a {
	width:12%;
}

.mddNav > ul > li:nth-child(6) > a {
	width:13%;
}

.mddNav > ul > li:nth-child(7) > a {
	width:12%;
}

.mddNav > ul > li:nth-child(8) > a {
	width:12%;
}

.mddNav > ul > li .visited a, {
	text-decoration: none;
	color:#000;
    background:#002248;
		text-decoration: none;
}

.mddNav > ul > li a:hover {
	text-decoration: none;
	color:#000;
background:#f0f0f0;
	opacity:1.0;
}

.mddNav > ul > li a:active {
	text-decoration: none;
	color:#000;
background:#f0f0f0;
}





.mddNav > ul > li.mddActive > a {
    background: #f0f0f0!important;
	color:#000;
}
 
.mddNav .mddWrap {
    top:76px;
    left: 0;
    width: 100%;
    padding:0 0 20px 0;
    text-align: center;
    background: #f0f0f0;
  border-bottom:solid 1px #ccc;
	 	-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.1);
box-shadow:0 2px 5px rgba(0,0,0,0.1);
    position: absolute;
    z-index:10;
    overflow: hidden;
    display: none;

}
 
.mddNav .mddWrap .mddInner {
    margin: 0 auto;
    padding:20px 0 0 0;
    width: 1000px;
    height:auto;
    line-height:1.6em;
    text-align: left;
}
 
 
.mddNav .mddWrap .mddInner > div:last-child {
    margin-right: 0;
    border-right: none;
}
 
.mddNav .mddWrap .mddInner > div > ul > li {
    margin:0 0.8% 0 0;
    display:inline-block;
    vertical-align:top;
        width:11.8%;
}


.mddNav .mddWrap .mddInner > div > ul > li:last-child {
    margin:0;
    display:inline-block;
        width:11.8%;

}
 



.mddNav .mddWrap .mddInner > div > ul > li img{
        width:100%;
	 	-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2);
}




 
.mddNav .mddWrap .mddInner > div > ul > li .hcap {
    font-size:13px;
    margin:0 0 0 0;
padding:6px 0 4px 0;
color:#fff;
text-align:center;
    line-height: 1.3em;
background:#d46b57;
border-radius: 0 0 5px 5px;         /* CSS3 */
	-moz-border-radius:0 0 5px 5px;    /* Firefox */
	-webkit-border-radius:0 0 5px 5px;
	 	-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
 
 
.mddNav .mddWrap .mddInner > div > ul > li .hcaps {
    font-size:11px;
    margin:0 0 0 0;
padding:6px 0 4px 0;
color:#fff;
text-align:center;
    line-height: 1.3em;
background:#d46b57;
border-radius: 0 0 5px 5px;         /* CSS3 */
	-moz-border-radius:0 0 5px 5px;    /* Firefox */
	-webkit-border-radius:0 0 5px 5px;
	 	-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
 

.mddNav .mddWrap .mddInner > div > ul > li a:link {
    text-decoration: none;
    color:#fff;
}

 .mddNav .mddWrap .mddInner > div > ul > li a:visited {
    text-decoration: none;
    color:#fff;
}

.mddNav .mddWrap .mddInner > div > ul > li a:hover {
    text-decoration: none;
    color:#fff;

}

 .mddNav .mddWrap .mddInner > div > ul > li a.active {
    text-decoration: none;
    color:#fff;

}

/* ------------------------------
   Clearfix Elements
------------------------------ */
.mddNav > ul:after {
    content: " ";
    display: block;
    clear: both;
}



.disnone{
display:none!important
}

.pcClass{
display:block
}


.mddWrap img{
border-radius: 5px 5px 0 0;         /* CSS3 */
	-moz-border-radius: 5px 5px 0 0;    /* Firefox */
	-webkit-border-radius: 5px 5px 0 0;


}




/**************************************************************************************************

スマホヘッダーナビ

**************************************************************************************************/
/*** PCでは表示しない箇所 ***/
#spHeaderNavi {
display:none;
}



/**************************************************************************************************

PANKUZU

**************************************************************************************************/

#pankuzuArea {
	width: 100%;
}



#pankuzuBox {
min-width:100%;
max-width:100%;
	margin:0 auto;
	text-align:left;
	color:#000;
	padding:40px 0 0 2%;
	font-size:13px;
	color:#333;
	line-height:1.2em;
	letter-spacing:.3px;
}


#pankuzuBox span{
color:#000;
padding:0 7px;
}



    
#pankuzuBox a{
    color:#000;
    text-decoration:none;
    }
  
 

#pankuzuBox a:visited{
    color:#000;
    text-decoration:none;
}

#pankuzuBox a:hover{
    color:#1a9ede;
    text-decoration:none;
}



#pankuzuBox a.active{
    color:#1a9ede;
    text-decoration:none;
}


#pankuzuArea img{
width:16px;
height:16px;
}






/**************************************************************************************************

コンテンツBOX

**************************************************************************************************/
.contentsBox{
width:100%;
margin:50px auto 100px auto;
}

.contentsBox p {
font-size:16px;
line-height:2.13em;

}

.box1200{
max-width:100%;
min-width:100%;
margin:0 auto;
padding:0 2%;
}

.box1000{
width:100%;
margin:0 auto;
padding:0 2%;
}


/**************************************************************************************************

MAINBOX

**************************************************************************************************/

#mainBox {
	width:76%;
	float:left;
}



/**************************************************************************************************

SUBBOX

**************************************************************************************************/

#subBox {
width:20%;
min-width:200px;
float:right;
}
/**************************************************************************************************

H1：第2階層共通

**************************************************************************************************/
.comH1Box{
color:#000;
font-weight:900;
line-height:1.5em;
margin:0 0 0 0;
position:relative;
}

.comH1Box .ttl{
position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
padding:20px 50px 20px 50px;
}


.comH1Box .roman{
font-size:13px;
color:#fff;
letter-spacing:2.0px;
font-weight:900;
text-align:center;
line-height:1.2em;
}


.comH1Box h1{
font-size:36px;
color:#fff;
font-weight:900;
text-align:center;
line-height:1.5em;
letter-spacing:2.0px;
margin:10px 0 0 0;
   font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}

.comH1Box img{
width: 100%;
height:220px;
  object-fit: cover;
}


/*** ノーマル（背景グレー） ***/
.subtitle h1{
color:#000;
width:100%;
background:#f0f0f0;
font-size:30px;
text-align:center;
font-weight:700;
letter-spacing:2.0px;
line-height:1.4em;
margin:0;
padding:40px 0;
   font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}




/**************************************************************************************************

TOPキービジュアル

**************************************************************************************************/
/* Main */

/*** スマホは非表示 ***/
#keyVisualSp{
display:none;
}

#keyVisualPc{
display:block;
min-width:100%;
height:100%;
margin:0 auto;
position:relative;

}


#keyVisualPc .keyBox{
background-color: rgba(255,255,255,0.8);
width:715px;
height:280px;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
          transform: translate(-50%, -50%);

position:absolute;
margin:0 auto;
}

#keyVisualPc .roman{
color:#003265;
font-size:14px;
width:100%;
font-weight:700;
position:absolute;
letter-spacing:1.5px;
text-align:center;
line-height:1.2em;
top:17%;
left:50%;
text-shadow: 1px 1px 0px #fff;

-webkit-transform: translateX(-50%);
-ms-transform:translateX(-50%);
          transform: translateX(-50%);
	  text-shadow: 1px 1px 0px #fff;
}

#keyVisualPc .catch{
color:#000;
font-size:26px;
width:100%;
font-weight:700;
color:#000;
position:absolute;
text-shadow: 1px 1px 0px #fff;
text-align:center;
line-height:1.4em;
top:30%;
left:50%;
-webkit-transform: translateX(-50%);
-ms-transform:translateX(-50%);
          transform: translateX(-50%);
	  text-shadow: 1px 1px 0px #fff;
}




  .slider {
    width:100%;
    margin:0 auto;
    background-size: cover
  }
  
    .slick-slide img {
    width:100%;

    height:auto;
  }

  .mypattern{
    width: 100%;
  }
  .mypattern .slick-slide{
    margin: 0;
  }



/**************************************************************************************************

TOP施工実績

**************************************************************************************************/

#topWorksArea{
max-width:100%;
min-width:100%;
display:block;
margin:0 auto;
padding:0 2% 100px 2%;
background:#fff;
}


/**************************************************************************************************

TOP事業案内

**************************************************************************************************/
#topServiceArea{
margin:0 auto;
width:100%;
background:#fff;
background: linear-gradient(#e8f8ff, #fff);
padding:50px 0 50px 0;
position:static;
}

#topServiceArea .serviceImg{
display:none;
position:absolute;
top:-30px;
left:0;
z-index:1;
}



#topServiceArea .imgBox {
max-width:100%;
min-width:100%;
margin:0 0 0 0;
float:none;
position:static;
z-index:3;
}


#topServiceArea h2 {
font-size:34px;
color:#002248;
line-height:1.4em;
text-shadow: 1px 1px 0px #fff;
margin:0 0 20px 3%;
}

#topServiceArea p.serviceTxt {
font-size:16px;
margin:10px 0 0 0;
line-height:1.6em;
text-align:left;
margin:0 3%;
}


#topServiceArea ul {
max-width:100%;
min-width:100%;
margin:30px auto 0 auto;
}



/**************************************************************************************************

TOPお客様の声

**************************************************************************************************/
#topVoiceArea{
width:100%;
background:#f6f2ef;
padding:60px 0 70px 0;
margin:0 0 50px 0;
}


#topVoiceArea ul {
max-width:100%;
min-width:100%;
margin:30px auto 0 auto;
}

#topVoiceArea ul li{
width:22.5%;
display:inline-block;
vertical-align:top;
margin:0 0 4% 2%;
}

#topVoiceArea ul li:nth-child(4n){
width:22.5%;
display:inline-block;
vertical-align:top;
margin:0 2% 0 2%;
}


/**************************************************************************************************

TOPお知らせ

**************************************************************************************************/
#topNewsBox{
margin:50px auto 0 auto;
width:100%;
padding:0 0 30px 0;
background:#fff;
}


#topNewsBox dl{
padding:0 0 35px 0;
margin:0 auto;
width:900px;
}

#topNewsBox dt.news{
width:90px;
text-align:center;
font-size:12px;
padding:4px 0;
line-height:1.2em;
background:#d46b57;
color:#fff;
display:inline-block;
vertical-align:middle;
}

#topNewsBox dt.recruit{
width:90px;
text-align:center;
font-size:12px;
padding:4px 0;
line-height:1.2em;
background:#369386;
color:#fff;
display:inline-block;
vertical-align:middle;
}


#topNewsBox dd{
width:790px;
font-size:16px;
line-height:1.5em;
padding:5px 0;
margin:0 0 0 20px;

display:inline-block;
vertical-align:middle;
}


/**************************************************************************************************

TOP採用情報

**************************************************************************************************/

#topRecruitBox{
margin:0 auto;
width:100%;
padding:50px 0 0 0;
background:#fff;
background: linear-gradient(#e8f8ff, #f8fcfe);
}


#topRecruitBox h3{
font-size:50px;
color:#002f8a;
line-height:1.3em;
font-weight:700;
font-family:"Century Gothic","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
margin:0 0 20px 0;
padding:0 0 0 0;
}


#topRecruitBox h4{
font-size:24px;
color:#003367;
line-height:1.5em;
font-weight:700;
margin:0 0 20px 0;
}

#topRecruitBox p{
font-size:16px;
color:#000;
line-height:1.7em;
margin:0 0 0 0;
}


#topRecruitBox .recruitContents{
max-width:100%;
min-width:100%;
display:block;
margin:0 auto;
}


/**************************************************************************************************

TOPSHOUEI 日記

**************************************************************************************************/
#topBlogArea{
width:100%;
background:#fff;
padding:60px 0 70px 0;

}


#topBlogArea h2 i{
margin:0 12px 0 0;
font-size:24px;
color:#003a72;
}

#topBlogArea p{
text-align:center;
font-size:16px;
}


#topBlogArea ul {
max-width:100%;
min-width:100%;
margin:30px auto 0 auto;
}

#topBlogArea ul li:nth-child(1){
width:20%;
display:inline-block;
vertical-align:top;
margin:0 5% 0 2.5%;
}

#topBlogArea ul li:nth-child(2){
width:20%;
display:inline-block;
vertical-align:top;
margin:0 5% 0 0;
}
#topBlogArea ul li:nth-child(3){
width:20%;
display:inline-block;
vertical-align:top;
margin:0 5% 0 0;
}
#topBlogArea ul li:nth-child(4){
width:20%;
display:inline-block;
vertical-align:top;
margin:0 2.5% 0 0;
}

#topBlogArea ul li h3 {
font-size:15px;
color:#000;
text-align:left;
line-height:1.5em;
}

#topBlogArea ul li p.day{
text-align:left;
font-size:11px;
margin:10px 0;
line-height:1.2em;
}


#topBlogArea ul li img{
width:100%;
}


#topBlogArea .btn a{
width:300px;
	font-size:15px;
	text-align:center;
	color:#002248;
	text-decoration: none;
border:solid 1px #002248;
margin:40px auto 0 auto;
	display: block;
	padding:16px 0;
	position:relative;
background:#fff;
}

#topBlogArea .btn .visited a, {
background:#fff;
}


#topBlogArea .btn a:hover {
background:#002248;
color:#fff;
	opacity:1.0;
	filter: alpha(opacity=100);
}

#topBlogArea .btn a:active {
color:#fff;
background:#002248;
	opacity:1.0;
	filter: alpha(opacity=100);
}

#topBlogArea .btn a:after{
font-family: "Font Awesome 5 Free";
content:'\f105';
position:absolute;
font-weight: 900;
font-size: 80%;
top:50%;
right:15px;
color:#002248;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
}

#topBlogArea .btn a:hover:after{
font-family: "Font Awesome 5 Free";
content:'\f105';
position:absolute;
font-weight: 900;
font-size: 80%;
top:50%;
right:15px;
color:#fff;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
}



/**************************************************************************************************

翔栄について

**************************************************************************************************/

.aboutArea{
width:100%;
background: #fff;
}


.aboutTxtBox{
min-width:100%;
max-width:100%;
margin:0 auto;
}

.aboutLeftBox{
background: linear-gradient(45deg, #eef6fc 0%, #eef6fc 30%, #fff 70%, #fff 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
padding:4% 2%;
}

.aboutRightBox{
background: linear-gradient(-45deg, #f5f5f5 0%, #f5f5f5 30%, #fff 70%, #fff 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
padding:2% 2% 4% 2%;
}





/**************************************************************************************************

企業情報

**************************************************************************************************/

/***************************
ご挨拶
***************************/
.msgArea{
width:100%;
padding:0 0 0 0;
}

.msgBox{
width:100%;
margin:0 auto;
padding:0 2%;
}

.msgBoxL{
float:left;
width:60%;
vertical-align:top;
}

.msgBoxR{
float:right;
width:38%;
vertical-align:top;
}



/***************************
経営理念・方針
***************************/


.policyBox{
width:100%;
margin:0 auto;
}


/***************************
工場
***************************/

.factoryBox{
width:100%;
margin:0 auto;
padding:0 2%;
}


.factoryBoxL{
float:left;
width:50%;
vertical-align:top;
}

.factoryBoxR{
float:right;
width:46%;
vertical-align:top;
}

.factoryBox table {
	width:100%;
	border-collapse:collapse;
}


/***************************
アクセス
***************************/

.accessBox{
width:100%;
margin:100px auto 0 auto;
padding:0 2%;
}

.accessBox ul li{
width:36%;
display:inline-block;
vertical-align:middle;
}

.accessBox ul li:nth-child(even){
width:60%;
display:inline-block;
vertical-align:middle;
}


/**************************************************************************************************

採用情報

**************************************************************************************************/
.recruitTxtBox{
margin:0 auto 60px auto;
padding:0 2%;
}


.staffArea ul {
max-width:100%;
min-width:100%;
margin:70px auto 0 auto;
}


/***************************
社員紹介
***************************/


.staffArea ul {
max-width:100%;
min-width:100%;
margin:70px auto 0 auto;
padding:0 2%;
}


/***************************
インタビュー
***************************/


.interviewArea ul {
min-width:100%;
max-width:100%;
margin:0 auto 0 auto;
padding:0 2%;
}

/***************************
社員の一日
***************************/

.onedayBox {
min-width:100%;
max-width:100%;
margin:0 auto 0 auto;
padding:0 2%;
}


.onedayIntro dl {
margin:0 auto 30px auto;
text-align:center;
}

.onedayIntro dl dt{
display:inline-block;
width:80px;
margin:0 10px 0 0;
vertical-align:middle;
}

.onedayIntro dl dd{ 
display:inline-block;
width:250px;
margin:0 0 0 0;
vertical-align:middle;
font-size:20px;
color:#004b95;
line-height:1.5em;
font-weight:700;
text-align:center;
margin:0;
}




/**************************************************************************************************

事業・サービス

**************************************************************************************************/


.serviceBox{
min-width:100%;
max-width:100%;
margin:0 auto;

}

.serviceLeftBox{
background: linear-gradient(45deg, #eef6fc 0%, #eef6fc 60%, #fff 40%, #fff 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
padding:4% 2%;
}

.serviceRightBox{
background: linear-gradient(-45deg, #f5f5f5 0%, #f5f5f5 60%, #fff 40%, #fff 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
padding:4% 2%;
}

.serviceBoxInner{
min-width:100%;
max-width:100%;
margin:0 auto;
}




/**************************************************************************************************

商品紹介

**************************************************************************************************/

.productBox{
min-width:100%;
max-width:100%;
margin:0 auto;
padding:0 2%;

}

.productBox ul {
width:100%;
margin:50px 0 0 0;
}



.normalTxtImg {
width:100%;
margin:0 auto;
}

.normalTxtImg dl dt{
width:100%;
margin:0 0 10px 0;
display:block;
vertical-align:top;
}

.normalTxtImg dl dd{
width:100%;
display:block;
vertical-align:top;
text-align:center;
padding:0 0 0 0;
}

.normalTxtImg dl dd img{
width:70%;
margin:0 0 0 0;
}

.normalTxtImg dl dd ul {
margin:0;
}


.normalTxtImg dl dd ul li{
display:block;
margin:0 0 10px 0;
width:100%;
vertical-align:top;
}

.normalTxtImg dl dd ul li:last-child{
display:block;
margin:0;
width:100%;
vertical-align:top;
}


.normalTxtImg dl dd p{
text-align:center;
margin:5px 0 20px 0;
}






/**************************************************************************************************

施工事例

**************************************************************************************************/

/*********************************/
/*** 一覧 ***/
/*********************************/
.worksBox, .worksOtherBox{
min-width:100%;
max-width:100%;
margin:0 auto;
padding:0 2%;
}

/*********************************/
/*** 詳細 ***/
/*********************************/


.workDetailArea {
min-width:100%;
max-width:100%;
margin:0 auto;
padding:0 2%;
}



/**************************************************************************************************

お客様の声

**************************************************************************************************/

.voiceArea{
width:100%;
padding:0 0 0 0;
background:#fff;
}


.voiceBox{
min-width:100%;
max-width:100%;
margin:0 auto 0 auto;
padding:0 2%;
}

.voiceBox ul li{
display:inline-block;
width:49%;
padding:2%;
margin:0 2% 2% 0;
border:solid 1px #ccc;
vertical-align:top;

}

.voiceBox ul li:nth-child(even){
margin:0 0 3% 0;
}

/***お客様の声詳細 ***/

.voiceDetailBox1000{
width:100%;
margin:0 auto;
padding:0 2%;
}

.voiceDetailBox1000 .staffVoiceBox{
width:100%;
margin:50px 0 0 0;
padding:3% 3% 2% 3%;
display:block;
position:relative;
background:#f6f2ef;
border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px;

}




/**************************************************************************************************

よくある質問

**************************************************************************************************/

.faqBox {
    width:100%;
margin:0 auto;
padding:0 2%;
}


.faqAccordion {
    width:100%;
}


/**************************************************************************************************

翔栄日記

**************************************************************************************************/
/*** 最新情報 ***/
.blogDetail{
width:100%;
margin:0 auto;
padding:0 2%;
}


/**************************************************************************************************

新着情報

**************************************************************************************************/
.newsDetail{
width:100%;
margin:0 auto 0 auto;
padding:0 2%;
}



/**************************************************************************************************

共通：次の記事、前の記事

**************************************************************************************************/
.pageNextBox{
min-width:100%;
max-width:100%;
padding:0 2%;
margin:50px auto 0 auto;
border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px;
}

.pageNextBox ul li{
font-size:16px;
float:left;
}

.pageNextBox ul li:last-child{
font-size:16px;
float:right;
}


/**************************************************************************************************

お問い合わせ
Contact

**************************************************************************************************/


.contactBox .telArea{
width:100%;
margin:40px auto 0 auto;
border:solid 1px #ccc;
padding:25px 0;
border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px;
}


#contact{
width:100%;
margin:0 auto 80px auto;

}


#contact form{
width:100%;
margin:0 auto;
}

#contact form dl dt{
padding:0;
font-size:17px;
line-height:1.4em;
font-weight:700;
text-align:left;
display:inline-block;
width:22%;
margin:0 0 0 0;
vertical-align:middle;
}


#contact form dl dd{
width:75%;
display:inline-block;
font-size:17px;
line-height:1.6em;
padding:0;
vertical-align:middle;
}







/**************************************************************************************************

共通：スタッフ紹介とご希望の連絡方法

**************************************************************************************************/
.comRenrakuArea{
width:100%;
height:auto;
display:block;
background:#f7f4f1;
padding:60px 2% 60px 2%;
}

.comRenrakuBox{
min-width:100%;
max-width:100%;
margin:0 auto;

}

.comRenrakuBox .telAreaSp{
display:none;
}


.comRenrakuBox .telArea{
width:600px;
display:block;
margin:40px auto 0 auto;:
}


.comRenrakuArea .btn i{
	font-size:110%;
margin:0 10px 0 0;
color:#003a72;
}


.comRenrakuArea .btn a:after{
font-family: "Font Awesome 5 Free";
content:'\f0e0';
position:absolute;
font-weight: 900;
font-size: 120%;
top:50%;
left:75px;
color:#002248;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
}

.comRenrakuArea .btn a:hover:after{
font-family: "Font Awesome 5 Free";
content:'\f0e0';
position:absolute;
font-weight: 900;
font-size: 120%;
top:50%;
left:75px;
color:#fff;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
}


/*************************************************************************************************

NONE

**************************************************************************************************/
.pcnone{
display:none;
}

.spnone{
display:block;
}

.br-sp { display:block; }

.br-pc { display:none; }



a[href^="tel:"] {
    pointer-events:none;
}



/**************************************************************************************************

PAGEUP

**************************************************************************************************/

.pagetop {
	display: none;
	position: fixed;
	bottom:154px;
	right: 50px;
	z-index:1000;
}

.pagetop a {
position:absolute;
	display: block;
	width: 50px;
	height: 50px;
	background-color: #002248;
	text-align: center;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	line-height: 50px;

}

.pagetop a:visited {
	color:#fff;
	text-decoration: none;
	background-color: #002248;
}
.pagetop a:hover {
	color:#fff;
	text-decoration: none;
	background-color: #00559f;
}
.pagetop a:active {
	color:#fff;
	text-decoration: none;
	background-color: #00559f;
}


.pagetop a:before{
font-family: "Font Awesome 5 Free";
content:'\f106';
 font-size: 0.6em;
position:absolute;
font-weight: 900;
font-size: 150%;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
          transform: translate(-50%, -50%);

}





/**************************************************************************************************

FOOTER

**************************************************************************************************/
footer{
	width:100%;
	margin:0 auto;
	padding:0;
	height:auto;
	background:#002656;
	text-align:center;
}


#footerInfoBox{
max-width:100%;
min-width:100%;
background:#002656;
padding:50px 0;
margin:0 auto;
}


/*** フッター左ロゴエリア ***/
#footerInfoBox #footerLogo{
display:inline-block;
width:20%;
margin:0 0 0 1%;
vertical-align:top;
}


#footerInfoBox #footerLogo p.addr{
font-size:11px;
color:#fff;

text-align:left;
line-height:1.4em;
margin:10px 0 18px 0;
}



/*** お問い合わせボタン ***/
#footerInfoBox #footerLogo .btn:last-child a{
width:170px;
	font-size:11px;
	vertical-align:middle;
margin:25px 0 0 0;
text-align:center;

	color:#fff;
	line-height:1.6em;
	text-decoration: none;
border:solid 1px #7f98b3;
	display: block;
	padding:12px 0;
background:#002656;
position:relative;
}

/*** フッター右メニューエリア ***/
#footerMenu{
text-align:left;
display:inline-block;
width:78%;
margin:0 1% 0 0
vertical-align:top;
}

#footerMenu ul {
margin:0 auto;
text-align:center;
}

#footerMenu ul li{
display:inline-block;
vertical-align:top;
text-align:left;
margin:0 7% 0 0;
}

#footerMenu ul li:last-child{
display:inline-block;
vertical-align:top;
text-align:left;
margin:0 0 0 0;
}


#footerMenu p.m{
font-size:15px;
margin:0 0 14px 0;
color:#fff;
position:relative;
padding:0 0 0 20px;
line-height:1.4em;
}

#footerMenu p.m:after{
font-family: "Font Awesome 5 Free";
content:'\f068';
position:absolute;
font-weight:900;
color:#fff;
font-size:50%;
top:50%;
left:3px;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
}

#footerMenu p.home{
font-size:16px;
margin:0 0 10px 0;
color:#000;
position:relative;
padding:0 0 0 20px;
line-height:1.4em;
}

#footerMenu p.home:after{
font-family: "Font Awesome 5 Free";
content:'\f015';
font-weight:900;
position:absolute;
color:#fff;
font-size:80%;
top:50%;
left:0;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
}

#footerMenu p{
font-size:13px;
font-weight:normal;
color:#000;
margin:0 0 10px 23px;
line-height:1.4em;
}


#footerMenu p a{
color:#fff;
	text-decoration: none;
}



#footerMenu p .visited a, {
color:#fff;
	text-decoration: none;
}

#footerMenu p a:hover {
  	opacity:0.8;
	filter: alpha(opacity=80);
}

#footerMenu p a:active {
  	opacity:0.8;
	filter: alpha(opacity=80);
}




/***  スマホフッターメニュー ***/

.footerSpSubMenu {
display:none;
}





}