@charset "UTF-8";

/*-----------------------
 main
 -----------------------*/

/*-----------------------
 #topContents
 -----------------------*/
#topContents{
	position: relative;
	text-align: left;
	padding-top: 180px;
    padding-bottom: 40px;
    overflow: hidden;
}

#topContents article{
}

#topContents h2{
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1.6;
}

#topContents h3{
    font-size: 15px;
    line-height: 2;
    letter-spacing: 2px;
    font-weight: normal;
    padding-top: 20px;
    padding-bottom: 20px;
}


#topContents .shadow_logo{
    position: absolute;
    top: -10%;
    right: -11%;
}

#topContents #shadow_logo{
    fill: #F7F7F7;
    -webkit-transform: scale(1.2) rotate(-90deg);
       -moz-transform: scale(1.2) rotate(-90deg);
        -ms-transform: scale(1.2) rotate(-90deg);
         -o-transform: scale(1.2) rotate(-90deg);
            transform: scale(1.2) rotate(-90deg);
}

@media (max-width: 360px){
}

@media (min-width: 768px){
	#topContents{
		padding-top: 300px;
	    padding-bottom: 100px;
	}
	#topContents h2{
	    font-size: 35px;
	}
	#topContents h3{
	    font-size: 19px;
	    line-height: 2.2;
	    letter-spacing: 3px;
	    padding-top: 40px;
	    padding-bottom: 20px;
	}

	#topContents .shadow_logo{
	    position: absolute;
	    top: -10%;
	    right: -11%;
	}
}

@media (min-width: 992px){
	#topContents{
		padding-top: 250px;
	    padding-bottom: 150px;
	}
	#topContents h3{
	    font-size: 19px;
	    line-height: 2.2;
	    letter-spacing: 3px;
	    font-weight: normal;
	    padding-top: 65px;
	    padding-bottom: 20px;
	}
	#topContents .shadow_logo{
	    right: -9%;
	}

}

@media (min-width: 1200px){
	#topContents h2{
	    font-size: 40px;
	}
	#topContents .shadow_logo{
	    right: -7%;
	}
}


/*-----------------------
 #aboutWrapper
 -----------------------*/
#aboutWrapper{
	padding-bottom: 40px;
    position: relative;
	color: #fff;
}

#aboutWrapper article{
    height: 100%;
    width: 100%;
}

#aboutImage{
	height: 350px;
}

#aboutWrapper section{
    background-color: #000;
    padding: 60px 15px 60px 15px;
}

#aboutWrapper h2{
    font-size: 28px;
    position: relative;
    line-height: 1.8;
    letter-spacing: 1px;
}

#aboutWrapper p[data-about="mainText"]{
    font-size: 16px;
    padding-top: 80px;
    position: relative;
    line-height: 1.8;
    padding-bottom: 60px;
    font-weight: normal;
}



/* ライン */
#aboutWrapper p[data-about="mainText"]::before{
    content: "";
    position: absolute;
    background-color: #fff;
    top: 50px;
    left: 0;
    width: 50px;
    height: 1px;
}

@media (min-width: 768px){
	#aboutImage{
		height: 650px;
	}
	#aboutWrapper section{
	    position: absolute;
	    float: right;
	    background-color: rgba(0, 0, 0, 0.9);
	    padding: 60px 60px 60px 60px;
	    width: 70%;
	    top: 0;
	    right: 0;
	    -webkit-transform: translate(0%,-50px);
	       -moz-transform: translate(0%,-50px);
	        -ms-transform: translate(0%,-50px);
	         -o-transform: translate(0%,-50px);
	            transform: translate(0%,-50px);
	}
}

@media (min-width: 992px){
	#aboutWrapper section{
		background-color: #000;
	    padding: 60px 90px 60px 90px;
	    width: 60%;
	}
}

@media (min-width: 1200px){
	#aboutImage{
		height: 700px;
	}
	#aboutWrapper section{
	    padding: 60px 100px 60px 100px;
	    width: 45%;
	}
}


/*-----------------------
 #innovationWrapper
 -----------------------*/
#innovationWrapper{
	padding-bottom: 40px;
    position: relative;
    overflow: hidden;
}

/*--- inno_Header ----*/
article.inno_Header{
    padding-top: 50px;
    padding-bottom: 50px;
}

article.inno_Header h2#innovation{
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1.6;
}

article.inno_Header h2#innovation::before{
	content: "";
    position: absolute;
    background-color: #000;
    bottom: -25px;
    left: 15px;
    width: 40px;
    height: 2px;
}

article.inno_Header p{
	font-size: 16px;
    line-height: 2.2;
    font-weight: normal;
    padding-top: 50px;
}

article.inno_Header p[data-inno_Header="link"]{
	padding-top: 15px;
}


/*--- inno_Map ---*/
article.inno_Map{
	background-color: #f9f9f9;
	padding-top: 50px;
    padding-bottom: 50px;
}

article.inno_Map h2#inno-Map{
	text-align: center;
    padding-bottom: 20px;
}

article.inno_Map h2#inno-Map span{
	display: inline-block;
    font-size: 30px;
    color: #3e3a39;
    padding: 5px 25px 5px 25px;
    background-color: inherit;
    border: solid 2px #3e3a39;
    vertical-align: middle;
    letter-spacing: 1px;
}

article.inno_Map p[data-inno="text"]{
    font-size: 16px;
    text-align: left;
    padding-bottom: 25px;
    line-height: 2;
}

article.inno_Map section{
	position: relative;
}


/* ---visible-xs visible-sm--- */
article.inno_Map div[data-inno="circle_xs"]{
}

article.inno_Map div[data-inno="circle_xs"] figure{
}


article.inno_Map div[data-inno="circle_xs"] div[data-inno="itemWrapper_xs"]{
	padding-top: 30px;
}

article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"]{
	padding-top: 10px;
	padding-bottom: 10px;
}

article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"] h3{
	font-size: 18px;
	padding-bottom: 5px;
}

article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"] i{
    display: inline-block;
    font-style: normal;
    margin-right: 7px;
}

article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"] i.indigo{
    color: #217AC0;
}
article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"] i.blue{
    color: #2DA7E0;
}
article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"] i.yellow{
    color: #FFE100;
}
article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"] i.green{
    color: #45B035;
}


article.inno_Map div[data-inno="circle_xs"] div[data-inno="items_xs"] span{
	display: block;
	font-size: 14px;
	line-height: 1.6;
	padding-left: 25px;
}



/* ---visible-md visible-lg--- */
article.inno_Map div[data-inno="circle"]{
	position: absolute;
	top: 0;
	left: 50%;
    -webkit-transform: translate(-50%,0);
       -moz-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
         -o-transform: translate(-50%,0);
            transform: translate(-50%,0);
}


article.inno_Map div[data-inno="circle"] div[data-inno="circle_logo"]{
    position: absolute;
	top: 50%;
	left: 50%;
    -webkit-transform: translate(-50%,-50%);
       -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
         -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

article.inno_Map div[data-inno="circle"] div[data-inno="circle_logo"] img{
	-webkit-transform: scale(0.5);
	   -moz-transform: scale(0.5);
	    -ms-transform: scale(0.5);
	     -o-transform: scale(0.5);
	        transform: scale(0.5);
}

article.inno_Map div[data-inno="circle"] div[data-inno="items"]{
    position: absolute;
}

article.inno_Map div[data-inno="circle"] div[data-inno="items"] h3{
	font-size: 18px;
	padding-bottom: 5px;
}
article.inno_Map div[data-inno="circle"] div[data-inno="items"] span{
	display: block;
	font-size: 14px;
	line-height: 1.6;
}

article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_1"] span,
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_2"] span,
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_3"] span,
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_4"] span{
	padding-left: 25px;
}

/* color */
i.fa.indigo{color: #217AC0;}
i.fa.blue{color: #2DA7E0;}
i.fa.yellow{color: #FFE100;}
i.fa.green{color: #45B035;}


/* position */
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_1"]{
    top: -8%;
    right: -50%;
    text-align: left;
}
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_2"]{
    top: 16%;
    right: -50%;
    text-align: left;
}
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_3"]{
    top: 60%;
    right: -62%;
    text-align: left;
}
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_4"]{
	top: 95%;
    right: -55%;
    text-align: left;
}
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_5"]{
    top: 95%;
    left: -35%;
    text-align: right;
}
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_6"]{
    top: 60%;
    left: -65%;
    text-align: right;
}
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_7"]{
    top: 16%;
    left: -55%;
    text-align: right;
}
article.inno_Map div[data-inno="circle"] div[data-inno-items-position="pos_8"]{
    top: -8%;
    left: -25%;
    text-align: right;
}



/* ---inno_example--- */
#inno_example{
	background-color: #f3f3f3;
    position: relative;
}

article.inno_example{
	padding-top: 80px;
    padding-bottom: 50px;
}

article.inno_example h2{
	text-align: center;
    padding-bottom: 20px;
    font-size: 22px;
    line-height: 1.6;
}

article.inno_example div[data-inno="exampleItems"]{
	padding-bottom: 20px;
}

article.inno_example span[data-inno="exampleCaption"]{
    display: inline-block;
    font-size: 14px;
    color: #3e3a39;
    padding-top: 5px;
    padding-bottom: 5px;
}

article.inno_example p[data-inno="text"]{
	font-size: 15px;
    line-height: 1.8;
    font-weight: normal;
    padding: 10px 0px 10px 0px;
}

article.inno_example p[data-inno="text"] span{
	display: block;
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
}

article.inno_example p[data-inno="text"] span a{
	text-decoration: underline;
}

#inno_example p[data-inno="link"]{
    position: absolute;
    bottom: 0%;
    left: 50%;
    -webkit-transform: translate(-50%,50%);
       -moz-transform: translate(-50%,50%);
        -ms-transform: translate(-50%,50%);
         -o-transform: translate(-50%,50%);
            transform: translate(-50%,50%);
}

@media (min-width: 768px){
	article.inno_Header{
	    padding-top: 50px;
	    padding-bottom: 80px;
	}
	article.inno_Map div[data-inno="circle_xs"] figure{
	    padding-left: 150px;
	    padding-right: 150px;
	}
	article.inno_example h2{
	    padding-bottom: 50px;
	}
}

@media (min-width: 992px){
	article.inno_Header p{
	    padding-top: 10px;
	}
	article.inno_Header p[data-inno_Header="link"]{
		padding-top: 25px;
	}
	article.inno_Map{
		padding-top: 50px;
	    padding-bottom: 50px;
	    height: 780px;
	}
	article.inno_Map h2#inno-Map{
		text-align: center;
	    padding-bottom: 25px;
	}
	article.inno_Map p[data-inno="text"]{
		font-size: 16px;
		text-align: center;
	    padding-bottom: 80px;
	    line-height: 2;
	}

	article.inno_example p[data-inno="text"]{
		padding: 10px 80px 10px 80px;
	}
}

@media (min-width: 1200px){
	article.inno_example p[data-inno="text"]{
		padding: 10px 100px 10px 100px;
	}
}



/*-----------------------
 instagramWrapper
 -----------------------*/
#instagramWrapper{
	padding-top: 40px;
	padding-bottom: 150px;
    position: relative;
	color: #fff;
}

#instagramWrapper section div.instaList{
    position: relative;
    padding: 5px;
}

#instagramWrapper section div.instaList a:hover > p.instaImage > img{
	-webkit-transform: scale(0.95);
	   -moz-transform: scale(0.95);
	    -ms-transform: scale(0.95);
	     -o-transform: scale(0.95);
	        transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.3);
}

#instagramWrapper section div.instaList p.instaImage{
	position: relative;
	overflow: hidden;
}

#instagramWrapper section div.instaList p.instaImage img{
   	transition: all 0.2s cubic-bezier(0.645,0.045,0.555,1);
	-moz-transition: all 0.2s cubic-bezier(0.645,0.045,0.555,1);
	-webkit-transition: all 0.2s cubic-bezier(0.645,0.045,0.555,1);
	-ms-transition: all 0.2s cubic-bezier(0.645,0.045,0.555,1);
	-o-transition: all 0.2s cubic-bezier(0.645,0.045,0.555,1);
}

#instagramWrapper p[data-insta="link"]{
    position: absolute;
    bottom: -5%;
    left: 50%;
    -webkit-transform: translate(-50%,50%);
       -moz-transform: translate(-50%,50%);
        -ms-transform: translate(-50%,50%);
         -o-transform: translate(-50%,50%);
            transform: translate(-50%,50%);
}

@media (min-width: 768px){
	#instagramWrapper section div.instaList{
		position: relative;
		padding: 30px;
	}
}


/*-----------------------
 #contactWrapper
 -----------------------*/
#contactWrapper{
	padding-bottom: 120px;
    text-align: center;
}

#contactWrapper h2{
    font-size: 50px;
    color: #00573a;
    padding-top: 80px;
}

#contactWrapper article{
	padding-top: 30px;
}

#contactWrapper article{
	text-align: left;
    font-size: 16px;
}

#contactWrapper article p[data-contact="link"]{
	text-align: center;
}

#contactWrapper article p[data-contact="link"] button{
	font-size: 16px;
    letter-spacing: 1px;
    border-radius: 10px;
	color:#00573a;
	background-color: rgba(255,255,255,0);
	border: solid 2px #00573a;
	padding: 12px 20px 10px 20px;
	transition: all 0.1s cubic-bezier(0.645,0.045,0.555,1);
	-moz-transition: all 0.1s cubic-bezier(0.645,0.045,0.555,1);
	-webkit-transition: all 0.1s cubic-bezier(0.645,0.045,0.555,1);
	-ms-transition: all 0.1s cubic-bezier(0.645,0.045,0.555,1);
	-o-transition: all 0.1s cubic-bezier(0.645,0.045,0.555,1);
}

#contactWrapper article p[data-contact="link"] button:hover{
	background-color: #00573a;
	color: #fff;
	text-decoration: none;
}