@charset "UTF-8";
/* CSS Document */

/*opening*/
#opening_anima{position:relative;top:-16px;max-width:100%;height:100vh;overflow: hidden; -webkit-backface-visibility: hidden;　backface-visibility: hidden;}
#loader{position: fixed;top: 50%;left: 50%;width: 85px; margin-top: -50px;margin-left: -40px;text-align: center;z-index: 205;}
#loader img{width: 85px;height: 60px;-webkit-backface-visibility: hidden;　backface-visibility: hidden;}
#loader-bg{position: fixed; top:0px;left: 0px;width: 100%;height: 100%;z-index: 200;background-color:#fff;-webkit-backface-visibility: hidden;　backface-visibility: hidden;}
.loading { margin: 0 auto;}
@-webkit-keyframes loading { 0% { -webkit-transform: scale(1); transform: scale(1); }
 50% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0.7; }
 100% {-webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes loading {0% { -webkit-transform: scale(1); transform: scale(1); }
 50% { -webkit-transform: scale(0.5);  transform: scale(0.5); opacity: 0.7; }
 100% {-webkit-transform: scale(1);transform: scale(1); opacity: 1; } }
.loading > div:nth-child(1) { -webkit-animation-delay: 0.22s; animation-delay: 0.22s; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; }
.loading > div:nth-child(2) { -webkit-animation-delay: 0.64s; animation-delay: 0.64s; -webkit-animation-duration: 1s; animation-duration: 1s; }
.loading > div:nth-child(3) { -webkit-animation-delay: -0.15s; animation-delay: -0.15s; -webkit-animation-duration: 0.63s; animation-duration: 0.63s; }
.loading > div { background-color: #21448e; width: 10px; height: 10px;border-radius: 100%; margin: 4px;
-webkit-animation-fill-mode: both; animation-fill-mode: both;display: inline-block;
-webkit-animation-name: loading; animation-name: loading;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-delay: 0;animation-delay: 0; }
.opening-fade{overflow: hidden;position: relative;top:0;z-index: 201;}
.opening-fade:before {animation: opening-fade 1s cubic-bezier(.4, 0, .2, 1) forwards;-webkit-animation: opening-fade 1s cubic-bezier(.4, 0, .2, 1) forwards;
 background:#fff;bottom: 0;content: '';left: 0;pointer-events: none;position: absolute;right: 0;top: 0;z-index: 201;}
@keyframes opening-fade {100% {transform: translateX(100%);}}
@-webkit-keyframes opening-fade {100% {-webkit-transform: translateX(130%);-webkit-backface-visibility:hidden;}}
.slider_area{position:relative; width:100%;height:100vh; background-color:#E2DEDE;}
.slider_area #bg_Img{position: absolute; top:0; left:0; right:0; bottom:0; width:100%;height:100%; overflow :hidden;}/*media*/
.slider_area #bg_Img ul{list-style: none;}
.slider_area #bg_Img li{position:absolute;top:0;left:0;width:100%;height:100%; z-index:10;opacity :0;-webkit-animation: img_fade 18s 0s infinite; animation: img_fade 18s 0s infinite; }
.slider_area #bg_Img li:nth-of-type(1) {background:url(https://machii-mfg.co.jp/wp/wp-content/themes/mfg/images/slider01.jpg);background-repeat: no-repeat;-webkit-background-size:cover;background-size:cover;background-position: 50% 50%; }
.slider_area #bg_Img li:nth-of-type(2) {background:url(https://machii-mfg.co.jp/wp/wp-content/themes/mfg/images/slider03.jpg);background-repeat: no-repeat;-webkit-background-size:cover;background-size:cover;background-position: 50% 50%; -webkit-animation-delay: 6s;animation-delay: 6s;}
.slider_area #bg_Img li:nth-of-type(3) {background:url(https://machii-mfg.co.jp/wp/wp-content/themes/mfg/images/slider02.jpg);background-repeat: no-repeat;-webkit-background-size:cover;background-size:cover;background-position: 50% 50%; -webkit-animation-delay: 12s;animation-delay: 12s;}
@keyframes img_fade { 0% { opacity: 0;} 8% { opacity: 1; } 17% { opacity: 1; } 25% { opacity: 1; } 50% { opacity: 0; z-index:9;} 100% { opacity: 0; }}
@-webkit-keyframes img_fade { 0% { opacity: 0;} 8% { opacity: 1; } 17% { opacity: 1; } 25% { opacity: 1;}  50% { opacity: 0; z-index:9;} 100% { opacity: 0; }}
.slider_area .slider_box{position:relative; width:100%; height: 100%;}
.slider_area .slider_txt{z-index:11; position:absolute; top:45%;}/*media*/
.slider_area .slider_txt p.slider_txt01 br{display: none;}
.slider_area .slider_txt p{font-family: source-han-sans-japanese, sans-serif; color: #fff; text-shadow: 1px 1px 10px #000000; }
.slider_area .slider_txt p.strong{ font-size: 2.3rem; letter-spacing: 0.2em; font-weight: 600; font-style: normal;}/*media*/
.slider_area .slider_txt p.description{font-size: 1.2rem; letter-spacing: 0.2em; line-height: 2.0em; font-weight: 600; font-style: normal;}/*media*/
.slider_area .scroll_area{z-index:11; position:absolute; bottom:6%; left:0; right:0; margin: 0 auto; text-align: center; } 
.slider_area .scroll_area p.scroll{z-index: 200; position:relative; top:55%; }
.slider_area .scroll_area p.scroll a{ font-size:0.75rem; letter-spacing: 0.1em; color: #fff; text-decoration: none; text-shadow: none; margin: 0 auto; text-align: center; }
.slider_area .scroll_area p.scroll a span{ position:absolute; top: 90%; left:0; right:0; margin: 0 auto; text-align: center;width: 20px;height: 20px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;box-sizing: border-box;}
@-webkit-keyframes sdb {0% {-webkit-transform: rotate(-45deg) translate(0, 0);}20% {-webkit-transform: rotate(-45deg) translate(-10px, 10px);}40% {-webkit-transform: rotate(-45deg) translate(0, 0);}}
@keyframes sdb {0% {transform: rotate(-45deg) translate(0, 0);}20% {transform: rotate(-45deg) translate(-10px, 10px);}40% {transform: rotate(-45deg) translate(0, 0);}}
@media (min-width: 1200px){.slider_area .slider_txt{left:6%;}}
@media (min-width: 768px) and (max-width: 991px){.slider_area .slider_txt p.strong{font-size: 2.0rem;} .slider_area .slider_txt p.description {font-size: 1.0rem;}} 
@media (max-width: 767px){.slider_area .slider_txt{ top:40%;} .slider_area .slider_txt p.strong{font-size: 1.9rem;} .slider_area .slider_txt p.description {font-size: 1.0rem;} .slider_area .slider_txt p.slider_txt01 br{display: block;}}
@media (max-width: 576px){.slider_area .slider_txt{width: 90%;} .slider_area .scroll_area p.scroll{top:30%; }}
@media (min-width: 400px) and (max-width: 576px){.slider_area .slider_txt p.strong{font-size: 1.7rem;}.slider_area .slider_txt p.description {font-size: 0.8rem;}}
@media (min-width: 400px){ .slider_area .slider_txt .sp_none{display: none;}}
@media (max-width: 399px){.slider_area .slider_txt{top:30%;} .slider_area .slider_txt p.strong{font-size: 1.7rem;}.slider_area .slider_txt p.description {font-size: 0.9rem;} } 
@media (max-width: 900px) and (orientation:landscape){.slider_area .slider_txt{ top:35%;} .slider_area .slider_txt p.strong{font-size: 1.5rem;} .slider_area .slider_txt p.slider_txt01 br{display: none;} .slider_area .scroll_area{bottom:10%;}}

/*top*/
#page-wrapper #content{position: relative; top:0;}
#post-49 h1.entry-title{display: none;}
.page-id-49 ul#main-menu li#menu-item-22 a::after{ position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 2px; background-color: #21448e;
  transition: 0.3s; -webkit-transition: 0.3s;}
.concept_area{position: relative; top:-32px; height: auto; padding-top:110px ;margin:0 auto;text-align:center;overflow: hidden; overflow-x: hidden; }
.concept_area h2{color:#21448e; font-size:1.3rem; }
.concept_area h3{color:#2F2725; font-size:1.8rem;  padding-bottom: 10px; font-family: source-han-sans-japanese, sans-serif; font-weight: 700; font-style: normal; letter-spacing: 0.1em;}
.concept_area .line{width: auto;  display: inline-block; }
.concept_area .under{width: 500px; height: 3px; margin: 0 auto; text-align: center; background-color: #21448e;  box-sizing: border-box; -webkit-box-sizing: border-box; }
.concept_area .concept_box{padding-top: 50px;}
.concept_area .concept_box .l_box{position: relative; height: 430px; display: block;display: flex;-js-display: flex; display: -ms-flexbox; display:-webkit-flex;flex-direction: row;-webkit-flex-direction:row;-ms-flex-direction:row; }
.concept_area .concept_box .r_box{position: relative;top:40px; height: 430px; display: flex;-js-display: flex;display: -ms-flexbox;display:-webkit-flex;flex-direction: row-reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;}
.concept_area .concept_box .l_box .img_area{position: relative;  top:0; left:5%; }
.concept_area .concept_box .l_box .txt_area{position: relative;  top:11%; right:5%; }
.concept_area .concept_box .r_box .img_area{position: relative;  top:0; right:5%; }
.concept_area .concept_box .r_box .txt_area{position: relative;  top:11%; left:5%; }
_:-ms-lang(x), .concept_area .concept_box .l_box .img_area{ display: inline\9; left:0\9; } /* ie10*/
_:-ms-lang(x), .concept_area .concept_box .r_box .img_area{display: inline\9; right:0\9; } /* ie10*/
.concept_area .concept_box .l_box .img_area img,.concept_area .concept_box .r_box .img_area img{width: 600px;}
.concept_area .concept_box .txt_area{display: block; width: 600px; height: 290px;  background: linear-gradient(top,#114d96, #009dcb);
background: -moz-linear-gradient(top,#114d96, #009dcb); background: -webkit-linear-gradient(top,#114d96, #009dcb);
background: -ms-linear-gradient(top,#114d96, #009dcb);/* IE10 */ }
.concept_area .concept_box .txt_inner{display:inline-block; *display: inline;*zoom: 1; width:inherit; height: inherit; padding: 25px; }
@media all and (-ms-high-contrast:none){*::-ms-backdrop,.concept_area .concept_box .txt_inner{ width:100%; height:100%; }}/* ie11*/
.concept_area .concept_box p{color: #fff; letter-spacing: 0.1em; text-align: left; line-height: 2.0em; font-size: 16px; word-break: break-all;} /*px*/
.info_area{position: relative; top:-32px; width:100%; height: 100%; padding:60px 0 80px 0; margin: 0 auto; text-align: center; background-color: #fff;}
.info_area h2{color:#21448e; font-size:1.3rem; margin: 0; }
.info_area h3{color:#2F2725; font-size:0.7rem; margin: 0; font-family: source-han-sans-japanese, sans-serif; font-weight: 700; font-style: normal; letter-spacing: 0.1em;width: 100%;}
.info_area .line{width: auto;  display: inline-block; }
.info_area .line .under{padding: 0 50px; margin: 0 auto; text-align: center; background-color: #21448e; height: 2px; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; top:-5px;}
.info_area .news_area{ position: relative;}
.info_area .news_area ul.display-posts-listing{margin: 0 auto; padding-bottom: 50px;}
.info_area .news_area ul.display-posts-listing li.listing-item{text-align: left;display:table; position:absolute; top:0; right: 0; bottom: 0; left: 0;  height: 100%;} 
.info_area .news_area ul.display-posts-listing li:last-child{position:absolute; top:70px; text-indent: inherit;}
.info_area .news_area ul.display-posts-listing li.listing-item .date{ padding-right: 10px; color:#3882c6; display:table-cell; vertical-align: top; font-size:14px; font-family:"Helvetica-Bold",Arial,sans-serif;}
_::-webkit-full-page-media, _:future, :root .info_area .news_area ul.display-posts-listing li.listing-item .date{width: 15%;}/*safari*/	
.info_area .news_area ul.display-posts-listing li.listing-item .excerpt{display:table-cell; vertical-align: top; font-size: 15px; line-height: 1.6em;}
.info_area .news_area ul.display-posts-listing li.listing-item .excerpt a:link,.info_area .news_area ul.display-posts-listing li.listing-item .excerpt a{color:#2F2725; text-decoration: none;}
.news_area .link{border-bottom: 1px solid #2F2725; padding-bottom: 1px;}
.info_area .news_area ul.display-posts-listing li.listing-item .excerpt a.link:hover{border-bottom: none;}
.android .info_area .news_area ul.display-posts-listing li.listing-item .excerpt{font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal;}/*android*/
.info_area .news_area ul.display-posts-listing li.listing-item .title,.info_area .news_area ul.display-posts-listing .excerpt-more,.info_area .news_area ul.display-posts-listing .excerpt-dash{display: none;}
.bnr_area{position: relative; top:-32px; width:100%; height: 100%; padding:50px 0; background-color: #f7f7f7; }
.recruit_area{position: relative; width: 100%;top:-32px; padding:0 0 50px 0; background-color: #fff;}
.recruit_area ul.imgmap {width: 1500px; padding: 25px 0; margin:0 auto;display: grid;grid-template-columns: repeat(2, 1fr);} 
.recruit_area ul.imgmap li,.recruit_area ul.imgmap li img,.recruit_area ul.imgmap li iframe {width: 540px; height: 304px;}
.recruit_area ul p{padding: 15px 4px 0;}
.movie_area{position: relative;width: 100%;  padding-bottom: 56.25%; height: 0; }
video {position: absolute; top: 0;left: 0;width: 100%;height: 100%;}

.overlay,.animate-elm.-max-width:before,.animate-elm.-transform:before {
 background-color: #21448e; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
 -webkit-transition: .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; transition: .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;}
.overlay-max-width,.animate-elm.-max-width:before {max-width: 100%;}
.overlay-transform,.animate-elm.-transform:before {-webkit-transform: translateX(0%);transform: translateX(0%);}
.animate-elm {margin: 0 auto; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; position: relative;overflow: hidden;}
.animate-elm.-max-width:before,.animate-elm.-transform:before {content: "";}
.animate-elm.show.-max-width:before,.animate-elm.show .overlay-max-width {max-width: 0;}
.animate-elm.show.-transform:before,.animate-elm.show .overlay-transform {-webkit-transform: translateX(101%); transform: translateX(101%);}
#post-49 .btn_area{position: relative; top:32px; width:100%; height: 100%; padding-top:0; margin: 0 auto; text-align: center;}
#post-49 .btn_area li a{ vertical-align:top; font-size: 1.2rem; letter-spacing: 0.1em; display:block; height:70px; line-height: 70px; color: #fff; text-decoration: none; text-align: center;border-radius: 8px;-webkit-transition: all 0.5s; transition: all 0.5s; }
#post-49 .btn_area li:nth-child(1) a {background: #0065b0;}
#post-49 .btn_area li:nth-child(1) a:before {content:''; display: inline-block; width: 34px; height: 34px; background-image: url(https://machii-mfg.co.jp/wp/wp-content/themes/mfg/images/btn_icon03.png); background-size: cover; vertical-align: middle;position: relative; top:0; left:-2px;}
#post-49 .btn_area li:nth-child(2) a {background: #21448e;}
#post-49 .btn_area li:nth-child(2) a:before {content:''; display: inline-block; width: 34px; height: 34px; background-image: url(https://machii-mfg.co.jp/wp/wp-content/themes/mfg/images/btn_icon01.png); background-size: cover; vertical-align: middle;position: relative; top:0; left:-2px;}
#post-49 .btn_area li:nth-child(3) a {background: #3882c6;}
#post-49 .btn_area li:nth-child(3) a:before {content:''; display: inline-block; width: 34px; height: 34px; background-image: url(https://machii-mfg.co.jp/wp/wp-content/themes/mfg/images/btn_icon02.png); background-size: cover; vertical-align: middle;position: relative; top:0; left:-2px;}
#post-49 .btn_area li a:hover{-ms-filter:"alpha(opacity=70)"; filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; zoom: 1;}

@media (min-width: 1200px) {
.concept_area{ width:1140px;} .animate-elm { height: 250px;} #post-49 .btn_area li a{width: 350px;}
}
@media (max-width: 1049px) {	
.page-id-49 li#menu-item-22{border-left:none;}
.page-id-49 li#menu-item-22{display: none;}	
}
@media (min-width: 992px) and (max-width: 1199px) {
.concept_area{ width:100%;}	
.concept_area .concept_box p{font-size: 15px;}	
.concept_area .concept_box .r_box{top:0;}	
.concept_area .concept_box .l_box .txt_area{ top:10%; right:0; }
.concept_area .concept_box .r_box .txt_area{ top:10%; left:0; }
_:-ms-lang(x), .concept_area .concept_box .l_box .txt_area{ right:5%\9; } /* ie10*/
_:-ms-lang(x), .concept_area .concept_box .r_box .txt_area{ left:5%\9; } /* ie10*/	
.concept_area .concept_box .txt_area{ width: 400px; height: 350px;}		
.animate-elm { height: 200px;}
#post-49 .btn_area li a{width: 300px;}
.recruit_area ul.imgmap li img,.recruit_area ul.imgmap li iframe{width: 480px; height: 267px;}	
}
@media (max-width: 992px) {
.info_area .news_area ul.display-posts-listing li.listing-item .date,.info_area .news_area ul.display-posts-listing li.listing-item .excerpt{font-size: 13px;}
}
@media (min-width: 768px) and (max-width: 991px){
.concept_area{ width:100%; overflow: hidden;}	
.concept_area h2{font-size:1.1rem;} .concept_area h3{font-size:1.7rem;}	.concept_area .under{width: 400px;}
.concept_area .concept_box p{font-size: 15px;}
.concept_area .concept_box .r_box{top:0;}	
.concept_area .concept_box .l_box,.concept_area .concept_box .r_box {display: block;} 	
.concept_area .concept_box .l_box .txt_area {z-index: 2; position: absolute; top:10%; right:0; }
.concept_area .concept_box .l_box .img_area {z-index: 1; top:0; left:-5%;}
.concept_area .concept_box .r_box .txt_area {z-index: 2; position: absolute; top:10%; left:0; }	
.concept_area .concept_box .r_box .img_area {z-index: 1; position: absolute; top:0; right:-5%;}	
.concept_area .concept_box .txt_area{ width: 400px; height: 350px;}			
.animate-elm { height: 200px;} 
#post-49 .btn_area li a{width: 500px; margin: 0 auto;} #post-49 .btn_area li:nth-child(1),#post-49 .btn_area li:nth-child(2){padding-bottom: 15px;}
.recruit_area ul.imgmap li img,.recruit_area ul.imgmap li iframe{width: 360px; height: 200px;} 

} 
@media (max-width: 767px){
.concept_area .concept_box .l_box,.concept_area .concept_box .r_box {display: block;} 	
.concept_area .concept_box p{line-height: 2.0em; font-size: 14px;} .info_area .news_area ul.display-posts-listing li.listing-item{position:static; } #post-49 .btn_area li:nth-child(1),#post-49 .btn_area li:nth-child(2){padding-bottom: 15px;}
.info_area{padding:40px 0 20px 0;}
.info_area .news_area ul.display-posts-listing li.listing-item{padding-bottom: 30px;}	
.info_area .news_area ul.display-posts-listing li.listing-item .date{ vertical-align: top;}	
.recruit_area{padding:0 0 0 0;}	
.recruit_area ul.imgmap li img{width: 100%; height: auto;} 
.recruit_area ul.imgmap li iframe {width: 100%; height: 400px;} 		
.recruit_area ul.imgmap{  grid-template-columns: 1fr;}
}
@media (min-width: 576px) and (max-width: 767px){
.concept_area h2{font-size:1.1rem;} .concept_area h3{font-size:1.7rem;} .concept_area .under{width: 400px;}	
.concept_area .concept_box{display: block; min-height: 1500px;}	
.concept_area .concept_box .r_box{top:400px;}		
.concept_area .concept_box .l_box{ height: 350px;width: 100%;}
.concept_area .concept_box .r_box{ height: 350px;width: 100%;}	
.concept_area .concept_box .l_box .img_area img,.concept_area .concept_box .r_box .img_area img{width: 100%;  height:100%;}	
.concept_area .concept_box .l_box .txt_area {z-index: 2; position:relative; top:-30%;}
.concept_area .concept_box .l_box .img_area {z-index: 1; position: static; margin: 0 auto; text-align: center; }
.concept_area .concept_box .r_box .txt_area {z-index: 2; position:relative; top:-30%;left:0; right:0; margin: 0 auto; text-align: center;}	
.concept_area .concept_box .r_box .img_area {z-index: 1; position: static; margin: 0 auto; text-align: center;}	
.concept_area .concept_box .txt_area{ position: absolute; top:0; left:0; right:0; bottom:0; width: 560px; height: 250px; margin: 0 auto; text-align: center;}		
.animate-elm { height: 250px;}
}
@media (max-width: 575px){
.concept_area h2{font-size:1.1rem;} .concept_area h3{font-size:1.5rem;} .concept_area .under{width: 320px; height: 2px; }
.concept_area .concept_box{display: block; min-height: 1400px;}	
.concept_area .concept_box .r_box{top:350px;}		
.concept_area .concept_box .l_box{ height: 350px;width: 100%;}	
.concept_area .concept_box .r_box{ height: 350px;width: 100%; margin-bottom: 30px;}		
.concept_area .concept_box .l_box .img_area img,.concept_area .concept_box .r_box .img_area img{width: 100%;  height:100%;}	
.concept_area .concept_box .l_box .txt_area {z-index: 2; position:relative; top:-20%;}
.concept_area .concept_box .l_box .img_area {z-index: 1; position: static; margin: 0 auto; text-align: center; }
.concept_area .concept_box .r_box .txt_area {z-index: 2; position:relative; top:-20%;left:0; right:0; margin: 0 auto; text-align: center;}	
.concept_area .concept_box .r_box .img_area {z-index: 1; position: static; margin: 0 auto; text-align: center;}	
.concept_area .concept_box .txt_area{ position: absolute; top:0; left:0; right:0; bottom:0; width: 90%; height: auto; margin: 0 auto; text-align: center;}		
.animate-elm { height: 250px;} #post-49 .btn_area ul{width:90%;  margin: 0 auto;text-align: center;} #post-49 .btn_area li a{ font-size: 1.0rem;} #post-49 .btn_area li:nth-child(1) a:before,#post-49 .btn_area li:nth-child(2) a:before,#post-49 .btn_area li:nth-child(3) a:before{ width: 30px; height: 30px; top:-1px;}
}
@media (min-width: 340px) and (max-width: 575px){
.info_area .news_area ul.display-posts-listing{margin: 0 auto; padding-top: 20px; width: 80%;}
}
@media (max-width: 360px){
.concept_area h2{font-size:1.1rem;} .concept_area h3{font-size:1.4rem;}
}
@media (max-width: 340px) {
.concept_area .under{width: 300px;}
}