@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;padding:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
}
ul{
	list-style:none;
}
table{
	border-collapse:collapse;border-spacing:0;
}
caption,th{
	text-align:left;
}
q::before,q::after{
	content:'';
}
object,embed{
	vertical-align:top;
}
legend{
	display:none;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
}
img,abbr,acronym,fieldset{
	border:0;
}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #fff;
	background: #080808;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{
	outline:0;
}


/* ヘッダー
------------------------------------------------------------*/
#header{
	text-align: center;
}

#header h1{
	padding-top: 60px;
}

#mainnav a{
	color: #fff;
}

#mainImg{
	position: relative;
  overflow: hidden;
  width: 100%;
  height: 528px;
}

#mainImg img{
	width: 100%;
	height: auto;
	margin-bottom: 80px;
}


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
}


/* 共通
------------------------------------------------------------*/

img{
	max-width: 100%;
	height: auto;
}

section{
	clear:both;
	padding-top: 70px;
}

section h2{
	font-family: 'Pacifico', cursive;
	width: 60%;
	margin: 0 auto 40px;
	font-size: 22px;
	font-weight:normal;
	text-align: center;
	background: url(../images/borderWhite.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

section h2 span{
	background: #000;
	padding: 0 80px;
}

.inner{
	width: 94%;
	margin: 0 auto;
	padding-bottom: 50px;
}

.innerS{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}





/*--------------------------------------------------------
  レイアウト設定
--------------------------------------------------------*/
.resizepicture40 img{
	width: 40%;
}
.resizepicture45 img{
	width: 45%;
}
.resizepicture50 img{
	width: 50%;
}
.resizepicture55 img{
	width: 55%;
}
.resizepicture60 img{
	width: 60%;
}
.resizepicture65 img{
	width: 65%;
}
.resizepicture70 img{
	width: 70%;
}
.resizepicture75 img{
	width: 75%;
}
.resizepicture80 img{
	width: 80%;
}
.resizepicture85 img{
	width: 85%;
}
.resizepicture90 img{
	width: 90%;
}
.resizepicture94 img{
	width: 94%;
}
.resizepicture95 img{
	width: 95%;
}
.resizepicture98 img{
	width: 98%;
}
.resizepicture100 img{
	width: 100%;
}
.resizepicture105 img{
	width: 105%;
}
.resizepicturemxwdt001 img{
	width: 100%;
	max-width: 1100px;
}
.resizepicturetop img{
	width: 80%;
	max-height: 85px;
	object-fit: contain;
}
.resizepicturemxwdt002 img{
	width: 100%;
	max-width: 800px;
}
.resizepicturemxwdt003 img{
	width: 97%;
}




.resizepicture30mmm img{
	width: 30%;
	max-width: 780px;
	min-width: 110px
;
}
.resizepicture40m img{
	width: 40%;
	max-width: 780px
;
}
.resizepicture40m img{
	width: 40%;
	max-width: 780px;
	min-width: 240px
;
}
.resizepicture40mm img{
	width: 40%;
	max-width: 380px;
	min-width: 190px
;
}
.resizepicture45m img{
	width: 45%;
	max-width: 780px
;
}
.resizepicture50m img{
	width: 50%;
	max-width: 780px
;
}
.resizepicture50mm img{
	width: 50%;
	min-width: 250px
	max-width: 380px
;
}
.resizepicture55m img{
	width: 55%;
	max-width: 780px
;
}
.resizepicture60m img{
	width: 60%;
	max-width: 780px
;
}
.resizepicture60mm img{
	width: 60%;
	max-width: 380px;
	min-width: 240px
;
}
.resizepicture60m360 img{
	width: 60%;
	max-width: 360px
;
}
.resizepicture65m img{
	width: 65%;
	max-width: 780px
;
}
.resizepicture70mcc img{
	width: 70%;
	max-width: 340px
;
}
.resizepicture75m img{
	width: 75%;
	max-width: 780px
;
}
.resizepicture80m img{
	width: 80%;
	max-width: 780px
;
}
.resizepicture80mm img{
	width: 80%;
	max-width: 700px
;
}
.resizepicture85m img{
	width: 85%;
	max-width: 780px
;
}
.resizepicture85mc img{
	width: 85%;
	min-width: 340px
	max-width: 340px
;
}
.resizepicture85mm img{
	width: 85%;
	max-width: 500px
;
}
.resizepicture90m img{
	width: 90%;
	max-width: 780px
;
}
.resizepicture90mkt img{
	width: 90%;
	max-width: 340px
	min-width: 480px
;
}
.resizepicture90mm img{
	width: 90%;
	max-width: 700px
;
}
.resizepicture90mmm img{
	width: 90%;
	max-width: 550px
;
}
.resizepicture94m img{
	width: 94%;
	max-width: 780px
;
}
.resizepicture95m img{
	width: 95%;
	max-width: 780px
;
}
.resizepicture95mm img{
	width: 95%;
	max-width: 550px
;
}
.resizepicture98m img{
	width: 98%;
	max-width: 780px
;
}
.resizepicture100m img{
	width: 100%;
	max-width: 780px
;
}
.resizepicture100mm img{
	width: 100%;
	max-width: 180px;
	min-width: 110px
;
}
.resizepicture100mc img{
	width: 100%;
	max-width: 820px
;
}
.resizepicture105m img{
	width: 105%;
	max-width: 780px
;
}
.resizepicture100mmcr img{
	width: 100%;
	max-width: 300px;
	min-width: 150px
;
}
.resizepicture90stp img{
	width: 90%;
	max-width: 620px;
}
















.responsive_column_outer_wrapper{
	width:100%;
height:100%;
margin:0;
}

.responsive_column_header{
	width:100%;
height: auto;
background:#dcdcdc;
}
.responsive_column_wrapper{
display:flex;
}

.responsive_column_left,.responsive_column_right{
	height: auto;
width:50%;
}

.responsive_column_left{
	background:#00ffff;
}

.responsive_column_right{
	background:#7fffd4;
	border-radius: 12px;
}

.responsive_column_footer{
	width:100%;
height:50px;
background:#000;
color:#fff;
}

@media screen and (max-width:768px){
.responsive_column_header{
	width:100%;
height:50px;
background:#dcdcdc;
}
.responsive_column_wrapper{
	display:block; /*カラム毎に改行させる*/
}

.responsive_column_left,.responsive_column_right{
	height: auto;
width:100%; /*横サイズを画面いっぱいに表示*/
}

.responsive_column_left{
	background:#00ffff;
}

.responsive_column_right{
	background:#7fffd4;
}

.responsive_column_footer{
	width:100%;
height: auto;
background:#000;
color:#fff;
}
}







/* 2カラム */
*, *::before, *::after{
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_2 > div{
	width: 50%;
}
@media screen and (max-width: 640px) {
	.col_2 > div{
		width: 100%;
	}
}




/* 2カラム */　② *, *::before, *::after{
	box-sizing: border-box;
}
.col_0002{
	width: 100%;
	max-height: 100px;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	background-color: #000000; /* 背景の色 */
text-align: center; /* 内容は中央配置 */
}
.col_0002 > div{
	width: 50%;
}
@media screen and (max-width: 640px) {
	.col_0002 > div{
		width: 100%;
	}
}







/* 2カラム 2ver*/
*, *::before, *::after{
	box-sizing: border-box;
}
.col_02{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_02 > div{
	width: 50%;
	padding: 0px;
}
@media screen and (max-width: 640px) {
	.col_02 > div{
		width: 100%;
	}
}






/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    max-width: 960px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.card-figure {
    margin: 0;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.6em 0 0;
    color: #333;
    text-align: center;
    font-size: 1.8em;
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
    margin: 0;
    padding: 1em;
    color: #818181;
}

/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 0.5em auto;
    padding: 0;
    width: 96%;
    background: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 画面幅268px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 268px) {
    .card-list {
        margin: 0.5em 0;
        width: calc(96% / 2); /* 96%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-list {
        width: calc(96% / 3); /* 96%幅を3で割るという指定 */
}
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(96% / 3);
    }
}







.flex-sample{
  display: flex;
  width: auto;
}
.flex-sample .item1 {
  flex: 1;
}
.flex-sample .item2 {
  flex: 0 0 100px;
}










/* 4カラム */
*, *::before, *::after{
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_4 > div{
	width: 25%;
	padding: 3px;
}
@media screen and (max-width: 1090px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
	}
}





/* 4カラム② */
*, *::before, *::after{
	box-sizing: border-box;
}
.col_42{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: transparent; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_42 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 867px) {
	.col_42 > div{
		width: 50%;
	}
}








/* 5カラム */
*, *::before, *::after{
	box-sizing: border-box;
}
.col_5{
	width: 100%;
	max-width: 1024px;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_5 > div{
	width: 20%;
	padding: 5px;
}
@media screen and (max-width: 1090px) {
	.col_5 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 50%;
	}
}
















#contents{
  width: 90%;
  display: flex;

}
#main{
  max-width: 800px;
  flex: 1;
}
#sub{
  width: 200px; /*幅指定*/
}

@media screen and (max-width: 767px) {
  #contents{
    width: 90%;
    display: block;
  }
  #main{
    max-width: 100%;
  }
  #sub{
    width: 100%;
  }
}










/* table01 */
#table01 tr{
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td{
  padding: 24px 0;
  border: none;
}

#table01 th{
  width: 30%;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td{
    width: 100%;
    display: block;
  }

  #table01 th{
    width: 100%;
  }

  #table01 td{
    padding-top: 0;
  }
}





.design10{
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
   max-width: 870px;
}
.design10 th{
 padding: 0px;
 border-bottom: solid 0px #778ca3;
 color: #778ca3
;
}
.design10 td{
 padding: 0px;
 border-bottom: solid 0px #778ca3;
}
















メイン画像レスポンシブ２ .column{
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-right: 40px;
  margin-bottom: 40px;
  margin-left: 40px;
  background: #D1E1E8;
}
.column-img{
  width: 40%;
}
.column-img img{
  width: 100%;
}
.column-texts{
  box-sizing: border-box;
  padding-top: 40px;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 30px;
  width: 60%;
}
.column-texts-title{
  margin: 0;
  font-size: 32px;
}
.column-texts-p{
  margin: 0;
  padding-top: 20px;
  font-size: 22px;
  line-height: 1.4;
}
.column-texts-link{
  padding-top: 30px;
}
.column-texts-link a{
  border: 1px solid #000;
  padding-top: 12px;
  padding-right: 40px;
  padding-bottom: 12px;
  padding-left: 40px;
  font-size: 20px;
  text-decoration: none;
  color: #000;
}





メイン画像レスポンシブ３


/* ２カラム */
.twocols{
    padding: 100px 0;
    background-color: #f3f1ed;
}

.twocols-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
}

@media (min-width: 900px) {
  .twocols-container{
    grid-template-columns: 10fr 7fr;
  }
}

/* 横幅と左右の余白 */
.w-container{
  width: min(99%, 1460px);
  margin: auto;
}

/* カラム内のボックス */
.col div{
  display: grid; 
  place-items: center;
  font-size: 20px;
  border-radius: 4px;
}
.col:first-child div{
  background:#F9CDE2;
}
.col:last-child div{
  background:#FFDBAC;
}









メイン画像レスポンシブ４


/* ２カラム(★ＰＡＲＴ２) */
.twocols2{
    padding: 100px 0;
    background-color: #f3f1ed;
}

.twocols2-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
}

@media (min-width: 900px) {
  .twocols2-container{
    grid-template-columns: 10fr 7fr;
  }
}

/* 横幅と左右の余白 */
.w-container2{
  width: min(99%, 1240px);
  margin: auto;
}

/* カラム内のボックス */
.col div{
  display: grid; 
  place-items: center;
  font-size: 20px;
  border-radius: 12px;
}
.col:first-child div{
  background:#F9CDE2;
}
.col:last-child div{
  background:#FFDBAC;
}












メイン画像レスポンシブ５テスト


/* ２カラム(★ＰＡＲＴ３) */
.twocols3{
    padding: 100px 0;
    background-color: #f3f1ed;
}

.twocols3-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
}

@media (min-width: 900px) {
  .twocols3-container{
    grid-template-columns: 7fr 7fr;
  }
}

/* 横幅と左右の余白 */
.w-container3{
  width: min(99%, 1240px);
  margin: auto;
}

/* カラム内のボックス */
.col div{
  display: grid; 
  place-items: center;
  font-size: 20px;
  border-radius: 12px;
}
.col:first-child div{
  background:#F9CDE2;
}
.col:last-child div{
  background:#FFDBAC;
}






メイン画像レスポンシブ５テスト②


/* ２カラム(★ＰＡＲＴ３) */
.twocols5{
    padding: 100px 0;
    background-color: #f3f1ed;
}

.twocols5-container5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
}

@media (min-width: 900px) {
  .twocols5-container5{
    grid-template-columns: 11fr 5fr;
  }
}

/* 横幅と左右の余白 */
.w-container5{
  width: min(99%, 1240px);
  margin: auto;
}

/* カラム内のボックス */
.col div{
  display: grid; 
  place-items: center;
  font-size: 20px;
  border-radius: 0px;
}
.col:first-child div{
  background:#F9CDE2;
}
.col:last-child div{
  background:#FFDBAC;
}





背景画像 .back{
	width: 100%;
height: 900px;
background-image: url("../backpic01.jpg");
} 

.back{
	width: 100%;
height: 900px;
background-image : url(/css/css/css/backpic01.jpg);
} 

.back{
	width: 100%;
height: 900px;
background-image : url(/css/css/css/backpic01.jpg);
} 










余白 .container001{
  margin: 0 auto; /* 水平方向のmarginをautoに */
  max-width: 1040px;
}









２カラム８ .main{
  background: #fcc;
  margin-bottom: 10px;
}
.side{
  background: #fea;
}
.main,
.side{
  padding: 2%;
  border-radius: 10px
;
}
 
/* Responsive */
@media ( min-width : 600px ){
    .flexbox {
      display: -webkit-flex;
      display: flex;
    }
  .main{
    margin: 0 10px 0 0;
  }
}









ふわっ１

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(28px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-28px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-28px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(28px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}











レイアウト４ 
.flex{
  display:flex;
  flex-wrap: wrap;}

.box4{
  width: auto;
  max-height: 650px;
    background-image: url(../repair1.jpg);
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 150px 0px 150px;
}

@media screen and (max-width: 867px) {
.box4{
  width: auto;
    background-image: url(../repair1sm.jpg);
    background-size: cover;
    padding: 0px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}








レイアウト６ 
.flex{
  display:flex;
  flex-wrap: wrap;}

.box6{
  width: auto;
  max-height: 2050px;
  max-width: 960px;
  margin: 0 auto; 
    background-image: url(../repair1.jpg);
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
}

@media screen and (max-width: 867px) {
.box6{
  width: auto;
    background-image: url(../repair1sm.jpg);
    background-size: cover;
    padding: 0px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}






レイアウト７
.flex{
  display:flex;
  flex-wrap: wrap;}

.box7{
  width: auto;
  max-height: 1200px;
  max-width: 1400px;
  margin: 0 auto; 
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
}

@media screen and (max-width: 867px) {
.box7{
  width: auto;
    padding: 0px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}







レイアウト８
.flex{
  display:flex;
  flex-wrap: wrap;}

.box8{
  width: auto;
  max-height: 1050px;
    background-image: url(../back2.jpg);
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 17% 0px 17%;
}

@media screen and (max-width: 867px) {
.box8{
  width: auto;
    background-image: url(../back2sm.jpg);
    background-size: cover;
    padding: 0 26px 0px 26px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}





レイアウト９
.flex{
  display:flex;
  flex-wrap: wrap;}

.box9{
  width: auto;
  max-height: 200px;
    background-image: url(../tellunder.webp);
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5px 18% 0px 18%;
}

@media screen and (max-width: 867px) {
.box9{
  width: auto;
  max-height: 222px;
    background-image: url(../tellundersm.webp);
    background-size: cover;
    padding: 4px 0% 0px 0%;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}





レイアウト１５
.flex{
  display:flex;
  flex-wrap: wrap;}

.box15{
  width: auto;
  max-height: 1050px;
    background-image: url(../anshinback.webp);
    background-size: 1370px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 17% 0px 17%;
}

@media screen and (max-width: 867px) {
.box15{
  width: auto;
    background-image: url(../anshinback.webp);
    background-size: cover;
    padding: 0 26px 0px 26px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}






レイアウト３

.flex{
  display:flex;
  flex-wrap: wrap;
}
.box3{
  width: auto;
  padding: 50px 160px 50px 160px;
    background-image: url(../backimage1.webp);
    background-size: cover;
}

@media screen and (max-width: 867px) {
.box3{
  width: auto;
  padding: 4px;
    background-image: none;
    background-color: #dbc898;
    background-size: cover;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}







レイアウト７
.flex{
  display:flex;
  flex-wrap: wrap;}

.box14{
  width: auto;
  max-height: 1200px;
  max-width: 1400px;
  margin: 0 auto; 
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
}

@media screen and (max-width: 867px) {
.box14{
  width: auto;
    padding: 0px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}









レイアウト５

.flex{
  display:flex;
  flex-wrap: wrap;
}
.box5{
  width: auto;
  padding: 50px 160px 50px 160px;
    background-image: url(../backimage1.jpg);
    background-size: cover;
}

@media screen and (max-width: 867px) {
.box5{
  width: auto;
  padding: 4px;
    background-image: none;
    background-color: #dbc898;
    background-size: cover;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}






レイアウト１０
.flex{
  display:flex;
  flex-wrap: wrap;}

.box10{
  width: auto;
  max-height: 650px;
    background-image: url(../repair1.jpg);
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 240px 0px 240px;
}

@media screen and (max-width: 867px) {
.box10{
  width: auto;
    background-image: url(../repair1sm.jpg);
    background-size: cover;
    padding: 0px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}




レイアウト１１
.flex{
  display:flex;
  flex-wrap: wrap;}

.box11{
  width: auto;
  max-height: 650px;
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 240px 0px 240px;
}

@media screen and (max-width: 867px) {
.box11{
  width: auto;
    background-size: cover;
    padding: 0 8px 0px 8px;
}
  box-sizing: content-box;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing:border-box;
}





スマホ画像ＰＣ画像切替 .img-sp{
    display: none;
}

@media screen and (max-width:560px) {
    .img-pc{
        display: none;
    }

    .img-sp{
        display: block;
    }
}









/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: auto;
  padding: 50px 130px 50px 130px;
    background-image: url(../subImg.jpg);
    background-size: cover;
}

@media screen and (max-width: 867px) {
.box{
  width: auto;
  padding: 10px;
    background-image: url(../subImg.jpg);
    background-size: cover;
}

.box02{
  width: auto;
  padding: 60px;
    background-image: url(../subImg.jpg);
    background-size: cover;
}
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}












フォーム


@charset "utf-8";


/* -- form#mail_form, dl, dt, dd -------------------------------------------------------------------------------- */

form#mail_form * {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}

form#mail_form{
	width: 1000px;
	margin: 50px auto;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 7px;
	box-shadow: 0 0 7px rgba( 0, 0, 0, 0.2 );
	line-height: 1.8;
}

form#mail_form dl{
	width: 90%;
	margin: 0 auto;
	border-bottom: 1px solid #cccccc;
}

form#mail_form dl::after,
form#mail_form dl dt::after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

form#mail_form dl dt{
	width: 30%;
	float: left;
	padding: 35px 0 25px;
	text-align: right;
}

form#mail_form dl dd{
	width: 65%;
	float: right;
	padding: 30px 0 25px 5%;
}

form#mail_form dl dt i{
	float: left;
	position: relative;
	top: -2px;
}




/* -- span.required, span.optional -------------------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{
	display: none;
}

form#mail_form dl dt span.required{
	background: #d9534f;
	border: 1px solid #d43f3a;
}

form#mail_form dl dt span.optional{
	background: #337ab7;
	border: 1px solid #2e6da4;
}




/* -- error message -------------------------------------------------------------------------------- */

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match{
	display: block;
	color: #ff0000;
	margin-top: 5px;
}




/* -- loading -------------------------------------------------------------------------------- */

div.loading-layer{
	width: 100vw;
	height: 100vh;
	background: rgba( 0, 0, 0, 0.7 );
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 10000;
}

span.loading{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}




/* -- input, select, textarea -------------------------------------------------------------------------------- */

form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"]{
	width: calc( 100% - 4% - 2px );
	padding: 7px 2%;
	border: 1px solid #cccccc;
	border-radius: 3px;
	background: #fafafa;
	-webkit-appearance: none;
	font-size: 16px;
	font-family: inherit;
	line-height: normal;
}

form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus{
	box-shadow: 0px 0px 5px #55ccff;
	border: 1px solid #55ccff;
	background: #ffffff;
}

form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"]{
	margin: 0 10px 0 0;
}

form#mail_form select{
	padding: 7px 2%;
	border: 1px solid #cccccc;
	font-size: 16px;
	font-family: inherit;
	line-height: normal;
}

form#mail_form textarea{
	display: block;
	width: calc( 100% - 4% - 2px );
	height: 200px;
	padding: 7px 2%;
	resize: vertical;
	border: 1px solid #cccccc;
	border-radius: 3px;
	background: #fafafa;
	-webkit-appearance: none;
	font-size: 16px;
	font-family: inherit;
	line-height: normal;
}




/* -- ul, li -------------------------------------------------------------------------------- */

form#mail_form ul{
	list-style-type: none;
}

form#mail_form ul li label{
	display: block;
	margin-top: 10px;
	padding: 7px 2%;
	border-radius: 3px;
	background: #f0f0f0;
}

form#mail_form ul li:first-child label{
	margin-top: 0px;
}

form#mail_form ul li label:hover{
	cursor: pointer;
	background: #e0e0e0;
}




/* -- input design -------------------------------------------------------------------------------- */

form#mail_form input[name="company"]{
	width: 70%;
}

form#mail_form input[name="name_1"],
form#mail_form input[name="name_2"],
form#mail_form input[name="read_1"],
form#mail_form input[name="read_2"],
form#mail_form input[name="postal"],
form#mail_form input[name="phone"],
form#mail_form input[name="schedule"]{
	width: 30%;
}

form#mail_form input[name="mail_address"],
form#mail_form input[name="mail_address_confirm"]{
	width: 80%;
}

form#mail_form input[name="postal"] + a{
	display: inline-block;
	padding: 7px 20px;
	border: 1px solid #46b8da;
	border-radius: 3px;
	background: #5bc0de;
	font-size: 16px;
	line-height: normal;
	color: #ffffff;
	text-decoration: none;
}

form#mail_form input[name="postal"] + a:hover{
	cursor: pointer;
	background: #31b0d5;
	border: 1px solid #269abc;
}




/* -- button -------------------------------------------------------------------------------- */

form#mail_form p#form_submit{
	width: 90%;
	margin: 0 auto;
	padding: 30px 0;
}

form#mail_form input[type="button"]{
	padding: 7px 20px;
	border: 1px solid #4cae4c;
	border-radius: 3px;
	background: #5cb85c;
	font-size: 16px;
	color: #ffffff;
	font-family: inherit;
	-webkit-appearance: none;
}

form#mail_form input[type="button"]:hover{
	cursor: pointer;
	background: #449d44;
	border: 1px solid #398439;
}

form#mail_form input[type="button"]{
	margin-left: 35%;
}








/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */

/* 1000pixel start */
@media screen and ( max-width: 1000px ) {


/* -- form#mail_form, dl, dt, dd -------------------------------------------------------------------------------- */

form#mail_form{
	width: 95%;
	font-size: 100%;
}

form#mail_form dl dt{
	width: auto;
	float: none;
	padding: 25px 0 10px;
	text-align: left;
	font-weight: bold;
}

form#mail_form dl dd{
	width: auto;
	float: none;
	padding: 0px 0 20px 0px;
}

form#mail_form dl dt i{
	float: none;
	position: static;
	font-weight: normal;
}




/* -- span.required, span.optional -------------------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{
	margin: 0 15px 0 0;
}




/* -- input design -------------------------------------------------------------------------------- */

form#mail_form input[name="phone"],
form#mail_form input[name="schedule"]{
	width: 60%;
}




/* -- button -------------------------------------------------------------------------------- */

form#mail_form p#form_submit{
	padding: 25px 0;
}

form#mail_form input[type="button"]{
	margin-left: 0;
}


}
/* 1000pixel end */













文字フォント .font001{
	  
    font-size: 16px;
    font-family: "ＭＳ ゴシックS";
}
.font002{
	font-family: 'ＭＳ ゴシックS';
padding-bottom : 10px ;
}
.font003{
	font-family: 'AR Pゴシック体S';
}


画面の大きさでフォントサイズが変わる .tag{
	font-size: 18px;
 font-family: "ＭＳ ゴシックS";
width: 450px;
padding: 15px 5px;
background: #f5f5f5;
}
@media (max-width: 999px) {
.tag{
	font-size: 14px;
}
} 






.txt1{
  font-size: 3vw;
}
.txt2{
  font-size: 4vh;
}
.txt3{
  font-size: clamp(3px, 3.2vw, 38px);
  font-family: 'ＭＳ ゴシックS';
}
.txt4{
  font-size: clamp(5px, 4vw, 55px);
  font-family: 'AR Pゴシック体S';
}
.txt5{
  font-size: 8vmin;
  font-family: 'AR Pゴシック体S';
}


.txt6{
  font-size: 32px;
  font-size: clamp(27px,3.2vw,32px);
  font-family: 'AR Pゴシック体S';
  text-shadow:
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);
}
@media (max-width: 867px) {
.txt6{
  font-size: 25px;
  font-size: clamp(25px,4vw,30px);
  font-family: 'AR Pゴシック体S';
  text-shadow:
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);
      }
}


.txt7{
  font-size: 15px;
  font-size: clamp(18px,8vw,25px);
  font-family: 'AR Pゴシック体S';
}
@media (max-width: 867px) {
.txt7{
  font-size: 11px;
  font-size: clamp(11px,4vw,15px);
  font-family: 'AR Pゴシック体S';
      }
}


.txt8{
  font-size: 40px;
  font-size: clamp(24px,3vw,46px);
  font-family: 'AR Pゴシック体S';
}
@media (max-width: 867px) {
.txt8{
  font-size: 21px;
  font-size: clamp(18px,3vw,22px);
  font-family: 'AR Pゴシック体S';
      }
}




.txt9{
  font-size: 15px;
  font-size: clamp(18px,8vw,25px);
  font-family: 'AR Pゴシック体S';
}
@media (max-width: 867px) {
.txt9{
  font-size: 11px;
  font-size: clamp(11px,4vw,15px);
  font-family: 'AR Pゴシック体S';
      }
}


.txt10{
  font-size: 15px;
  font-size: clamp(18px,8vw,25px);
  font-family: 'AR Pゴシック体S';
}
@media (max-width: 667px) {
.txt10{
  font-size: 11px;
  font-size: clamp(11px,4vw,15px);
  font-family: 'AR Pゴシック体S';
      }
}



.txt11{
  font-size: 50px;
  font-size: clamp(27px,3.3vw,50px);
  font-family: 'AR Pゴシック体S';
}
@media (max-width: 867px) {
.txt11{
  font-size: 25px;
  font-size: clamp(24px,4vw,30px);
  font-family: 'AR Pゴシック体S';
      }
}



.txt12{
  font-size: 40px;
  font-size: clamp(36px,4vw,60px);
  font-family: 'AR Pゴシック体S';
  text-shadow:
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);
}
@media (max-width: 867px) {
.txt12{
  font-size: 25px;
  font-size: clamp(25px,4vw,30px);
  font-family: 'AR Pゴシック体S';
  text-shadow:
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);
      }
}



.txt13{
  font-size: 14px;
  font-size: clamp(15px,7vw,21px);
  font-family: 'ＪＳＰゴシック';
}
@media (max-width: 867px) {
.txt13{
  font-size: 11px;
  font-size: clamp(11px,4vw,15px);
  font-family: 'ＪＳＰゴシック';
      }
}




.txt14{
  font-size: 45px;
  font-size: clamp(35px,4vw,46px);
  font-family: 'AR Pゴシック体S';
  text-shadow:
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);
}
@media (max-width: 867px) {
.txt14{
  font-size: 25px;
  font-size: clamp(25px,4vw,30px);
  font-family: 'AR Pゴシック体S';
  text-shadow:
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);
      }
}



.txt15{
  font-size: 17px;
  font-size: clamp(18px,8vw,21px);
  font-family: 'ＪＳＰゴシック';
}
@media (max-width: 867px) {
.txt15{
  font-size: 15px;
  font-size: clamp(15px,5vw,19px);
  font-family: 'ＪＳＰゴシック';
      }
}




.txt16{
  font-size: 14px;
  font-size: clamp(12px,4vw,16px);
  font-family: 'ＪＳＰゴシック';
  line-height: 1.2em;
}
@media (max-width: 867px) {
.txt16{
  font-size: 11px;
  font-size: clamp(11px,4vw,15px);
  font-family: 'ＪＳＰゴシック';
      }
}




.txt17{
  font-size: 40px;
  font-size: clamp(24px,3vw,46px);
  font-family: 'AR Pゴシック体S';
  color: #000;
  line-height: 1.3em;
 text-shadow: 
3px 3px 0px #ffffff, 
-3px -3px 0px #ffffff, 
-3px 3px 0px #ffffff, 
3px -3px 0px #ffffff, 
3px 0px 0px #ffffff, 
-3px 0px 0px #ffffff, 
0px 3px 0px #ffffff, 
0px -3px 0px #ffffff, 
#fff 1px 0 10px;
}
@media (max-width: 867px) {
.txt17{
  font-size: 21px;
  font-size: clamp(18px,3vw,22px);
  font-weight: bold;
  font-family: 'AR Pゴシック体S';
  color: #000;
  line-height: 1.3em;
  color: #000;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
    0 0 90px rgba(240, 234, 213, 0.5),
    0 0 6px rgba(255, 255, 255, 0.4);
      }
}





改行位置 spanpl{
  display: inline-block;
}




.pc{
  display: block;
}
@media not all and (min-width: 568px){
.sp{
	display: block;
      }
}




枠最大サイズ
.element1{
  max-width: 500px;
  padding: 30px;
  border: 10px solid #ccc;
  box-sizing: border-box;
}




.sample11{
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
 }
@media (max-width: 867px) {
.sample11{
  margin: 7px;
  height: auto;
      }
}


/* SEC02 Gallery
------------------------------------------------------------*/
#sec02{
	padding: 0 !important;
}

#sec02 header{
	display: none;
}

#gallery li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}

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


/* SEC03 PROJECT
------------------------------------------------------------*/
#sec03 img{
	width: 100%;
	margin-bottom: 30px;
}


/* SEC04 BRAND
------------------------------------------------------------*/
.col3 img{
	display: block;
	margin: 0 auto 5px;
}

.col3 li{
	line-height: 2.0;
}

.col3 .img{
	padding: 80px 50px;
	margin-bottom: 40px;
	line-height: 0 !important;
	background: #f6f6f6;
}

#sec04_02{
	background: url(../images/bgSec04.jpg) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	text-align: center;
	padding: 220px 20px;
}

#sec04_02 img{
	width: auto;
}


/* SEC05 COMPANY
------------------------------------------------------------*/
#sec05 p{
	margin-bottom: 5px;
}

.col2 li{
	display: inline-block;
	width: 100%;
	margin: 20px 0;
}

#sns img{
	padding: 35px 10px 5px 0;
}

#sns a:hover img{
	opacity: .8;
}

#map{
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
	z-index: 0;
}

#map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}



/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 1200px){
	.inner{
		width: 1024px;
	}
}

@media only screen and (min-width: 800px){
	body{
		font-size:14px;
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#mainnav li{
		display: inline-block;
		padding: 50px 25px;
		font-size: 15px;
	}
	
	
	/* SEC03 PROJECT
	-----------------*/
	.col3{
		text-align: center;
	}

	.col3 li{
		display: inline-block;
		width: 28%;
		padding: 0 2.5% 50px;
		margin-bottom: 0;
		vertical-align: top;
		text-align: left;
	}
	
  #footer{
		padding: 30px 10px 70px 0;
	}
}


@media only screen and (min-width: 641px){
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 35%;
		padding-right: 4%;
	}
}

@media only screen and (max-width: 640px){
	.innerS{
		width: 94%;
		padding-bottom: 70px;
	}
	.col3 li{
		line-height: 1.7;
	}
	.col3 img{
		margin: 0 auto;
	}
	.col3 .img{
		padding: 30px;
		margin-bottom: 20px;
	}
	#gallery li{
		float: none;
		width: 100%;
	}
	#map iframe{
		width: 96% !important;
		left: 2%;
	}
	#sec04_02{
		padding: 50px 20px;
	}
}

@media only screen and (max-width: 799px){
	#header{
		width: 100%;
		z-index: 500;
	}
	
	#headerWrap{
		position: relative;
		width: 100%;
		background: #000;
	}
	
	#header h1{
		padding-top: 10px;
	}
	
	#header h1 img{
		margin-top: 3px;
		max-height: 45px;
		width: auto !important;
	}

  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 60%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #fff;
  	transition: .2s;
	}

	#menuBtn::before, #menuBtn::after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #fff;
  	transition: .3s;
	}

	#menuBtn::before{
  	margin-top: -7px;
	}

	#menuBtn::after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close::before, a#menu .close::after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: 0;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: #000;
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		color: #fff;
		font-weight: 400;
	}

	#mainnav li a::before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#mainImg{
		padding-top: 60px;
		z-index: -100;
	}
	.col3 li{
		margin: 50px auto 0 auto;
		display: block;
	}
	section{
		padding-top: 50px;
	}
	section h2{
		margin: 0 auto 20px;
	}
	section h2 span{
		padding: 0 30px;
	}
}