@charset "utf-8";

.pagenation li:last-child a{
	display:none;
}
.pagenation{
	top: calc(50% - 90px);
}


.category_tab {
    width: auto;
	display: none;
}
.section{
	background-color: transparent;
}

.content_all{
	height: 100%;
	position: relative; /*必ず必要*/
	z-index: 2; /*必ず必要*/
	background-color: transparent;
}
.section{
	width : -webkit-calc(100% - 80px);
	width : -moz-calc(100% - 80px);
	width : calc(100% - 80px);
	margin:0 0 0 80px;
	/*overflow:auto;*/
	/*min-height: 100%!important;*/
	height: auto!important;
}
.mb120{
	margin-bottom:120px;
}



.top{
	height: 100%;
}

.top1{
	
}



/* ----- mouse ----- */
.mouse{
	position: fixed;
	bottom:43px;
	left:50%;
	z-index:1;
	/*transition: all 0.2s ease-in-out;*/
}




/* ----- 背景用の動画ファイル ----- */
/*section.top1 {
	width : -webkit-calc(100% - 80px);
	width : -moz-calc(100% - 80px);
	width : calc(100% - 80px);
	height: 100vh;
	position: relative;
	overflow: hidden;
}*/
/*video {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	width : -webkit-calc(100% - 80px);
	width : -moz-calc(100% - 80px);
	width : calc(100% - 80px);
	height: 100%;
	background: url("../images/bg.png") no-repeat;
	background-size: cover;
	z-index: 0;
}*/

.wrapper {
	height: 100%;
	height: 100vh;
	position: relative;
	width: 100%;
}

.video {
  background: url('../img/top/video.jpg') no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  left: 0;

  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width: 100vw;
  position: absolute;
  top: 0;
  z-index: 0;  
}



/*
.video_mask{
	min-height: 100%;
	min-height: 100vh;
	min-width: 100%;
	min-width: 100vw;
	background-image:url(../img/top/video_dot.png);
	background: rgba(0, 0, 0, .5);
	z-index: 99; 
	display:block;
}
*/
.content_top2b,
.content_top2,
.video_upper {
	position: absolute;
	width : 100%;
	width : -webkit-calc(100% - 80px);
	width : -moz-calc(100% - 80px);
	width : calc(100% - 80px);
	height: 100%;
	z-index: 1;
	margin:0;
	display:table;

}
.content_top2b{
	display: block;
}
/* --------------top2---------------  */




.content_top2{
	background: rgba(0, 0, 0, .5);
	height: 100vh;
}
.content_right2,
.content_left2,
.content_right,
.content_left{
	color:white;
	font-family: '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;
	line-height: 1.3em;
	margin-top:0.2em;
	margin-top:0;
	letter-spacing: 0.2em;
	text-align: center;
	font-size:20px;
	float:left;	
	width:50%;
	height: 100vh;
	display: table;

	/*  -------------fontにアンチかける--------------  */
	/*-webkit-transform: rotate(0.028deg);
	-moz-transform: rotate(0.028deg);
	-ms-transform: rotate(0.028deg);
	-o-transform: rotate(0.028deg);
	transform: rotate(0.028deg);*/

	display: flex;
	justify-content: center;
	align-items: center;
	
}


/*  -------------fontにアンチかける--------------  */

.content_top2b{
	position: absolute;
	/*background-color: rgba(255,0,0,.3);*/
	z-index:10;
	pointer-events: none;
	overflow: hidden;
}
.content_right2{
	position: absolute;
	background-color: #2d2d2d;
	top:0;
	left:100%;
	left:0
	overflow: hidden;
}
.content_left2{
	position: absolute;
	background-color: #2d2d2d;
	top:0;
	left:-50%;
	/*display: none;*/
}
.content_right2,
.content_left2{
	margin-top:0;
	transition: all 0.2s ease-out;
}


.content_right2 .content_menu,
.content_left2 .content_menu{
	padding:2em 15%;
	text-align: center;
}

.content_left2 .content_menu.m2,
.content_left2 .content_menu.m3,
.content_right2 .content_menu.m2,
.content_right2 .content_menu.m3,
.content_right2 .content_menu.m4{
	/*display:none;*/
}
.content_menu{
	/*position:absolute;*/
	transition: all 0.2s ease-out;
	position: relative;

/*  position: absolute;

  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);

	top : -webkit-calc(50% + 40px);
	top : -moz-calc(50% + 40px);
	top : calc(50% + 40px);*/



}

.content_left2.m2,
.content_left2.m3{
	left:-100%;
	transition: all 0.2s ease-out;
}
.content_right2.m1,
.content_right2.m2,
.content_right2.m4,
.content_right2.m3{
	left:100%;
	transition: all 0.2s ease-out;
}




.content_text{
	margin:2em 0 0 0;
	text-align: left;
	font-size:18px;
	text-align: left;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    line-height: 1.65em;
}
.pic-icon {
 margin-top: 2em;
}


.dark_txt{
    color:#494949;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
}
.komidashi{
    font-size:larger;
    margin:1em auto;
}


.right_sub,
.left_sub{
	opacity:0;
}


/*
.content_menu:hover + .left_sub {
  opacity:1;
}
*/


.content_menu{
/*	display: table-cell;
	vertical-align: middle;
	background-color: rgba(255,255,255,0.2);
	height: 300px;*/
	/*background-color: rgba(255,255,255,0.2);*/
}
.h17{
	height:17px;
}
.menub{
	margin:120px auto 30px;
}

.menup{
	/*margin:38px auto 0*/
	margin:10px;
	
}
.menup img{
/*    padding:16px 28px;
    border:solid 1px white;*/
}

.menub img {
    /*padding:16px 28px;
    border:solid 1px white;*/
}


.menub::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #333;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}



/* ----------------ボタン---------------- */
.button2r,
.button2,
.button {
	position: relative;
	display: inline-block;
	padding: .3em 0 0;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: .3s;
}


.menup .button {
	position: relative;
	display: inline-block;
	padding: .3em 0 0;
	border:none;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: .3s;
}

.button:hover {
  color: #f00;
}

.button:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #fff;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.button2r::before,
.button2::before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #fff;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.button2r.hov::before,
.button2.hov::before {
  transform-origin: left top;
  transform: scale(1, 1);
}



.sec {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}
.dot_area{
	width: 100%;
	height: 100vh;
	background-image:url(../img/top/video_dot.png);
	z-index: 999;
	position: fixed;
}
.v1{
	/*display:none;*/
}

.v2,.v3{
	display:none;
}
.v2{
	/*display:block;*/
	width:60%;
}
.v3{
	/*display: block;*/
	width:50%;
	right:0;
}
 
video {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  background: url('../images/bg.png') no-repeat;
  background-size: cover;
  z-index: 0;
}
 
.bg-white {
  background: rgba(255, 255, 255, .75);
  position: absolute;
  top: 30px;
  left: 30px;
  padding: 20px;
}

.vtext{
	color:white;
    font-family: '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;
	line-height: 1.3em;
	margin-top:0.2em;
	letter-spacing: 0.2em;
	text-align: center;
	font-size: 23px;
    margin-left:80px
}
#link6,
#link7,
#link8,
#link9{
    display: inline-block;
    cursor: pointer;
}
#sub_menu{
    margin:50px auto;
}


h1.title{
	font-size: 72px;
	line-height: 1.3em;
	margin:0 auto 1%;
	letter-spacing: 0.2em;
	font-weight: normal;
}

.msg {
  display:table-cell;
  vertical-align:middle;
}


.top1 {

}

.top2{
	/*background-color: #0f0;*/
    min-height: 100%;
}
.top3{
	background-color: #f4f4f4;
}
.top_title{
	width:100%;
	background-color:#5bb250;
	height: 200px;
	background-image: url(../img/top/COMPANYPROFILE.png);
	background-repeat: no-repeat;
	background-position: center;
	z-index: 2;
}
.top_title.company{
	top:80;
}



/*
 .top3 .top_title{
	position:-webkit-sticky;
	position:sticky;
}
*/
.top_title{
	position:-webkit-sticky;
	position:sticky;
    top:0px;
}


 .top4 .top_title{
	background-image: url("../img/top/INFORMATION.png");
}
.top5 .top_title{
	background-image: url("../img/top/CONTACT.png");
}
.top6 .top_title{
	background-image: url("../img/top/RECRUIT.png");
}
.top6 .company{
	background-color:#43cffd;
}

 .top4 .company_sub{
	background-image: url("../img/top/infromation_subtitle.png");
}
.top5 .company_sub{
	background-image: url("../img/top/contact._subtitle.png");
}
.top6 .company_sub{
	background-image: url("../img/top/recruit_subtitle.png");
}

.top6 .company_sub,
.top5 .company_sub{
    /*min-height: 500px;*/
}

.company{
	
}

.company_sub{
	background-image: url(../img/top/company_subtitle.png);
	margin:0 80px;
	width:auto;
	background-position: left;
	background-color: transparent;
	height: 180px;
	z-index: 1;
}
.company_sub.sub02{
	background-image: url(../img/top/company_subtitle02.png);
}

.content_paragraph{
	margin:0 80px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color:#636660;
	font-size: 15px;
}

.paragraph_title{
	float:left;
	/*max-width:200px;*/
	width:20%;
	font-weight: bold;
	border-top:1px solid #c9c9c9;
	padding:20px 0;
}

.paragraph_text{
	float:left;
	margin:0 0 0 20px;
	width:76%;
	font-weight: lighter;
	border-top:1px solid #c9c9c9;
	padding:20px 0;
	line-height: 1.8em;
}
.paragraph_title.sub2{
	width:27%;
}
.paragraph_text.sub2{
	width:69%;
}
.content_paragraph.map{
	margin-top:54px;
	margin-bottom:100px;
	height: 422px;
	overflow: hidden;
}
.nen{
	font-family:"DIN",Arial, Helvetica, "sans-serif";
	font-size:24px;
}
.era_name{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 15px;
}





ol li{
	list-style-type: decimal;
	text-indent:1em;
}
ol{
	margin:0;
	padding-left:1em;
}






.top4{
	background-color: #f4f4f4;
}
.top5{
	background-color: #f4f4f4;
}
.top6{
	background-color: #f4f4f4;
}

.top6,
.top5{
    min-height: 1000px!important;
}
































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


.top3 .company_sub {
    background-size: 75%;
    background-position: center;
}
.company_sub {
    background-size: 75%;
    background-position: center;
}
 .top4 .company_sub,
 .top6 .company_sub {
    background-size: 25%;
    background-position: center;
}
 .top5 .company_sub{
    background-size: 32%;
 }






.content_left {
    float: none;
    width: 100%;
    position: relative;
    left: 0px;
    height: auto;
    margin-top: 2em;
}
    

    /* common */
    

    
    .top_title{
        top:60px;
    }

    


    .top_title {
        height: 6em;
    }
    
    
    /*  section1 */
    
    .mouse{
        display:none;
    }

    .vtext{
        margin:0.2em;
        font-size: 1em;
        line-height: 2em;
    }
    h1.title{
        font-size: 36px;
    }

	.section {
	    width: 100%;
	    margin: 0;
	}
	.content_top2b, .content_top2, .video_upper {
	    width: 100%;
	}
	
	.content_right2 .content_menu,
	.content_left2 .content_menu{
		padding:2em 2em;
		text-align: center;
	}


    .content_right2, .content_left2, .content_right, .content_left {
        float: none;
        width: 100%;
        position: relative;
        left:0px;
        height: auto;
    }

	.content_right2, .content_left2{
		display: none;
	}

	.top{
		height: auto;
	}
	.menub {
	    margin: 30px auto 30px;
	}



    .content_menu:first-child{
        margin: 7em 0 0 0;
    }
	.content_menu {
        margin: 5em 0 0 0;
        font-size: 0.8em;
	}
    .content_menu.second{
        margin: 1em 0 0 0;
    }
    
    
    
	.right_sub,.left_sub{
		opacity: 1;
	}
    .company_sub,
    .content_paragraph {
        margin: 0 1em;
    }
    .company_sub{
    }
.paragraph_text {
    margin: 0 0 0 4%;
    }
    
ol li {
    text-indent: 0;
}

    .era_name{

	/*font-size: 10px;*/
}
.paragraph_text,
.paragraph_title{
	/*font-size:16px*/
}
.top4 .paragraph_title{
    width:30%;
}
.top4 .paragraph_text{
    width:65%;
}

  .company_sub {
    margin-top: 4em;
} 
.left_sub img{
    max-width:121px;
}
    .right_sub img{
    max-width:432px;
    }
.menup img{
    width:90%;
    height: auto;
}


    .content_right, .content_left{
        width:100%;
        display: block;
    }



    .sp_sub1{
        background-color: #2c2c2b;
        width:100%;
        height:0px;
    }
    .sp_sub1:last-child{
        margin-bottom:3em;
}
    
    
.content_top2 {
    min-height: 1000px;
    height: auto;
    position: static;
}
    
    .section.top2{
        
    }
    .content_top2{
        
    }

    .content_all{
        height: auto;
    }


    .menup{
        position: relative;
    }





    #check1{
        width:141px;
        height: 28px;
        background-color: #f00;
        position: absolute;
        top:0;
        left:0;
        z-index:999;
        
    }
.sp_sub1{
    transition: all 0.3s ease-in-out;
}


.top6,
.top5{
    min-height: 500px!important;
}



.top4 .paragraph_title,
.top4 .paragraph_text,
.paragraph_title,
.paragraph_text,
.paragraph_title.sub2,
.paragraph_text.sub2 {
    width: 100%;
    margin:0;
    text-align: center;
}

.paragraph_text ol{
text-align: left;
}
ol {
    margin: 0 4%;
    padding-left: 1em;
}







#page_top a {
    width: 60px;
    height: 60px;
}
#page_top {
    width: 60px;
    height: 60px;
}







}








/* test */

label{
    margin:0;
    padding:0;
}

input[type=checkbox] {
    position: absolute;
    left: -9999px;
}
#top1_1_sp,
#top1_2_sp,
#top1_3_sp,
#top1_4_sp,
#top1_5_sp{
    display: block;
    width:70%;
    height: 20px;
    margin:1em auto;
    background-image: url("../img/top/top_innovation_01_sp.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#top1_4_sp,
#top1_5_sp{
    width:90%;
}


#top1_2_sp{background-image: url("../img/top/top_innovation_02_sp.png");}
#top1_3_sp{background-image: url("../img/top/top_innovation_03_sp.png");}
#top1_4_sp{background-image: url("../img/top/top_creation_01_sp.png");}
#top1_5_sp{background-image: url("../img/top/top_creation_02_sp.png");}

input#toggle1:checked ~ div#ss1 {height: 100px;}
input#toggle2:checked ~ div#ss2 {height: 100px;}
input#toggle3:checked ~ div#ss3 {height: 100px;}
input#toggle4:checked ~ div#ss4 {height: 100px;}
input#toggle5:checked ~ div#ss5 {height: 100px;}
input#toggle1:checked ~ #top1_1_sp {background-image: url("../img/top/top_innovation_01_sp2.png");}
input#toggle2:checked ~ #top1_2_sp {background-image: url("../img/top/top_innovation_02_sp2.png");}
input#toggle3:checked ~ #top1_3_sp {background-image: url("../img/top/top_innovation_03_sp2.png");}
input#toggle4:checked ~ #top1_4_sp {background-image: url("../img/top/top_creation_01_sp2.png");}
input#toggle5:checked ~ #top1_5_sp {background-image: url("../img/top/top_creation_02_sp2.png");}

/*
<input type="checkbox" id="toggle">
<label for="toggle" id="aaa">Toggle Button</label>

<div class="changed">「Toggle Button」をクリックすると、
フォントの色が変わります。</div>     
*/

/*
.content_left2.m1,
.content_left2.m2,
.content_left2.m3,
.content_right2.m1,
.content_right2.m2,
.content_right2.m4,
.content_right2.m3{
	position:relative;
    left:0;
    width:100%;
    height: auto;
}

.content_right2, .content_left2, .content_right, .content_left {
    float: none;
    width: 100%;
    height: 100%;
    display: table;
    display: block;

}
*/