@charset "utf-8";
/*

　top.css

*/

/* # =================================================================
   #  
   #  Top Main Image
   #  
   # ================================================================= */
   
#top_main_image {
	position:fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index:4;
}


#top_main_image dl {
	position:absolute;
	top:calc(50vh - 75px);
	left:0;
	width:100vw;
	height:auto;
	min-height:200px;
    z-index: 101;
	background: rgba(0,153,204,0.7);
	padding:1.6rem;
}

#top_main_image dl dt {
	color:#FFF;
	font-size:2.0rem;
	letter-spacing:0.25rem;
	text-align:left;
}

#top_main_image dl dd em {
	color:#003366;
	font-style:normal;
}

#top_main_image dl dd span {
	font-size:4.0rem;
}

#top_main_image dl dd {
	color:#FFF;
	font-size:2.0rem;
	letter-spacing:0.25rem;
	text-align:left;
}

#top_main_image dl dd:nth-of-type(1) {
	color:#FFF;
	font-size:6.0rem;
	font-weight:bold;
	margin:0 0 1.0rem 0;
}

#top_main_image dl dd.catch_copy_l {
	text-align:left;
}





.scroll_down {
	position:fixed;
	bottom:75px;
	left:15vw;
	width:calc(70vw - 0px);
	z-index:4;
}

.scroll_down div {
	width:40px;
	margin:auto auto;
}


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

#top_main_image dl dd.catch_copy_l {
	font-size:4.6rem;
}

}

@media screen and (max-width : 1025px) {
	
	
#top_main_image {
	position:relative;
	height:100vh;
}

#top_main_image dl {
	position:fixed;
	height:25%;
	top:75%;
	bottom:0;
	left:0;
	width:100%;
	height:;
	text-align:center;
	z-index:9999;
}

	
	
	
#top_main_image dl {
	width:100vw;
}


#top_main_image dl dd span {
	font-size:3.0rem;
}

#top_main_image dl dd {
	color:#FFF;
	font-size:1.8rem;
	letter-spacing:0.25rem;
}

#top_main_image dl dd:nth-of-type(1) {
	color:#FFF;
	font-size:3.6rem;
	font-weight:bold;
}


.scroll_down {
	display:none;
}



}

@media screen and (max-width : 767px) {
#top_main_image div img {
}

#top_main_image {
	position:relative;
	height:100vh;
}

#top_main_image dl {
	position:fixed;
	height:30%;
	top:70%;
	bottom:0;
	left:0;
	width:100%;
	height:;
	text-align:center;
	z-index:9999;
}


#top_main_image dl dt {
	font-size:1.2rem;
	line-height:1.4;
	padding:0;
	width:100%;
	margin:auto auto 1.0rem auto;
}

#top_main_image dl dt img {
	width:100%;
	height:auto;
}

#top_main_image dl dd:nth-of-type(1) {
	color:#FFF;
	font-size:2.7rem;
	font-weight:bold;
	line-height:1.25;
}


#top_main_image dl dd {
	color:#FFF;
	font-size:1.2rem;
	letter-spacing:0;
}

#top_main_image dl dd:nth-of-type(2) {
	text-align:left;
	width:100vw;
	margin:auto auto;
}

#top_main_image dl dd:nth-of-type(2) br {
	display:none;
}

/*
.scroll_down {
	position:fixed;
	bottom:80px;
	left:15vw;
	width:70vw;
	z-index:4;
}

.scroll_down div {
	width:40px;
	margin:auto auto;
}
*/

scroll_down {
	display:none;
}



}
@media screen and (max-width: 767px) and (min-height: 735px) {
/*
#top_main_image div img {
	height:calc(100vh - 150px)!important;
}
*/
}


@media screen and (max-height : 481px) {


#top_main_image dl dt {
	font-size:1.1rem;
	line-height:1.2;
	margin:0 0 0.25rem 0;
}


#top_main_image dl dd:nth-of-type(1) {
	font-size:2.0rem;
	font-weight:normal;
}

#top_main_image dl dd {
	line-height:1.2;
}




.scroll_down {
	display:none;
}



}





/* # =================================================================
   #  
   #  videoタグ
   #  
   # ================================================================= */

.mainvisual {
	width: 100%;
	height:100vh;
	overflow: hidden;
	position:relative;
}
video {
	position: fixed;
	top: 100px;
	left: 0;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	z-index:1;
}
#container {
	position: relative;
	background: #FFF;
	z-index:4;
}

.mainvisual header,.mainvisual #header_msg {
	position: fixed;
	z-index:3;
}



#Layer {
	width:100%;
	height:100%;
	/*background:url(../img/top/video_layer.png);*/
	background-color:#036;
	position:fixed;
	top:0;
	left:0;
	z-index:2;
	opacity:.6;
}


.sp {
	background:url(../video/poster.png) no-repeat top center;
	background-position:90% 0;
	position:relative;
	right:0;
	top:0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	background-size:cover;
	z-index:2;
}



@media screen and (max-width : 767px) {
video {
	top: 50px;
	display:none;
}





}



#title_box {
	position:relative;
	height:100vh;
}




/* # =================================================================
   #  
   #  Gallery 
   #  
   # ================================================================= */

#top_gallery {
	margin:0 0 7.5rem 0;
	padding:0 0 5.0rem 0;
}

#top_gallery ul {
	background-color:#069;
}

#top_gallery ul li {
	padding:12px 5px 10px 5px;
}

#top_gallery ul li:nth-of-type(1) {
	
}



@media screen and (max-width : 767px) {
#top_gallery {
	margin:0 0 2.5rem 0;
	padding:0 0 0 0;
}

#top_gallery ul li {
	padding:0;
}
	
	
#top_gallery ul {
	background-color:#FFF;
}




}



















/* # =================================================================
   #  
   # コンテンツ見出し
   #
   # ================================================================= */

.contents_headding {
	text-align:center;
	width:400px;
	margin:auto auto;
	border-bottom: solid 1px #333;
}

.contents_headding h3 {
	border-bottom: solid 3px #333;
	padding-bottom:5px;
	margin:0 0 50px 0;
}

.contents_headding h3 {
	margin-bottom: 2px;
	padding:0;
	font-weight:normal;
}

.contents_headding h3 dl {
	padding:3px;
}

.contents_headding h3 dl dt {
	font-size:5.0rem;
}

.contents_headding h3 dl dt:first-letter {
	color:#0099CC;
}

.contents_headding h3 dl dd {
	font-size:1.6rem;
}

@media screen and (max-width : 767px) {
	
.contents_headding {
	width:100%;
}

.contents_headding h3 dl dt {
	font-size:3.25rem;
}



}

	
}





/* # =================================================================
   #  
   # Product 入り口 
   #
   # ================================================================= */


#product_entrance {
}

#product_entrance > div ul {
	display:flex;
	max-width:1600px;
	margin:auto auto;
}

#product_entrance > div ul li {
	width:50%;
	height:700px;
	background-color:#EFEFEF;
	padding:20.0rem 0 5.0rem 0;
}

#product_entrance .product02 ul li:nth-child(1) {
}



.product_entrance_image {
	margin:3.0rem 0;
	position:relative;
}


.product_entrance_image h4 {
	position:absolute;
	left:0;
	right:0;
}

.product_entrance_image h4 dl {
	text-align:center;
	font-size:2.0rem;
	padding:5.0rem 0;
}

.product_entrance_image h4 dl dt {
	font-size:5.0rem;
	font-weight:normal;
}

.product_entrance_image h4 dl dd {
	font-size:1.8rem;
	font-weight:normal;
}


#product_entrance .product01 > ul li:nth-child(2) {
	background-color:#55C4F9;
}

#product_entrance .product02 > ul li:nth-child(1) {
	order:2;	
}

#product_entrance .product02 > ul li:nth-child(2) {
	background-color:#99CC33;
}


#product_entrance > div ul li .ex_box {
	width:90%;
	margin:5.0rem auto;
}

#product_entrance > div ul li .ex_box h5 {
	font-size:2.2rem;
	font-weight:normal;
	color:#FFF;
}

#product_entrance > div ul li .ex_box p {
	font-size:1.5rem;
	margin:2.5rem 0;
	line-height:1.6;
}

#product_entrance > div ul li dl {
	position:relative;
	height:480px;
}

#product_entrance > div ul li dl dt {
	position:absolute;
	text-align:right;
	padding:0 2.0rem 0 0;
}

#product_entrance > div ul li dl dd {
	position:absolute;
	bottom:0;
	right:0;
	font-size:1.6rem;
	padding:0 1.0rem 0 0;
}

#product_entrance > div ul li dl dt img {
	width:75%;
	height:auto;
}

.product_entrance_image > div.product02 ul li dl dt img {
	width:85%!important;
	height:auto;
}





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

	
#product_entrance > div ul {
	display:block;
	max-width:100%;
	margin:auto auto;
}

#product_entrance .product01 > ul li:nth-child(1) {
	height:auto;
	min-height:470px;
	padding:15.0rem 0 0 0;
}

#product_entrance .product01 > ul li:nth-child(2) {
	padding:5.0rem 0 0 0;
	height:auto;
	min-height:400px;
}

#product_entrance .product02 > ul li:nth-child(1) {
	height:auto;
	min-height:400px;
	padding:10.0rem 0 0 0;
}

#product_entrance .product02 > ul li:nth-child(2) {
	padding:5.0rem 0 0 0;
	height:auto;
	min-height:350px;
}

#product_entrance > div ul li dl dt {
	min-width:300px;
	height:auto;
	position:relative;
	text-align:center;
	padding:5.0rem 0 0 0;
}



#product_entrance > div ul li dl dt img {
	max-width:350px;
	height:auto;
}

.product_entrance_image > div.product02 ul li dl dt img {
	width:60%!important;
	max-width:500px;
	height:auto;
}

#product_entrance > div ul li dl dd {
	position:relative;
	padding:0 1.0rem 0 1.0rem;
	text-align:right;
}



#product_entrance > div ul li {
	width:100%;

}



.product_entrance_image h4 dl dt {
	font-size:3.6rem;
	font-weight:normal;
}


	
#product_entrance > div ul li dl {
	position:relative;
	max-height:250px;
}
	
#product_entrance > div ul li .ex_box {
	width:95%;
	margin:1.0rem auto;
	padding:0 0 2.5rem 0;
}	

#product_entrance > div ul li .ex_box h5 {
	font-size:1.8rem;
}

#product_entrance > div ul li dl {
	width:100%;
	height:300px;
}



	
}


/* # =================================================================
   #  
   # News 入り口 
   #
   # ================================================================= */

.news {
	margin:3.0rem 0;
	padding:3.0rem;
}

.news ul {
	font-size:1.6rem;
	max-width:1400px;
	margin:auto auto;
}

.news ul li {
	width:90%;
	border-bottom:1px solid #333;
	margin:0 auto 0 auto;
}

.news ul li a {
	text-decoration:none;
	display:block;
	padding:2.0rem 0;
}

.news ul li a:hover {
	background-color:#DAF4FE;
}

.news ul li dl {
	display:flex;
}

.news ul li dl dt {
	width:15%;
	white-space:nowrap;
	font-weight:bold;
}

.news ul li a dt {
	color:#333;
}


.news ul li dl dd:nth-of-type(1) {
	width:20%;
	white-space:nowrap;
}

.news ul li dl dd span {
	font-size:1.4rem;
	width:150px;
	background-color:#006699;
	color:#FFF;
	display:block;
	text-align:center;
	padding:0.25rem;
}

.news ul li dl dd:nth-of-type(2) {
	width:auto;
	white-space:nowrap;
}








@media screen and (max-width : 1025px) {
.news ul li {
	width:98%;
}

.news ul li a {
	text-decoration:none;
	display:block;
	padding:1.0rem 0;
}

.news ul li dl {
	display:flex;
	flex-wrap:wrap;
}	
	
.news ul li dl dt {
	width:20%;
	white-space:normal;
	font-weight:bold;
}

.news ul li dl dd:nth-of-type(1) {
	width:20%;
	white-space:normal;
}

.news ul li dl dd:nth-of-type(2) {
	width:auto;
	white-space:normal;
	margin:0.5rem 0 0 0;
}
	
}

@media screen and (max-width : 767px) {
	
.news {
	padding:0.5rem;
}
	
.news ul li {
	width:98%;
}

.news ul li dl dt {
	width:100%;
}


.news ul li dl dd:nth-of-type(2) {
	width:100%!important;
}


}







/* # =================================================================
   #  
   # Founder ＆ Chairman'ｓ Blog 入り口
   #
   # ================================================================= */

#blog_entrance {
	background-color:#D1FEF3;
	padding:5.0rem 0;
}

#blog_entrance .contents_headding {
	
}
	

#blog_entrance .contents_headding h3 dl dt {
	white-space:nowrap;
	font-size:4.0rem;
}

.blog {
	margin:3.0rem 0;
	padding:3.0rem;
}

.blog ul {
	font-size:1.6rem;
	max-width:1400px;
	margin:auto auto;
}

.blog ul li {
	width:90%;
	border-bottom:1px solid #333;
	margin:0 auto 0 auto;
}

.blog ul li a {
	text-decoration:none;
	display:block;
	padding:2.0rem 0;
}

.blog ul li a:hover {
	background-color:#FFF;
}

.blog ul li dl {
	display:flex;
}


.blog ul li dl dt {
	width:15%;
	white-space:nowrap;
	font-weight:bold;
}

.blog ul li a dt {
	color:#333;
}


.blog ul li dl dd {
	width:20%;
	white-space:nowrap;
}

.blog ul li dl dd span {
	font-size:1.4rem;
	width:150px;
	background-color:#006699;
	color:#FFF;
	display:block;
	text-align:center;
	padding:0.25rem;
}



@media screen and (max-width : 1025px) {
.blog ul li {
	width:98%;
}

.blog ul li a {
	text-decoration:none;
	display:block;
	padding:1.0rem 0;
}

.blog ul li dl {
	display:flex;
	flex-wrap:wrap;
}	
	
.blog ul li dl dt {
	width:100%;
	white-space:normal;
	font-weight:bold;
}

.blog ul li dl dd:nth-of-type(1) {
	width:100%;
	white-space:normal;
}


	
}

@media screen and (max-width : 767px) {
	
.blog {
	padding:0.5rem;
}
	
.blog ul li {
	width:98%;
}

.blog ul li dl dt {
	width:40%;
}

#blog_entrance .contents_headding h3 dl dt {
	white-space:nowrap;
	font-size:3.25rem;
}

}









/* # =================================================================
   #  
   # company_entrance 会社概要
   #
   # ================================================================= */


#company_entrance {
	text-align:center;
	margin:0 0 0 0;
}



#company_entrance .company_image {
	color:#FFF;
	position:relative;
	margin:5.0rem 0 0 0;
}
#company_entrance .company_image ul {
	display:flex;
	align-items: center;
	width:96vw;
	max-height:600px;
	margin:auto auto;
	background-color:#C8EDFF;
}
#company_entrance .company_image ul li {
	width:50%;
	height:600px;
	position:relative;
}
#company_entrance .company_image ul li img {
	width:100%;
	height:600px;
	object-fit: cover;
	display:block;
}
#company_entrance .company_image ul li img.object-fit-img {
	object-fit: cover;
	object-position: center 50%;
}
.company_data {
	width:100%;
	min-height:300px;
	position:absolute;
	top:50%;
	-ms-transform: translateY(-50%);
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
}
.company_data h4 {
	color:#0072BA;
	font-weight:normal;
	font-size:3.0rem;
	margin:0 auto 3.0rem auto;
	position:relative;
}

.company_data h4 span:nth-of-type(2) {
	font-size:1.8rem;
}


.company_data dl {
	margin:1.0rem 0 1.0rem 10%;
	font-size:1.8rem;
	text-align:left;
	display:flex;
	flex-wrap:wrap;
	line-height:2.0;
}
.company_data dl dt {
	width:15%;
	color:#0099CC;
}
.company_data dl dd {
	width:85%;
	color:#333;
}
 @media screen and (max-width : 1025px) {
#company_entrance .company_image:before {
	display:none;
}
#company_entrance .company_image ul {
	width:100%;
	height:500px;
}
#company_entrance .company_image ul li {
	width:50%;
	height:500px;
	position:relative;
}
#company_entrance .company_image ul li img {
	width:100%;
	height:500px;
}
.company_data h4 {
	font-weight:normal;
	font-size:3.0rem;
	margin:0 auto 3.0rem 2.0rem;
	padding:0 0 0 2.0rem;
	width:90%;
	position:relative;
}
.company_data h4:before {
	position:absolute;
	content:"";
	width:70px;
	height:60px;
	background-image:url(../img/icon/ico_logo_company01.png);
	background-size:contain;
	background-repeat:no-repeat;
	top:0;
	left:0;
}
.company_data dl {
	margin:1.0rem 0 1.0rem 5%;
	font-size:1.5rem;
}
}

@media screen and (max-width : 767px) {
	
.company_data h4 {
	width:100%;
	margin:0 0 2.0rem 0;
	font-size:2.0rem;
}

.company_data h4 span:nth-of-type(2) {
	font-size:1.6rem;
}

	
	
	
#company_entrance .company_image:before {
	display:none;
}
#company_entrance .company_image ul {
	width:100%;
	display:block;
	max-height:auto!important;
	height:auto!important;
}
#company_entrance .company_image ul {
	width:100%;
}
#company_entrance .company_image ul li {
	width:100%;
	height:auto;
	position:relative;
}
#company_entrance .company_image ul li:nth-child(1) img {
	width:100vw;
	height:250px;
}
#company_entrance .company_image ul li:nth-child(2) {
	min-height:440px;
	background-color:#C8EDFF;
}
.company_image {
	padding:0 0 2.0rem 0;
}


.company_data dl {
	margin:0 1.0rem;
	font-size:1.6rem;
	text-align:left;
	display:flex;
	flex-wrap:wrap;
	flex-wrap:wrap;
	line-height:1.8;
}
.company_data dl dt {
	width:100%;
	color:#0099CC;
	font-weight:bold;
}
.company_data dl dd {
	width:100%;
	color:#333;
	margin:0 0 1.0rem 0;
}





}


@media screen and (max-height : 481px) {
	
.company_data dl {
	margin:0 1.0rem;
	font-size:1.5rem;
	text-align:left;
	display:flex;
	flex-wrap:wrap;
	line-height:1.5;
}



	
}













/* # =================================================================
   #  
   # Contact お問い合わせ
   #
   # ================================================================= */



#contact_entrance {
	text-align:center;
	margin:0 0 15.0rem 0;
}


#contact_entrance .normal_btn a {
	line-height:36px;
	padding:1.0rem 0 0 0;
	background: rgb(0,102,204); /* Old browsers */
	background: -moz-linear-gradient(left, rgb(0,102,204) 0%, rgb(0,204,204) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgb(0,102,204) 0%,rgb(0,204,204) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgb(0,102,204) 0%,rgb(0,204,204) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066cc', endColorstr='#00cccc',GradientType=1 ); /* IE6-9 */
	border:none;
	border:1px solid #09C;
}

#contact_entrance .normal_btn a:hover {
	background: rgb(198,200,197); /* Old browsers */
	background: -moz-linear-gradient(left, rgb(198,200,197) 1%, rgb(238,238,238) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgb(198,200,197) 1%,rgb(238,238,238) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgb(198,200,197) 1%,rgb(238,238,238) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c8c5', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 */
	border:1px solid #039;
}


#contact_entrance .btn_area a dl dt {
	font-size:3.0rem;
}

#contact_entrance .btn_area a dl dd {
	font-size:1.4rem;
}



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

#contact_entrance {
	text-align:center;
	margin:5.0rem 0 10.0rem 0;
}

}



/* # =================================================================
   #  
   # Acccess アクセス
   #
   # ================================================================= */

/*** MAP ***/

.map {
	position: relative;
	width:100%;
	overflow: hidden;
}
 
.map iframe,.map object,.map embed {
	width:100%
}


/*********************************************/

.access_intro {
	width:100%;
	margin:auto auto;
	padding:3.0rem 0;
	position:relative;
}





.access_intro ul li {
	font-size:1.8rem;
	padding:0.5rem;
	margin:0;
	text-align:center;
}

.access_intro ul {
	margin:3.0rem 0 3.0rem 0;
}





@media screen and (max-width : 1025px) {
	
.access_intro {
	width:100%;
}

.access_intro:before {
	display:none;
}

}