@charset "utf-8";

/* ------------------------------
   Browser Reset
------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
}

* {
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	font-size: 100%;
}

html,body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
} 

body {
	background-color: #fffbf4;
	font-size: 20px;
	color: #333;
	font-size: 18px;
	line-height: 36px;
	background-color: #fff;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}


/*各スタイル
--------------------------------------*/
a {
	text-decoration: none;
	color: #3e3a39;
}
a:hover{
	color: #595655;
	text-decoration: underline;
}
a.anchor{
	padding-top:300px;
	margin-top:-100px
}

/*表示非表示切替
--------------------------------------*/
.pc_disp {
	display: inherit !important;
}
.sp_disp {
	display: none !important;
}


h1 {
	color: #21659e;
	font-size: 30px;
	font-weight:bold;
	text-align: center;
	margin: 0 auto;
	padding: 10px 0;
	margin-bottom: 40px;
	width: 591px;
	height: 61px;
	background-image: url("../images/titlePaper.png");
	background-repeat: no-repeat;
	background-size: 591px;
	line-height: 46px;
	font-family: "黎ミンY20 B";
}
h2 {
	color: #fff;
	font-size: 120%;
	padding: 5px;
}
h3{
	margin: 0;
	padding: 0;
	padding-left: 20px;
	padding-bottom: 5px;
	margin-bottom: 24px;
	padding-left:5px;
	font-weight: bold;
	font-size: 22px;
	color: #3b3b3b;
}
h4{
	margin: 0;
	padding: 0;
	font-size: 130%;
	margin-bottom: 10px;
	color: #0063b0;
}
h5{
	margin: 0;
	padding: 0;
	font-size: 110%;
}
p{
	padding-left: 10px;
	font-size: 100%;
	margin-bottom: 40px;
	line-height: 180%;
}
img{
	border: none;
}
/*画像装飾
--------------------------------------*/
.pic_shadow{
	box-shadow:rgba(31, 33, 36, 0.25) 2px 2px 2px 0px;
	-webkit-box-shadow:rgba(31, 33, 36, 0.25) 2px 2px 2px 0px;
	-moz-box-shadow:rgba(31, 33, 36, 0.25) 2px 2px 2px 0px;
}

/*文字カラー、太さ指定
--------------------------------------*/
.red {
	color: #cf240d;
	font-weight: bold;
}
.red_small{
	color: #ff0000;
	font-weight: normal;
	font-size: 80%;
	line-height: 1.3;
}
.red_stress{
	color: #e0201c;
	font-weight: bold;
}
.green{
	color: #4c8d12;
	font-weight: bold;
	background-color: #ecfae1;
	padding: 5px;
}
.yellow_back{
	background-color: #ffea00;
	font-weight: bold;
	font-size: 100%;
}
.bold{
	font-weight: bold;
}
.blueBold{
	color: #0063b0;
	font-weight: bold;
	font-size: 110%;
}
.redBold{
	color: #f51142;
	font-weight: bold;
	font-size: 120%;
}
/*サイズ指定
--------------------------------------*/
.width100 {
	width: 100%;
}
.width20 {
	width: 20%;
}
/*効果（シャドウ）
--------------------------------------*/
.shadow{
    position: relative;
    display: block;
    width: 100%; /* 画像の横幅 */
    margin: 0 auto;
    z-index: 1;
}
.shadow:before{
    content: "";
    position: absolute;
    bottom: 6px;
    left: 18px;
    width: 50%;
    box-shadow: 0 0 4px 8px rgba(0,0,0,0.6);
    z-index: -1;
    transform:rotate(-3deg)
}
.shadow:after{
    content: "";
    position: absolute;
    bottom: 6px;
    right: 18px;
    width: 50%;
    box-shadow: 0 0 4px 8px rgba(0,0,0,0.6);
    z-index: -1;
    transform:rotate(3deg)
}
/*float
--------------------------------------*/
.fleft {
	float: left;
}
.fright{
	float: right;
}
.left01{
	float: left;
	width: 250px;
	padding-left: 50px;
}
.right01{
	float: right;
	width: 650px;
	padding-top: 50px;
	font-size: 18px;
	line-height: 30px;
}
.right01 img{
	width: 100%;
	margin: 0;
	padding: 0;
}

/*clearfix
--------------------------------------*/
.cf {
	zoom: 1;
}

.cf:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
}

/*******************************************
ヘッダー
*******************************************/
/*IE対応*/
/* html body {     
    background: url(null) fixed;     
} 
* html div#header    {     
    position: absolute;     
    top: expression(eval(document.documentElement.scrollTop+0));  
}  */


/*共通
--------------------------------------*/
.inner{
	width: 1000px;
	margin: 0 auto;
}


/*ヘッダー
--------------------------------------*/
header{
    width: 100%;
    padding: 12px 0 8px;
    border-bottom: 4px solid #bfe18c;
    background-color: #67bc29;
    z-index: 100000;
}
header .inner img{
    width: 653px;
    margin: 0 auto;
}

#keyVisual{
    height: 269px;
    width: 100%;
    background-image: url(../images/keyVisual.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}


.cv_01{
    width: 100%;
    padding: 20px 0 15px;
    background-color: #e3f3cf;
    background-image: url(../images/bg_01.jpg);
    background-repeat: repeat-y;
    background-position: center top;
}
.cv_01 .inner{
    width: 940px;
    margin: 0 auto;
}
.cv_01_L{
    float: left;
    width: 464px;
}
.cv_01_L img{
    margin: 0 auto;
    display: block;
}
.cv_01_R{
    float: right;
    width: 474px;
}

#about{
    width: 100%;
    height: 1964px;
    background-image: url(../images/img_about.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #4c9811;
}
#five{
    width: 100%;
    height: 934px;
    background-image: url(../images/img_five.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #4c9811;
}
#industry_01{
    width: 100%;
    height: 2304px;
    background-image: url(../images/img_industry_01.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #e7f6d2;
}
#industry_02{
    width: 100%;
    height: 2506px;
    background-image: url(../images/img_industry_02.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #e7f6d2;
}
#industry_03{
    width: 100%;
    height: 2112px;
    background-image: url(../images/img_industry_03.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #e7f6d2;
}
#industry_04{
    width: 100%;
    height: 2015px;
    background-image: url(../images/img_industry_04.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #e7f6d2;
}
#industry_05{
    width: 100%;
    height: 2457px;
    background-image: url(../images/img_industry_05.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #e7f6d2;
}

/* ------------------------------
   loopSlider
------------------------------ */
.loopSliderWrap {
    top: 0;
    left: 0;
    height: 215px;
    overflow: hidden;
    position: absolute;
}
 
.loopSlider {
    margin: 0 auto;
    width: 100%;
    height: 215px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.loopSlider ul {
    height: 215px;
    float: left;
    overflow: hidden;
}
 
.loopSlider ul li {
    width: 350px;
    height: 215px;
    float: left;
    display: inline;
    overflow: hidden;
}
 
/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

#why{
    width: 100%;
    height: 2045px;
    background-image: url(../images/img_why.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}
#self{
    width: 100%;
    height: 5611px;
    background-image: url(../images/img_self.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}
#lesson{
    width: 100%;
    padding: 50px 0 44px;
    background-image: url(../images/bg_lesson.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #fed4e0;
}
.lessonBlock{
    width: 1000px;
    margin: 0 auto;
    
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    
    background-image: url(../images/bg_white_01.png);
    
    /* box-shadow */
    box-shadow:0px 0px 18px 0px #e2e0e5;
    -moz-box-shadow:0px 0px 18px 0px #e2e0e5;
    -webkit-box-shadow:0px 0px 18px 0px #e2e0e5;
    
    padding: 55px 0 35px;
    
}
.copy_lesson{
    width: 100%;
    display: block;
    margin-bottom: 55px;
}
.lessonBlock a{
    width: 900px;
    display: block;
    margin: 0 auto;
}
#photoLast{
    width: 100%;
    display: block;
}
#photoLast img{
    width: 100%;
    display: block;
}
#sky{
    width: 100%;
    background-image: url(../images/img_sky.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #cbecf3;
    padding: 270px 0 40px;
}
.img_flow{
    width: 907px;
    margin: 0 auto;
    display: block;
    padding-bottom: 95px;
}
.title_aso{
    width: 100%;
    height: 134px;
    position: relative;
    margin-bottom: 40px;
}
.title_aso img{
    width: 1050px;
    position: absolute;
    top: 0;
    left: -25px;
}
.asoBlock{
    width: 100%;
    text-align: center;
    padding-bottom: 75px;
}
.asoBlock img{
    width: 480px;
    margin: 0 auto 55px;
    display: block;
}
.asoBlock p,
.asoBlock a{
    font-size: 30px;
    line-height: 42px;
}
.asoBlock a{
    color: #0198eb;
    text-decoration: underline;
}
.asoBlock a:hover{
    text-decoration: none;
}
.img_otsu{
    width: 260px !important;
    margin-bottom: 20px !important;
    display: block;
}
.asoBlock ul{
    width: 500px;
    margin: 0 auto;
    list-style: none;
    font-size: 30px;
    line-height: 42px;
    text-align: left;
}
.title_aso_L{
    width: 100%;
    margin-bottom: 20px;
}
.img_fb{
    width: 960px;
    margin: 0 auto 20px;
    display: block;
}
.link_fb{
    text-align: center;
    padding-bottom: 75px;
    font-size: 24px;
    text-decoration: underline;
}
.link_fb:hover{
    text-decoration: none;
}
.movie{
    width: 940px;
    margin: 0 auto;
}
.movie .left{
    float: left;
    width: 430px;
}
.movie .right{
    float: right;
    width: 430px;
}
.movie iframe{
    width: 100%;
    height: 250px;
}



/*フッター
--------------------------------------*/
footer{
	width: 100%;
	background-image: url(../images/bg_footer.jpg);
	color: #221203;
	padding-top: 20px;
	padding-bottom: 40px;
	text-align: center;
}

footer address{
	display: block;
	text-align: center;
	font-style: normal;
	font-size: 14px;
	color: #221203;
}



/*******************************************
スマホ用スタイル
*******************************************/
@media screen and (max-width: 768px) {

/*表示非表示切替
	--------------------------------------*/
	.pc_disp {
		display: none !important;
	}
	.sp_disp {
		display: inherit !important;
	}
	
	* {
		font-size: 20px;
		line-height: 36px;
	}
	
	.inner{
		width: 92%;
		margin: 0 auto;
	}
	.sp_imgs img{
    	width: 100%;
    	display: block;
    	margin: 0;
    	padding: 0;
	}
       
    
    /*ヘッダー
    --------------------------------------*/
    header{
        width: 100%;
        padding: 0;
        border: none;
        background-color: #67bc29;
        z-index: 100000;
    }
    header img{
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    
    
    .cv_01_sp{
        width: 100%;
        padding: 24px 0 4px;
        background: none;
        background-color: #ecf3e0;
    }
    .cv_01_sp .inner{
        width: 92%;
        margin: 0 auto;
    }
    .cv_01_sp img{
        width: 100%;
        margin-bottom: 20px;
        display: block;
    }
    .cv_01_sp a{
        width: 100%;
        display: block;
        padding-bottom: 0px;
    }
    .cv_01_sp a img{
        width: 100%;
        display: block;
    }
    
    #about{
        width: 100%;
        height: auto;
        background: none;
        background-image: none;
    }
    #about img{
        width: 100%;
        display: block;
    }
    #five{
        width: 100%;
        height: auto;
        background: none;
        background-image: none;
    }
    #five img{
        width: 100%;
        display: block;
    }
    
    /* ------------------------------
       loopSlider
    ------------------------------ */
    .loopSliderWrap {
        top: 0;
        left: 0;
        height: 215px;
        overflow: hidden;
        position: absolute;
    }
     
    .loopSlider {
        margin: 0 auto;
        width: 100%;
        height: 215px;
        text-align: left;
        position: relative;
        overflow: hidden;
    }
     
    .loopSlider ul {
        height: 215px;
        float: left;
        overflow: hidden;
    }
     
    .loopSlider ul li {
        width: 350px;
        height: 215px;
        float: left;
        display: inline;
        overflow: hidden;
    }
     
    /* ------------------------------
       CLEARFIX ELEMENTS
    ------------------------------ */
    .loopSliderWrap:after {
        content: "";
        display: none;
        clear: none;
    }
    
    #why,
    #self{
        width: 100%;
        height: auto;
        background: none;
    }
    #why img,
    #self img{
        width: 100%;
        display: block;
    }
    #self{
        width: 100%;
        height: auto;
        background: none;
        background-repeat: no-repeat;
        background-position: center top;
    }
    #lesson{
        width: 100%;
        height: auto;
        padding: 45px 0;
        background: none;
        background-image: url(../images/sp/bg_lesson_sp.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #fed4e0;
        
    }
    .lessonBlock{
        width: 92%;
        margin: 0 auto;
        
        
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        -khtml-border-radius: 20px;
        border-radius: 20px;
        
        background-image: url(../images/bg_white_01.png);
        
        /* box-shadow */
        box-shadow:0px 0px 18px 0px #e2e0e5;
        -moz-box-shadow:0px 0px 18px 0px #e2e0e5;
        -webkit-box-shadow:0px 0px 18px 0px #e2e0e5;
        
        padding: 55px 0 35px;
        
    }
    .copy_lesson{
        width: 100%;
        display: block;
        margin-bottom: 55px;
    }
    .lessonBlock a{
        width: 92%;
        display: block;
        margin: 0 auto;
    }
    .lessonBlock a img{
        width: 100%;
        display: block;
    }
    #photoLast{
        width: 100%;
        display: block;
    }
    #photoLast img{
        width: 100%;
        display: block;
    }
    #sky{
        width: 100%;
        background-image: url(../images/sp/img_sky_sp.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #cbecf3;
        padding: 170px 0 40px;
    }
    .img_flow{
        width: 92%;
        margin: 0 auto;
        display: block;
        padding-bottom: 45px;
    }
    .title_aso{
        width: 100%;
        height: auto;
        position: relative;
        margin-bottom: 40px;
    }
    .title_aso img{
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
    }
    .asoBlock{
        width: 100%;
        text-align: center;
        padding-bottom: 50px;
    }
    .asoBlock img{
        width: 80%;
        margin: 0 auto 55px;
        display: block;
    }
    .asoBlock p,
    .asoBlock a{
        font-size: 30px;
        line-height: 42px;
    }
    .asoBlock a{
        color: #0198eb;
        text-decoration: underline;
    }
    .asoBlock a:hover{
        text-decoration: none;
    }
    .img_otsu{
        width: 50% !important;
        margin-bottom: 20px !important;
        display: block;
    }
    .asoBlock ul{
        width: 80%;
        margin: 0 auto;
        list-style: none;
        font-size: 30px;
        line-height: 42px;
        text-align: left;
    }
    .asoBlock ul li{
        font-size: 26px;
        line-height: 40px;
    }
    .title_aso_L{
        width: 100%;
        margin-bottom: 30px;
    }
    .img_fb{
        width: 92%;
        margin: 0 auto 20px;
        display: block;
    }
    .link_fb{
        text-align: center;
        padding-bottom: 75px;
        font-size: 24px;
    }
    .movie{
        width: 100%;
        margin: 0 auto;
    }
    .movie .left{
        float: none;
        width: 80%;
        margin: 0 auto 20px;
        display: block;
    }
    .movie .right{
        float: none;
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    .movie iframe{
        width: 100%;
        height: 250px;
    }
    
    
    
    /*フッター
    --------------------------------------*/
    footer{
    	width: 100%;
    	background-image: url(../images/bg_footer.jpg);
    	color: #221203;
    	padding-top: 20px;
    	padding-bottom: 40px;
    	text-align: center;
    }
    
    footer address{
    	display: block;
    	text-align: center;
    	font-style: normal;
    	font-size: 12px;
    	line-height: 24px;
    	color: #221203;
    }
  
}