@charset "utf-8";
/* レイアウトのためのCSS */

/*
* {
  outline: 2px solid blue;
}
 */
 
* {
	margin: 0px;
	padding: 0px;  
}


body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	color: #006;
	font-size: 1rem;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

@media screen and (max-width:768px) {
body{
	font-size: 0.8rem;
	margin: 0px;
	}
}

*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #006;
	text-decoration: none;
	outline: none;
}

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

/* font-family */

#splash-logo,
.top-lead,
h1,
h2,
h3 span,
#g-nav,
#pc-nav,
.openbtn,
#footer{
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.1em;
}

/* splash */

#splash-logo{
	font-size: 1.2rem;
	letter-spacing: 0.3em;
	text-transform: capitalize;
	color: #000066;
}


/*pc-nav*/

#gnavi span.bgLRextend::before{
	background-color: #006;
}


@media screen and (max-width:990px) {
    #gnavi{
        display: none;
    }
}

/* サイトタイトル */

.s-title{
	top: 10%;
	margin: auto;
}

@media screen and (max-width:550px) {
    .s-title{
		top: 10%;
		margin: auto;
    }
}


/* heading */

h1{
    text-transform: capitalize;
    font-size: 1.5rem;
    position: absolute;
    top: 40%;
    left: 5%;
    line-height: 1;
    letter-spacing: 0.2em;
}

@media screen and (max-width:550px) {
    h1{
        font-size:1.2rem;
        top: 32%;
    }
}


h1 a{
	color: #000066;
}

h2{
    text-transform: capitalize;
    font-size: 3rem;
}

@media screen and (max-width:768px) {

  h2{
      font-size:2rem;
    }
}

/* lead */

.top-lead{
    position: fixed;
    bottom:10%;
    left:5%;
    font-size:3rem;
    text-transform: capitalize;
    font-weight: bold;
    line-height: 1.5;
}


.top-lead span.bgLRextend::before{
	background-color: #006;
}

@media screen and (max-width:550px) {
.top-lead{
    font-size:2.2rem;
    }
}
@media screen and (max-width:380px) {
.top-lead{
    font-size:1.8rem;
    }
}

/* main-area */

#main-area{
    width:90%;
    margin:0 auto;
    padding: 50px 0; 
}


/* greeting部分のレイアウト */

.content {
	display: flex;
	align-items: center;
	margin: auto;
	padding: 10px;
}

.content-image {
  width: 10%;
}

.content-text {
  width: 10%;
  text-align: center;
}

.content-reverse {
	flex-direction: row-reverse;
	margin: auto;
	padding: 10px;
}

@media (max-width: 767px) {
  .content {
    flex-direction: column;
  }
}



/* トップページのコンテンツ紹介 */

#greeting{
	background-color: #FFF;
	margin: auto;
	padding: 50px;
}

@media screen and (max-width:960px) {
#greeting{
	background-color: #FFF;
	margin: auto;
	padding: 50px;
}  
}

.greeting-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.greeting-area p{
    margin: 0 0 30px 0;    
}

.greeting-area .txt-r{
     text-align: right;
}

.greeting-lead{
	font-weight: bold;
	font-size: 14pt;
	line-height: 16pt;
}

.greeting-img{
    width:50%;
}

.greeting-img img{
    animation: fluidrotate 30s ease 0s infinite;
}

.greeting-content{
    width:40%;
}

@media screen and (max-width:768px) {
.greeting-area{
    display: block;
    }
.greeting-img{
    width: 60%;
    margin:0 auto;
    }
.greeting-content{
    width:100%;
    padding: 0 30px 0 70px;
}
    
}

@media screen and (max-width:550px) {
.greeting-content{
    padding:0;
} 
.greeting-img{
    width:100%;
}
}


/* 業務内容　flud-area */

.fluid-area{
	position: relative;
	height: 70vh;
	display: flex;
	align-items: center;
	background-image: url(../img/index-bg01.jpg);
	background-repeat: no-repeat;
	background-position: right;
	margin: 0px;
	font-weight: bold;
	color: #000;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
}

.fluid-lead{
    padding: 0 0 0 7vw;
}

.fluid-lead h2{
    font-size: 4vw;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin: 0 0 40px 0;
    opacity: 0;
}

body.appear .fluid-lead h2{
    opacity:1;   
}

.fluid-lead p{
	font-size: 1.1rem;
	line-height: 1.5;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 50px;
}

.fluid-block{
    position: absolute;
    z-index: -1;
    top:10%;
    right:0;
   width:45vw;
    height: 65vh;
    animation-delay: 0.5s;
}


@media screen and (max-width:960px) {
.fluid-lead h2{
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    }
.fluid-block{
    width:60vw;
    height: 60vh;
}
}

@media screen and (max-width:768px) {
 .fluid-block{
    width:65vw;
     height:60vh;
}  
.fluid-lead h2{
    font-size: 1.8rem;
    }
    .fluid-lead{
        padding: 0;
    }
.fluid-lead p{
    margin: 0;
}

}

@media screen and (max-width:550px) {
 .fluid-block{
     width:300px;
     height:300px;
}     

.fluid-lead p{
    font-size: 1rem;
    }    
}

@media screen and (max-width:360px) {
 .fluid-block{
     width:240px;
     height:240px;
}    
}


/* 施工事例　flud-area */

.fluid2-area{
	position: relative;
	height: 70vh;
	display: flex;
	align-items: center;
	background-image: url(../img/index-bg02.jpg);
	background-repeat: no-repeat;
	background-position: right;
	margin: auto;
	padding: 15px;
	font-weight: bold;
	color: #000;
}

.fluid2-lead{
    padding: 0 0 0 7vw;
}

.fluid2-lead h2{
    font-size: 4vw;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin: 0 0 40px 0;
    opacity: 0;
}

body.appear .fluid2-lead h2{
    opacity:1;   
}

.fluid2-lead p{
	font-size: 1.1rem;
	line-height: 1.5;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 50px;
}

.fluid2-block{
    position: absolute;
    z-index: -1;
    top:10%;
    right:0;
   width:45vw;
    height: 65vh;
    animation-delay: 0.5s;
}


@media screen and (max-width:960px) {
.fluid2-lead h2{
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    }
.fluid2-block{
    width:60vw;
    height: 60vh;
}
}

@media screen and (max-width:768px) {
 .fluid2-block{
    width:65vw;
     height:60vh;
}  
.fluid2-lead h2{
    font-size: 1.8rem;
    }
    .fluid2-lead{
        padding: 0;
    }
.fluid2-lead p{
    margin: 0;
}

}

@media screen and (max-width:550px) {
 .fluid2-block{
     width:300px;
     height:300px;
}     

.fluid2-lead p{
    font-size: 1rem;
    }    
}

@media screen and (max-width:360px) {
 .fluid2-block{
     width:240px;
     height:240px;
}    
}


/* 会社紹介　flud-area */

.fluid3-area{
	position: relative;
	height: 70vh;
	display: flex;
	align-items: center;
	background-image: url(../img/index-bg03.jpg);
	background-repeat: no-repeat;
	background-position: right;
	margin: auto;
	padding: 15px;
	font-weight: bold;
	color: #000;
}

.fluid3-lead{
    padding: 0 0 0 7vw;
}

.fluid3-lead h2{
    font-size: 4vw;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin: 0 0 40px 0;
    opacity: 0;
}

body.appear .fluid3-lead h2{
    opacity:1;   
}

.fluid3-lead p{
	font-size: 1.1rem;
	line-height: 1.5;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 50px;
}

.fluid3-block{
    position: absolute;
    z-index: -1;
    top:10%;
    right:0;
   width:45vw;
    height: 65vh;
    animation-delay: 0.5s;
}


@media screen and (max-width:960px) {
.fluid3-lead h2{
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    }
.fluid3-block{
    width:60vw;
    height: 60vh;
}
}

@media screen and (max-width:768px) {
 .fluid3-block{
    width:65vw;
     height:60vh;
}  
.fluid3-lead h2{
    font-size: 1.8rem;
    }
    .fluid3-lead{
        padding: 0;
    }
.fluid3-lead p{
    margin: 0;
}

}

@media screen and (max-width:550px) {
 .fluid3-block{
     width:300px;
     height:300px;
}     

.fluid3-lead p{
    font-size: 1rem;
    }    
}

@media screen and (max-width:360px) {
 .fluid3-block{
     width:240px;
     height:240px;
}    
}


/* heading */

.heading-block{
    padding: 0 0 0 70px;
}

@media screen and (max-width:550px) {
 .heading-block{
    padding: 0;
}   
}

.heading01{
    position: relative;
    font-weight: normal;
    font-size: 5vw;
    letter-spacing: 0.1em;
    padding: 0 0 30px 0;
    line-height: 1;
}

.heading01 span{
    position: absolute;
}

.heading01 span.en{
    top:1.5em;
    left:2em;
    font-size:3vw;
}

#greeting .heading01 span.en{
 left:3em;   
}

#statistics .heading01 span.en{
 left:2.5em;   
}

.heading01 span.jp{
    top:7em;
    left:5.5em;
    font-family: 'Noto Sans JP', sans-serif;   
    font-size:1.2vw;
}

#greeting .heading01 span.jp{
 left:8em;   
}

#statistics .heading01 span.jp{
 left:7em;   
}

.heading01:first-letter{
    font-size: 12vw;
}

@media screen and (max-width:960px) {
    .heading01{
        font-size:1rem;
    }
  .heading01:first-letter{
    font-size: 8rem;
} 
.heading01 span.en{
        font-size: 2rem;
    }
.heading01 span.jp{
        font-size: 1rem;
    top:6em;
    }
}

@media screen and (max-width:768px) {
  .heading01:first-letter{
    font-size: 6rem;
} 
.heading01 span.en{
        font-size: 1.6rem;
    }
.heading01 span.jp{
        font-size:0.9rem;
    top:5em;
    left:4em;
    }
    #greeting .heading01 span.jp{
    left:6em;
    }
    
}



/* title-area */


.title-lead{
	text-align: center;
	margin: auto;
	padding-top: 30pt;
	background-image: url(../img/title-bg01.png);
	background-repeat: no-repeat;
	background-position: center center;
  }

.title-lead p{
	line-height: 2.5em;
	overflow: hidden;
	color: #006;
	margin: auto;
	width: 98%;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	font-size: 14pt;
	font-weight: bold;
  }
  
  
/* text-area */

.text-lead{
	background-color: #E6ECF2; /* ボックス内側余白 */
	position: relative; /* 配置(ここを基準に) */
	border-radius: 30px 60px/60px 30px;
	border: 2px solid #4c9ac0;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	padding-top: 2.5em;
	padding-right: 2em;
	padding-bottom: 2em;
	padding-left: 2em;
	width: 95%;
	font-family: "Noto Sans JP";
	}
	
.text-lead .box-title{
	background-color: rgba(255,255,255,.5);/* テープ背景色と透過*/
	border-left: 2px dotted rgba(0,0,0,.1);/* ギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* ギザギザ右*/
	box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 1em;/*タイトル文字の大きさ*/
	color: #006; /*タイトル文字色 */
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position: absolute;/*配置(ここを動かす)*/
	top: -15px; /*上からの距離*/
	left: 20px; /*左からの距離*/
	font-family: "Noto Sans JP";
}

.text-lead2{
	background-color: #FFFFFF; /* ボックス内側余白 */
	position: relative; /* 配置(ここを基準に) */
	border-radius: 30px 60px/60px 30px;
	border: 2px solid #4c9ac0;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	padding-top: 2.5em;
	padding-right: 2em;
	padding-bottom: 2em;
	padding-left: 2em;
	width: 95%;
	font-family: "Noto Sans JP";
	}


#work{
	position: relative;
	margin: auto;
	padding-top: 130px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

#work::before{
    content:"";
    width:1px;
    height: 100px;
    background:#333;
    position: absolute;
    left:50%;
    top:0;
}


/* work01 */

#work01{
    position: relative;   
}

#work01 h2{
	position: absolute;
	right: 45%;
	z-index: 2;
	font-size: 18pt;
	background-image: url(../img/service-icon1.png);
}

.work01-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.work01-img{
	background-size: cover;
	width: 48%;
	height:50vh;
	background-image: url(../img/service/pict_01.jpg);
	background-repeat: no-repeat;
	background-position: left;
}

.work01-content{
    display: flex;
    justify-content: center;
    padding: 80px 0 0 0;
    width:50%;
}

.work01-box{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	font-size: 14pt;
	color: #006;
	margin: auto;
	padding-bottom: 50px;
}



@media screen and (max-width:1280px) {

.work01-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.work01-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.work01-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#work01{
    padding: 0 30px;
}
    
#work01 h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .work01-img,
    .work01-content{
        width:100%;
    }
    
    .work01-img{
        height:40vh;
    }

    .work01-content{
    padding:50px 0 0 0;
    }
    
.work01-content h3,
.work01-content p,
.work01-content .work01-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .work01-content h3,
_:-ms-lang(x)::-ms-backdrop, .work01-content p,
_:-ms-lang(x)::-ms-backdrop, .work01-content .work01-btn{/*IE11用ハック*/
    width:100%;
}
    
.work01-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.work01-box{
    display: block;

}
    
.work01-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:370px) {

 .work01-content p br{
    display: none;
    }
	
}



/* work02 */

#work02{
    position: relative;
}

#work02 h2{
	position: absolute;
	right: 45%;
	z-index: 2;
	font-size: 18pt;
	background-image: url(../img/service-icon1.png);
}


.work02-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.work02-img{
	background-size: cover;
	width: 48%;
	height:50vh;
	background-image: url(../img/service/pict_02.jpg);
	background-repeat: no-repeat;
	background-position: right;
}

.work02-content{
    width:45%;
    padding: 150px 0 0 0;
}

.work02-box{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	font-size: 14pt;
	color: #006;
	margin: auto;
	padding-bottom: 50px;
}

@media screen and (max-width:768px) {
#work02{
    padding: 0 30px;
}
#work02 h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .work02-img,
    .work02-content{
        width:100%;
    }
    
    .work02-img{
        height:40vh;
    }

    .work02-content{
    padding:50px 0 0 0;
    }  
}

@media screen and (max-width:430px) {
    .work02-img{
        height:40vh;
    }
}


/* work03 */

#work03{
    position: relative;   
}

#work03 h2{
	position: absolute;
	right: 45%;
	z-index: 2;
	font-size: 18pt;
	background-image: url(../img/service-icon1.png);
}

.work03-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.work03-img{
	background-size: cover;
	width: 48%;
	height:50vh;
	background-image: url(../img/service/pict_03.jpg);
	background-repeat: no-repeat;
	background-position: left;
}

.work03-content{
    display: flex;
    justify-content: center;
    padding: 80px 0 0 0;
    width:50%;
}

.work03-box{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	font-size: 14pt;
	color: #006;
	margin: auto;
	padding-bottom: 50px;
}



@media screen and (max-width:1280px) {

.work03-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.work03-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.work03-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#work03{
    padding: 0 30px;
}
    
#work03 h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .work03-img,
    .work03-content{
        width:100%;
    }
    
    .work03-img{
        height:40vh;
    }

    .work03-content{
    padding:50px 0 0 0;
    }
    
.work03-content h3,
.work03-content p,
.work03-content .work03-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .work03-content h3,
_:-ms-lang(x)::-ms-backdrop, .work03-content p,
_:-ms-lang(x)::-ms-backdrop, .work03-content .work03-btn{/*IE11用ハック*/
    width:100%;
}
    
.work03-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.work03-box{
    display: block;

}
    
.work03-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .work03-img{
        height:40vh;
    }
}

@media screen and (max-width:370px) {

 .work03-content p br{
    display: none;
    }
}



/* work04 */

#work04{
    position: relative;
}

#work04 h2{
	position: absolute;
	right: 45%;
	z-index: 2;
	font-size: 18pt;
	background-image: url(../img/service-icon1.png);
}


.work04-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.work04-img{
	background-size: cover;
	width: 48%;
	height:50vh;
	background-image: url(../img/service/pict_04.jpg);
	background-repeat: no-repeat;
	background-position: right;
}

.work04-content{
    width:45%;
    padding: 150px 0 0 0;
}

.work04-box{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	font-size: 14pt;
	color: #006;
	margin: auto;
	padding-bottom: 50px;
}

@media screen and (max-width:768px) {
#work04{
    padding: 0 30px;
}
#work04 h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .work04-img,
    .work04-content{
        width:100%;
    }
    
    .work04-img{
        height:40vh;
    }

    .work04-content{
    padding:50px 0 0 0;
    }  
}

@media screen and (max-width:430px) {
    .work04-img{
        height:40vh;
    }
}


/* work05 */

#work05{
    position: relative;   
}

#work05 h2{
	position: absolute;
	right: 45%;
	z-index: 2;
	font-size: 18pt;
	background-image: url(../img/service-icon1.png);
}

.work05-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.work05-img{
	background-size: cover;
	width: 48%;
	height:50vh;
	background-image: url(../img/service/pict_05.jpg);
	background-repeat: no-repeat;
	background-position: left;
}

.work05-content{
    display: flex;
    justify-content: center;
    padding: 80px 0 0 0;
    width:50%;
}

.work05-box{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	font-size: 14pt;
	color: #006;
	margin: auto;
	padding-bottom: 50px;
}



@media screen and (max-width:1280px) {

.work05-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.work05-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.work05-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#work05{
    padding: 0 30px;
}
    
#work05 h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .work05-img,
    .work05-content{
        width:100%;
    }
    
    .work05-img{
        height:40vh;
    }

    .work05-content{
    padding:50px 0 0 0;
    }
    
.work05-content h3,
.work05-content p,
.work05-content .work05-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .work05-content h3,
_:-ms-lang(x)::-ms-backdrop, .work05-content p,
_:-ms-lang(x)::-ms-backdrop, .work05-content .work05-btn{/*IE11用ハック*/
    width:100%;
}
    
.work05-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.work05-box{
    display: block;

}
    
.work05-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .work05-img{
        height:40vh;
    }
}

@media screen and (max-width:370px) {

 .work05-content p br{
    display: none;
    }
}


/* about01 */

.box {
  display:flex;
  margin-bottom: 40px;
	}

.text {
	font-size: 12pt;
}

h3 {
  font-size: 21px;
  margin: 0;
}

.pict {
	width: 35%;
	margin: auto;
	text-align: right;
	font-size: 10pt;
}

.pict img {
	width: 70%;
	height: auto;
	text-align: center;
	margin: auto;
}

.box:nth-child(even) {
  flex-direction: row-reverse;
}
.box:nth-child(even) .text {
  text-align: right;
}
.box:nth-child(even) .pict {
	margin: auto;
	text-align: center;
}

@media (max-width:768px) {
  .box {
    flex-direction: column;
  }
  .box:nth-child(even) {
    flex-direction: column;
  }
  .text {
    text-align: left;
  }
  .box:nth-child(even) .text {
    text-align: center;
  }
  .pict {
    width:100%;
    margin-left: 0;
    text-align: center;
  }
  .box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 0%;
  }
  .pict img {
    width:50%;
    height:auto;
  }
}

/* gallery */

.img-gallery{
    background:url("img/about/slid/border.png") repeat-x top left,url("img/about/slid/border.png") repeat-x bottom left;
    background-size: 50px 16px;
    padding:50px 0;
    margin: 0 0 100px 0;
}

.img-gallery img{
    border-radius: 10px;
}

.slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

.slider2 .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}


/* course */

.inner{
    width:100%;
    margin:0 auto;
    padding:70px;
}

@media screen and (max-width:940px) {
.inner{
    padding:70px 30px;
}
}

#course{
    position:relative;
    margin: 0 0 100px 0;
}

@media screen and (max-width:840px) {
#course{
    margin:0;
}
    
}

@media screen and (max-width:700px) {

#news .icon-01,
#news .icon-01 canvas{
    width:80px;
    bottom: inherit;
    top: -623px;
}

#news .icon-02,
#news .icon-02 canvas{
    width:60px;
    right: 89px;
    top: -406px;
}
    
#news .icon-03,
#news .icon-03 canvas{
    width:180px;
    left:10px;
    bottom: inherit;
    top: -22px;
} 

#news .icon-04,
#news .icon-04 canvas{
    width:80px;
    top: -516px;
}
}

@media screen and (max-width:500px) {
 #news .icon-01,
#news .icon-01 canvas{
    width:60px;
    right: 10px;
}

#news .icon-02,
#news .icon-02 canvas{
    width:45px;
    right: 10px;
    top: -489px;
}
    
#news .icon-03,
#news .icon-03 canvas{
    width:140px;
    left: 0;
} 

#news .icon-04,
#news .icon-04 canvas{
    width: 60px;
    left: 10px;
    top: -516px;
}   
    
}

#course:after {
	position: absolute;
	z-index: -1;
	content: '';
	top: 280px;
	width: 100%;
	height: 1200px;
	transform: rotate(5deg);
	background-image: url(../img/service_bg01.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

.course-list{
	display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.course-list section{
    width:28%;
    background: #fff;
	position: relative;
	box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
	margin:0 0 50px 0;
    padding:20px 20px 50px 20px;
    border-radius: 10px;
}

.course-list section:nth-child(2){
     animation-delay: 0.2s;   
}
.course-list section:nth-child(3){
     animation-delay: 0.4s;   
}


@media screen and (max-width:840px) {
.course-list section{
    width:46%;
}
}

@media screen and (max-width:545px) {
.course-list section{
    width:100%;
}
.course-list section:nth-child(2),
.course-list section:nth-child(3){
     animation-delay: 0s;   
}
}

.course-list section .bg-yellow{
	display: inline-block;
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: 2;
	padding: 3px 5px;
	font-size: 0.9rem;
}

.course-list section .course-img{
	padding-top:70%;
	background-size:cover!important;
}

.course-list section:nth-of-type(1) .course-img{
	background-size: cover;
	background-image: url(../img/course_01.png);
	background-repeat: no-repeat;
	background-position: center;
}

.course-list section:nth-of-type(2) .course-img{
	background-size: cover;
	background-image: url(../img/course_02.png);
	background-repeat: no-repeat;
	background-position: center;
}

.course-list section:nth-of-type(3) .course-img{
	background-size: cover;
	background-image: url(../img/course_03.png);
	background-repeat: no-repeat;
	background-position: center;
}

.course-list section:nth-of-type(4) .course-img{
	background-size: cover;
	background-image: url(../img/course_04.png);
	background-repeat: no-repeat;
	background-position: center;
}

.course-list section:nth-of-type(5) .course-img{
	background-size: cover;
	background-image: url(../img/course_05.png);
	background-repeat: no-repeat;
	background-position: center;
}

.course-list section h3{
    font-size: 1.5rem;
    text-align: center;
    border-bottom: 5px double #333;
    margin: 30px 0 0 0;
    padding: 0 0 20px 0;
}

@media screen and (max-width:1090px) {
.course-list section h3{
    font-size: 1rem;
}    
}

.course-list section h4{
	font-size: 1.1rem;
	text-align: left;
	color: #666;
	margin: 5px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
	font-weight: normal;
	line-height: normal;
}

@media screen and (max-width:1090px) {
.course-list section h4{
    font-size: 0.8rem;
}    
}

.title01 {
	line-height: 60px;
	background-image: url(../img/service-icon01.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.title02 {
	line-height: 60px;
	background-image: url(../img/service-icon02.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.title03 {
	line-height: 60px;
	background-image: url(../img/service-icon03.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.title04 {
	line-height: 60px;
	background-image: url(../img/service-icon04.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.title05 {
	line-height: 60px;
	background-image: url(../img/service-icon05.png);
	background-repeat: no-repeat;
	background-position: right center;
}



/* service */

#service h2{
    text-align: center;
    margin:0 0 100px 0;
}

@media screen and (max-width:550px) {
#service h2{
    margin:0 0 50px 0;
    }
}

#service h2 span.bgLRextend::before{
    background:#333;
}


#service .service-area{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:0 0 300px 0;
}

@media screen and (max-width:768px) {
#service .service-area{
    margin:0 0 200px 0;   
}
}

@media screen and (max-width:590px) {
 #service .service-area{
    margin:0 0 50px 0;   
}
   
}

#service .service-area::after{
     content:'';
    position: absolute;
    width: 70%;
    height: 23em;
    background:#f3f3f3;
    right:10%;
    top:20%;
    z-index: -1;
}


#service .service-area:nth-of-type(2n+1){
     flex-direction: row-reverse;
}


#service .service-area .img{
    width:50%;
}

#service .service-area .content{
    width:40%;
    background:#fff;
    box-shadow: 0 0 20px #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:150px;
}

@media screen and (max-width:768px) {
#service .service-area .content{
    width:47%;
    top:100px;
    }  
}

@media screen and (max-width:590px) {
#service .service-area .img{
    width:100%;
    z-index: 2;
}
#service .service-area .content{
    width:100%;
    top:-10px;
    animation:none;
    opacity: 1;
    z-index: 1;
}
}

#service .service-area .content-area{
    padding:40px;   
}

#service .service-area .content-area h3{
     text-align: center;
    font-size: 1rem;
    margin: 0 0 30px 0;
}

#service .service-area .content-area h3 span{
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    font-size: 1.2rem;
}

#service .service-area .content-area p{
     margin:0 0 30px 0;   
}

#service .btn{
    text-align: right;
}

/* about */

#about{
    margin: 0 0 200px 0;
}

@media screen and (max-width:768px) {
#about{
    margin: 0 0 100px 0;
}
    
}

#about h2{
    text-align: center;
    color:#eb6100;
    margin:0 0 100px 0;
}

@media screen and (max-width:550px) {
#about h2{
    margin:0 0 50px 0;
    }
}

#about .about-list{
   width: 96%;
    max-width: 900px;
    margin: 0 auto;
}

#about .about-list li{
    border-bottom: 1px solid #ccc;
    margin:0 0 15px 0;
    padding: 0 0 15px 0;
}

#about .about-list dl{
     display: flex;
    justify-content: space-between;
}

#about .about-list dt{
    width:30%;
    padding: 0 0 0 40px;
}

@media screen and (max-width:590px) {

#about .about-list dt{
     padding:0 0 0 10px; 
    }
}

#about .about-list dd{
    width:65%;
}


/* contact */

#contact{
	position: relative;
	margin: 0 0 100px 0;
	padding: 130px 0 0 0;
	text-align: center;
	background-color: #FFF;
}

#contact::before{
    content:"";
    width:1px;
    height: 100px;
    background:#333;
    position: absolute;
    left:50%;
    top:0;
}

#contact h2{
     margin: 0 0 30px 0;
    font-size:2.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media screen and (max-width:960px) {
#contact h2{
    font-size: 2rem;
    }
}

@media screen and (max-width:768px) {
#contact h2{
    font-size: 1.5rem;
    }
}

#contact h2 span{
    font-size: 1rem;
    display: block;
}

#contact ul{
    margin: 20px 0 50px 0;
    letter-spacing: 0.1em;
}

#contact li,
#contact dl,
#contact dt,
#contact dd{
    display: inline-block;
}

@media screen and (max-width:530px) {
    #contact li{
        display: block;
    }   
}

#contact dt{
    padding: 0 10px 0 0;
}

#contact dd{
    font-size: 1.5rem;
}

@media screen and (max-width:768px) {
#contact dd{
    font-size: 1rem;
}
}

#contact li:first-child::after{
    content:'/';
    padding:0 10px;     
}

@media screen and (max-width:530px) {
#contact li:first-child::after{
    content:'';
    padding:0;     
}
}

.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #555;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#333;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}


/* footer */

#footer{
    padding: 100px 0;
    border-top:1px solid #333;
    text-align: center;
    background: #fff;
    position: relative;
    text-transform: capitalize;
}

#footer .footer-logo{
	font-weight: bold;
	letter-spacing: 0.3em;
	margin: 0 0 50px 0;
	color: #006;
}

#footer small{
	color: #006;
}


/*===表示の動き用CSS===*/

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}


/*==詳しくはコチラボタン==*/

.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #003;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: #006;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
	/*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
	width: 120%;
	height: 100%;
	transform: skewX(-25deg);
	background-color: #006;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}