@charset "utf-8";


/*====================================================================
 Float Clearing
====================================================================*/
#mvWrap::after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
}


/*====================================================================
 hasLayout Swicth
====================================================================*/
#mvWrap{
	zoom:1;
}


/*====================================================================
 index
====================================================================*/

/* mv
--------------------------------------- */
#mv{
margin:0 auto;
width:960px;
height: 700px;
position:relative;
background:#fff;
}
#mvWrap #logo{
	width:960px;
	height:700px;
	z-index:100;
	position: absolute;
}
#mvWrap #hdgh1{
	width:100%;
	z-index:200;
	position: absolute;
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
	color: #212845;
	text-align: center;
	font-size: 1.85em;
	line-height: 1.2;
	font-family: 'Noto Serif JP', serif;
	text-shadow:0px 0px 5px #FFF; /* #848A87 */
	/* text-shadow:0px 0px 12px #939996, 0px 0px 12px #939996, 0px 0px 12px #939996, 0px 0px 12px #939996, 0px 0px 12px #939996, 0px 0px 10px #939996, 0px 0px 10px #939996, 0px 0px 10px #939996, 0px 0px 5px #939996, 0px 0px 5px #939996, 0px 0px 5px #939996, 0px 0px 3px #939996, 0px 0px 3px #939996;
	filter: glow(Color=#939996,Strength=10); */
}
#mvWrap #hdgh1 .fontBig{
	font-size: 200%;
	font-family: "Arial Black", Gadget, "sans-serif";
	font-weight: bold;
	/* letter-spacing: 0.05em; */
}
#mvWrap #hdgh1 .br::before {
	content: "\A" ;
  white-space: pre ;
}
div#slideshow{
	width: 2000px;
	height: 700px;
	overflow:hidden;
	position:absolute;
	top: 0;
	left: -520px;
}
div#slideshow img{
	height:700px;
	position:absolute;
}
div#slideshow img#f-img{z-index:3;}

/* スマホ用 */
div#mv img {
max-width : 100% ;
height : auto ;
}

/* main#mainContent
--------------------------------------- */
main#mainContent{
width: 100%;
background: #FFF;
}
main#mainContent div.mainWrap{
border-top: #71D7FF solid 5px;
}

/*  textureWrap
---------------------------------------*/
main#mainContent div.textureWrap{
width: 100%;
overflow: hidden;
background: url(images/texturewrap-bg.jpg) bottom left repeat-x;
}
main#mainContent div.textureInner{
width:960px;
min-height: 124px;
margin: 0 auto;
}
main#mainContent div.textureInner.person01{
background: url(images/texturewrap-person-01.png) bottom center no-repeat;
}
main#mainContent div.textureInner.person02{
background: url(images/texturewrap-person-02.png) bottom center no-repeat;
}
main#mainContent div.textureInner.person03{
background: url(images/texturewrap-person-03.png) bottom center no-repeat;
}

/*  contentWrap
---------------------------------------*/
main#mainContent div.contentWrap{
width: 100%;
overflow: hidden;
padding-top: 60px;
}
main#mainContent div.contentWrap.texture{
background: url(images/contentwrap-bg.jpg) top left repeat-x;
}
main#mainContent div.contentInner-960px{
width:960px;
margin: 0 auto;
text-align: center;
}

main#mainContent div.contentWrap h2.hdgH2{
font-size: 36px;
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
font-weight: bold;
color: #2D5E82;
background: url(images/hdg-h2-bg.png) top center no-repeat;
padding:70px 20px 20px 20px;
border-bottom: #2D5E82 solid 2px;
display: inline-block;
margin-bottom: 30px;
}

main#mainContent div.contentWrap h3.hdgH3 span{
font-size: 28px;
line-height: 1.4;
font-family: 'Noto Sans JP', sans-serif;
padding:20px 20px 10px 20px;
border-bottom: #5CAC82 dashed 2px;
display: inline-block;
margin-bottom: 30px;
}

main#mainContent div.contentWrap h3.hdgH3 i{
font-size: 50px;
width:100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
background: #5CAC82;
color: #FFF;
}

main#mainContent div.contentWrap h3.hdgH3-02{
font-size: 30px;
line-height: 1.4;
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
font-weight: bold;
color: #2D5E82;
background: url(images/hdg-h3-bg.png) top center no-repeat;
padding:252px 20px 10px 20px;
border-bottom: #2D5E82 dashed 2px;
display: inline-block;
}

main#mainContent div.contentWrap div.textBox01 p{
padding-bottom: 25px;
}

main#mainContent div.contentWrap div.decoBox01{
background: url(images/box-deco-bg.png) bottom center no-repeat;
padding-top: 60px;
padding-bottom: 30px;
min-height:300px; 
}

main#mainContent div.contentWrap ul.worksBox{
display: inline-block;
margin: 0 auto;
}
main#mainContent div.contentWrap ul.worksBox li{
float: left;
}
main#mainContent div.contentWrap ul.worksBox > li:not(:last-child) {
margin-right: 12px;
}

main#mainContent div.contentWrap .margintweaks{
margin-left: -160px;
margin-bottom: 50px;
}


/* hr */
hr.border-stripe{
border:none;
width: 860px;
background: repeating-linear-gradient(-45deg, #E6E6E6, #E6E6E6 4px, white 4px, white 8px);
height: 7px;
display: inline-block;
margin: 35px auto;
}

/* line */
.line01 {
  font-size: 20px;
	font-weight: bold;
	display: inline-block;
	padding: 0 10px;
  }
.line01.pink {
	background: linear-gradient(transparent 40%, #FEDEED 40%);
  }
.line01.yellow {
	background: linear-gradient(transparent 40%, #FFFF66 40%);
  }
	

/*  logo
---------------------------------------*/
main#mainContent div.contentWrap h3.hdgLogo{
  position: relative;
	width: 240px;
	font-size: 24px;
  padding: 12px 10px;
  background-color: #5CAC82;
	text-align: center;
	margin-bottom: 25px;
	color: #FFF;
	display: inline-block;
}
main#mainContent div.contentWrap h3.hdgLogo::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #5CAC82;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
main#mainContent div.contentWrap div.logoBox{
    font-family: 'Noto Serif JP', serif;
		width: 550px;
		padding: 15px;
    margin: 2em 0;
    background: #F4F4EC;
    box-shadow: 0px 0px 0px 10px #F4F4EC;
    border: dashed 2px #7BBB98;
    border-radius: 8px;
		display: inline-block;
}


/*  customer
---------------------------------------*/
main#mainContent div.contentWrap h4.hdgCustomer {
font-size: 20px;
text-align: center;
}
main#mainContent div.contentWrap h4.hdgCustomer span{
     position: relative;
     display: inline-block;
     padding: 0 0.5em;
}   
main#mainContent div.contentWrap h4.hdgCustomer span::before,
main#mainContent div.contentWrap h4.hdgCustomer span::after{
     position: absolute;
     top: 50%;
     content: '';
     width: 1.5em;
     height: 1px;
     background-color: #222;
}
main#mainContent div.contentWrap h4.hdgCustomer span::before {left: 100%;}
main#mainContent div.contentWrap h4.hdgCustomer span::after { right: 100%;}


main#mainContent div.contentWrap div.customerBox{
    width: 500px;
		margin:1em auto 2em auto;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 1px #222;
    border-bottom: solid 1px #222;
		
}
main#mainContent div.contentWrap div.customerBox:before,
main#mainContent div.contentWrap div.customerBox:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #222;
}
main#mainContent div.contentWrap div.customerBox:before {left: 10px;}
main#mainContent div.contentWrap div.customerBox:after {right: 10px;}


/*  Contactr Us
---------------------------------------*/
main#mainContent div.contentWrap address{
	}

/* 背景がアニメーションするボタン */
.btn-stripe{
  font-size:20px;
  display: inline-block;
  z-index: 1;
  padding: 16px 20px;
  width: 350px;
  overflow: hidden;
  text-align: center;
  background: rgb(245, 98, 0);
  color: #ffffff;
	cursor: pointer;
  position: relative;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0px 3px 3px rgba(0,0,0,0.5);  /* Firefox用 */
-webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.5);  /* Google Chrome,Safari用 */
}
.btn-stripe::before{
  z-index: -1;
  content: '';
  width: calc(200% + 40px);
  position: absolute;
  left: calc(-100% - 40px);
  height: 100%;
  display: block;
  top: 0;
  background: linear-gradient(135deg, rgba(242,144,46,1) 55%,rgb(245, 98, 0) 55%);
  transition: .3s;
}
.btn-stripe:hover::after{
  z-index: 1;
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(242,144,46,0) 50%,rgb(245, 98, 0) 50%);
}
.btn-stripe:hover::before{
  left: 0;
}
.btn-stripe a{
text-decoration: none;
color: #fff;
}
.btn-stripe:hover{
}