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


/*==================================================
mv
================================================== */



.mv{
    width: 100%;
    height: 64vh;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    
}

#top-mv{
    height: 80vh;
    background: url("../images/mv_top.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-material-sales{
    background: url("../images/mv_materialsales_ver02.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-integrated-production{
    background: url("../images/mv_integratedproduction.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-package-production{
    background: url("../images/mv_packageproduction.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-recruit{
    background: url("../images/mv_recruit.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-company{
    background: url("../images/mv_company.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-contact{
    background: url("../images/mv_contact.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-news{
    background: url("../images/mv_news.webp") no-repeat center bottom;
    background-size: cover;
}

#mv-privacy{
    background: url("../images/mv_privacy.webp") no-repeat center bottom;
    background-size: cover;
}

p.mv-catch{
    margin: 0;
    font-size: 42px;
    width: 100%;
    color: #fff;
    font-weight: 900;
    position: relative;
    text-align: center;
}

p.mv-catch span{
    display: block;
    margin: 10px auto 0;
    width: 80px;
    border-top: 1px solid #fff;
    height: 15px;
}

p.mv-catch small{
    display: block;
    font-size: 55%;
    font-weight: 700;
    letter-spacing: 0.08em;
}

@media screen and (max-width: 1024px) and (orientation: portrait){
    
.mv{
    height: 36vh;
    
}    

#top-mv{
    height: 42vh;
} 
    
    
    
}

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

p.mv-catch{
    font-size: 4.4vw;
}
    
    
}

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

#top-mv{
    height: 36vh;
} 


p.mv-catch{
    font-size: 6.6vw;
    line-height: 1.2;
    padding-top: 25px;
}
    
    
}



/*==================================================
top-message
================================================== */

#top-message{
    text-align: center;
    padding: 65px 0 80px;
    line-height: 2.0;
}

.catchcopy{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px !important;
}

@media only screen and (max-width: 768px) {
    
#top-message{
    padding: 50px 0 65px;
}    
    
}

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

#top-message{
    text-align: center;
    padding: 40px 0 50px;
    line-height: 2.0;
}

.catchcopy{
    font-size: 6.8vw;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 30px !important;
}
    
}


/*==================================================
news
================================================== */

#news{
    padding-bottom: 80px;
}

p.p-news{
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
    padding-left: 5px;
}

p.p-news small{
    display: block;
    font-size: 100%;
    padding-bottom: 8px;
}

#news a{
    color: #333;
}

.link-more{
    padding:15px 0;
    text-align: right;
}


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

#news{
    padding-bottom: 50px;
}

p.p-news{
    padding-bottom: 12px;
    margin-bottom: 12px;
    padding-left: 0;
}

p.p-news small{
    padding-bottom: 0;
}

#news a{
    color: #333;
}

.link-more{
    padding:8px 0;
}
    
}


/*==================================================
top-service
================================================== */

#top-service{
    padding: 40px 0 200px;
    position: relative;
}

.title-business{
    position: absolute;
    z-index: 1;
    top: -22px;
    right: 35px;
}

#top-service article{
    padding: 0 50px;
}

#ul-top-service li{
    border-radius: 8px;
    background-color: #fff;
    padding: 25px;
    box-shadow: 0px 0px 15px -5px #777777;
    margin-right: 30px;
    text-align: center;
}
#ul-top-service li:last-child{
    margin-right: 0;
}

#ul-top-service li h3{
    display: block;
    font-size: 24px;
}

.img-top-service{
    margin: 10px 0;
}

.img-top-service img{
    border-radius: 10px;
    vertical-align: bottom;
}
#ul-top-service li p{
    text-align: left;
}

#ul-top-service li .btn{
    min-width: auto;
    width: 100%;
    box-sizing: border-box;
}

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

.title-business{
}

#top-service{
    padding: 0 0 100px;
}
    
}

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

.title-business{
    top: -35px;
    right: 20px;
}

#top-service article{
    padding: 0 20px;
}

#ul-top-service li{
    padding: 15px;
    margin-right: 10px;
}
#ul-top-service li:last-child{
    margin-right: 0;
}

#ul-top-service li h3{
    display: block;
    font-size: 20px;
}


   
}

@media only screen and (max-width: 599px) {
    
#top-service{
    padding: 40px 0 50px;
}

.title-business{
    position: absolute;
    z-index: 1;
    top: -22px;
    right: 10px;
    text-align: right;
}

#ul-top-service li{
    padding: 20px;
    margin: 0 auto 20px;
    box-sizing: border-box;
}
#ul-top-service li:last-child{
    margin-right: auto;
}

#ul-top-service li h3{
    font-size: 6vw;
}
    
    
}






/*==================================================
下層ページ共通
================================================== */

#top-contents{
    position: relative;
    background: url("../images/bg_wave.jpg") no-repeat center center;
    background-size: 100%;
}

.title-copy{
    font-size: 3.5vw;
    background: linear-gradient(to right, #f2f047, #1ed94f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
    font-weight: 900;
}

.title-copy small{
    display: block;
    font-size: 45%;
    color: #333;
    font-weight: 700;
    padding-left: 5px;
}

.txt{
    line-height: 2.2;
}

.txt p{
    margin-bottom: 35px;
}

.img-float-right{
    float: right;
    margin: 0 0 20px 50px;
    width: 45%;
}

.box-yoko-scroll{
    overflow: auto;
    padding-bottom: 15px;
}

.bg-yellow{
    background-color: #fdf34e;
    padding: 0 4px;
}

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

    
}




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

.title-copy{
    font-size: 4.4vw;
}

.img-float-right{
    margin: 0 0 10px 25px;
    width: 45%;
}

.txt{
    line-height: 1.8;
}

.txt p{
    margin-bottom: 25px;
}

    
}


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

.title-copy{
    font-size: 8vw;
    line-height: 1.1;
}

.title-copy small{
    font-size: 50%;
    padding-left: 0;
    margin-top: 7px;
}

.img-float-right{
    margin: 0 auto 12px;
    width: 100%;
    float: none;
}

	

}

/*==================================================
tab切り替え
================================================== */

.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	display: block;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	width: 1160px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
	display: flex;
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media only screen and (max-width: 1100px) {
	
.area {
	width: 100%;
}	
}


/*==================================================
wp page navi
================================================== */

.wp-pagenavi {text-align:center; clear: both; margin-top: 50px; position: relative; padding-top: 50px;}
.wp-pagenavi span,
.wp-pagenavi a{
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%; 
    text-decoration: none; 
	background: #fff;
	color: #000;
	line-height: 1;
	font-size: 17px;
	margin: 0 5px 20px 0;
}


.wp-pagenavi span.current,
.wp-pagenavi a:hover{
    background: #0e9cbf;
	color: #fff !important;
}

@media (max-width: 1100px) {

.wp-pagenavi{margin-top: 0; padding-top: 50px;}
.wp-pagenavi span,
.wp-pagenavi a{
    width: 40px;
    height: 40px;
	font-size: 12px;
	margin: 0 5px 10px 0;
}
}


/*==================================================
post-detail
================================================== */

#post-topic-path{
    margin-top: 100px;
}

#post-detail{
    padding: 80px 0;
  
}

#post-body{
    padding: 30px 0;
    line-height: 2.0;
}

#post-body p{
    margin-bottom: 25px;
}

#post-body img{
    vertical-align: bottom;
    margin-bottom: 35px;
}

.box-post-detail{
    padding: 50px ;
    line-height: 2.0;
}
.box-post-detail p{
    margin-bottom: 35px;
}
.box-post-detail p.post-date{
    margin-bottom: 12px;
}

#post-bottom{
	position: relative;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	height: 80px;
    margin-top: 50px;
    background-color: #fff;
}

#post-bottom a{
	display: inline-block;
	text-align: center;
	font-size: 14px;
	position: relative;
	padding: 18px 30px;
	line-height: 1;
	letter-spacing: 0.08em;
    color: #000 !important;
    text-decoration: underline;
}

#post-bottom a:hover{
    text-decoration: underline !important;
}


#post-bottom > a,
#post-bottom span{
	position: absolute;
	top: 15px;
}

#post-bottom a.btn-back{
	left: 0;
}

#post-bottom span.btn-next{
	right: 0;
}

#post-bottom span.btn-prev{
	right: 170px;;
}

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

    
}

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

#post-detail{
    padding: 50px 0;
}
    
}

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

#post-detail{
    padding: 30px 0;
}

#post-body{
    padding: 10px 0;
    line-height: 1.8;
}
    


#post-body img{
    margin-bottom: 20px;
}

.box-post-detail{
    padding: 20px ;
    line-height: 1.8;
}
.box-post-detail p{
    margin-bottom: 25px;
}   

#post-body p{
    margin-bottom: 20px;
}


#post-bottom{
	position: relative;
	padding: 0 ;
	height: 80px;
    margin-top: 30px;
}
	
#post-bottom span a{
	font-size: 13px;
	padding: 0;
	width: 100%;
}	

#post-bottom a.btn,
#post-bottom span{
	top: 30px;
	width: 30%;
	padding: 0;
	text-align: center;
	font-size: 12px;
}

#post-bottom a.btn-back{
	position: absolute;
	top: 34px;
	left: 0;
	width: 30%;
	margin: 0;
	box-sizing: border-box;
    padding: 0;
    font-size: 12px;
}

#post-bottom span.btn-next{
	right: 0;
}

#post-bottom span.btn-prev{
	right: 33%;
}

#post-body img{
    margin-bottom: 25px;
}

	
}


/*==================================================
material-sales
================================================== */

.box-material{
    margin-bottom: 50px;
    padding-bottom: 35px;
    border-bottom: 1px dotted #ddd;
}

.box-material > div{
    margin: 35px 20px 0;
}

p.p-material{
    margin-bottom: 25px;
}

p.p-material strong{
    display: block;
}

@media only screen and (max-width: 599px) {
    
    #products-material-sales{
        width: 800px;
    }
    
.box-material{
    margin-bottom: 35px;
    padding-bottom: 5px;
}

.box-material > div{
    margin: 25px 18px 0;
}   

p.p-material{
    margin-bottom: 18px;
} 
    
}

/*==================================================
integrated-production
================================================== */

.txt-f{
    display: block;
    text-align: center;
    margin-bottom: 15px;
    border-radius: 80px;
    background-color: #e3f6fa;
    padding: 10px 20px;
    box-sizing: border-box;
}

.degitalprint-01{
    margin: 35px auto 65px;
    vertical-align: bottom;
}

.box-lineup{
    display: flex;
}

.box-lineup > article{
    width: calc(100%/2);
    border-radius: 8px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 15px -5px #777777;
}

.box-lineup > article:first-child{
    margin-right: 35px;
}

#factory-01{
    margin-top: 50px;
}


#feature-01{
    padding-bottom: 25px;
}

#feature-01 img{
    width: 30%;
}

#pic-integrated02{
    padding-top: 80px;
}

#pic-integrated03{
    padding-top: 20px;
}

#factory-02 > p{
    margin-top: 50px;
    font-weight: 600;
    font-size: 120%;
    text-align: center;
}

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

#pic-integrated02{
    padding-top: 50px;
}
    
}

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

.txt-f{
    padding: 10px;
}

.degitalprint-01{
    margin: 25px auto 35px;
}

.box-lineup{
    display: block;
}

.box-lineup > article{
    width: 100%;
    margin: 0 auto 15px;
    box-sizing: border-box;
}

.box-lineup > article:first-child{
    margin-right: auto;
}

#factory-01{
    margin-top: 35px;
}

#factory-02 > p{
    margin-top: 25px;
}
    
    #pic-integrated03{
    padding-top: 0;
}
    
#feature-01 img{
    width: 100%;
}
    
    #pic-integrated02{
    padding-top: 20px;
}

#feature-01{
    padding-bottom: 15px;
}    
    
}

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


    
}

/*==================================================
recruit
================================================== */

#recruit-01{
    padding-bottom: 50px;
}

#box-mission{
    display: flex;
    margin-bottom: 35px;
}

#box-mission > strong{
    display: block;
    border-radius: 8px;
    background-color: #0e9cbf;
    color: #fff;
    padding: 25px;
    margin-right: 25px;
    width: calc(100%/4);
}

#box-mission > strong:last-child{
    margin-right: 0;
}

#box-mission > strong:nth-child(2){transition-delay: 300ms;}
#box-mission > strong:nth-child(3){transition-delay: 600ms;}
#box-mission > strong:nth-child(4){transition-delay: 900ms;}

#recruit-04 .txt > p{
    text-align: center;
    margin-top: 35px;
}

@media only screen and (max-width: 767px) {
    
#recruit-01{
    padding-bottom: 30px;
}

#box-mission{
    display: block;
    margin-bottom: 25px;
}

#box-mission > strong{
    padding: 20px;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#box-mission > strong:nth-child(2){transition-delay: 0ms;}
#box-mission > strong:nth-child(3){transition-delay: 0ms;}
#box-mission > strong:nth-child(4){transition-delay: 0ms;}

#recruit-04 .txt > p{
    text-align: center;
    margin-top: 35px;
}    
    
}

/*==================================================
package-production
================================================== */

#machine-pp{
    margin: 50px 0;
    text-align: center;
}

#machine-pp > div{
    display: flex;
    margin-bottom: 20px;
}

#machine-pp > div > img{
    width: calc(100%/4);
    vertical-align: bottom;
    border-right: 1px solid #fff;
}

#machine-pp > div > img:nth-child(2){transition-delay: 200ms;}
#machine-pp > div > img:nth-child(3){transition-delay: 400ms;}
#machine-pp > div > img:nth-child(4){transition-delay: 600ms;}

#package-production-02 .txt-f{
    background-color: #fff;
}

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

#machine-pp > div{
    flex-wrap: wrap;
}

#machine-pp > div > img{
    width: calc(100%/2 - 2px);
    border-bottom: 1px solid #fff;
}
    
}

/*==================================================
company
================================================== */

#company-02{
    padding-bottom: 65px;
}

#access-map{
    width: 100%;
}

#access-map iframe{
    width: 100%;
    height: 420px;
    vertical-align: bottom;
}

#company-04{
    padding-top: 75px;
    padding-bottom: 35px;
}

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

#company-02{
    padding-bottom: 30px;
}

#access-map iframe{
    height: 80vw;
}

#company-04{
    padding-top: 50px;
    padding-bottom: 15px;
}
    
    #company-outline{
        border: none;
    }
    
    #company-outline th{
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
    }
    
    #company-outline td{
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
    }
    
}

/*==================================================
contact
================================================== */

#table-contact th{
    width: 25%;
    background-color: #f4f4f4;
}

#box-contact .btn{
    width: 420px !important;
    font-size: 18px !important;
    height: 62px;
    line-height: 60px;
}

@media only screen and (max-width: 599px) {
    
    #table-contact{
        border: none;
    }
    
    #table-contact th{
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
    }
    
    #table-contact td{
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        padding: 12px 10px;
    }

#box-contact .btn{
    width: 90% !important;
    font-size: 16px !important;
    height: 56px;
    line-height: 54px;
}
    
}

/*==================================================
privacy
================================================== */

#dl-privacy dt{
    font-weight: 600;
    font-size: 120%;
}

#dl-privacy dd{
    margin-bottom: 35px;
}

#dl-privacy dd p{
    margin-bottom: 5px;
}

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

#dl-privacy dd{
    margin-bottom: 25px;
}
    
}