@charset "UTF-8";


.foM{font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;}
.foG{font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;}


/* ----------------------------------------
	#　トップページ
---------------------------------------- */
#wrap{
width: 100%;
padding-top: 70px;
letter-spacing: 0.05em;
position: relative;
font-size: 20px;
}
@media only screen and (max-width:1024px) {
#wrap{
padding-top: 0;
}
}

.pc{
display: block;
}

.tab{
display: none;
}

.smp{
display: none;
}


/* ----------------------------------------
	#　ヘッダーメニュー
---------------------------------------- */
header{
width: 100%;
position: fixed;
top: 0;
z-index: 100;
background: #fff;
transition: .2s;
}

.submenu{
width: 100%;
font-size: 20px;
display: flex;
align-items: center;
}

.menu_logo{
max-width: 280px;
padding: 15px;
}
@media only screen and (max-width:1024px) {
.menu_logo{
display: none;
}
}

.submenu ul{
width: 100%;
max-width: 900px;
margin-left: auto;
display: flex;
justify-content: space-between;
}
@media only screen and (max-width:1024px) {
.submenu ul{
width: 100%;
}
}

.submenu ul li{
width: 25%;
text-align: center;
}

.submenu ul li.tel{
max-width: 100px;
}
.submenu ul li.tel span{
font-size: 14px;
font-weight: bold;
margin-top: 7px;
line-height: 100%;
}
#menuTel{
width: 30px;
fill: #000;
transition: .2s;
}
@media only screen and (max-width:767px) {
.submenu ul li.tel{
max-width: 100%;
}
}

.submenu ul li:first-child{
border-left: none;
}

.submenu ul a{
width: 100%;
color: #000;
text-align: center;
font-weight: 500;
padding: 20px 0;
display: block;
transition: .2s;
letter-spacing: 0;
}
.submenu li.tel a{
height: 100%;
padding: 10px;
background: #dedede;
color: #000;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.submenu li.recruit a{
background: #f1bfbd;
}

.submenu ul a:hover{
color: #fff;
background-color: #000;
}
.submenu li.tel a:hover,
.submenu li.recruit a:hover{
color: #fff;
background-color: #000;
}
.submenu ul a:hover #menuTel{
fill: #fff;
transition: .2s;
}

.clone-nav {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
transition: .2s;
transform: translateY(-100%);
background-color: #ececec;
}

.is-show {
transform: translateY(0);
}

@media screen and ( max-width : 1024px ) {
#menu{
display: block;
position: fixed;
z-index: 5;
left: -1000%;
top: 0;
width: 100%;
transition: all .5s;
-ms-overflow-style: none;    /* IE, Edge 対応 */
scrollbar-width: none;       /* Firefox 対応 */
}

#menu.active{
left: 0;
}

#icon{
display: flex;
position: fixed;
z-index: 1000;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
flex-direction: column;
justify-content: center;
transition: all .3s ease 0s;
opacity: 1;
background-color: #E60012;
}

#icon span{
display: block;
margin: 0 auto;
width: 30px;
height: 3px;
background-color: #fff;
opacity: 1;
transition: all .3s ease 0s;
}

#icon span:first-of-type{
margin-bottom:8px;
}

#icon span:last-of-type{
margin-top: 8px;
}

#icon.active span:nth-of-type(1){
transform: rotate(45deg);
margin-top: 11px;
background-color: #fff;
opacity: 1;
}

#icon.active span:nth-of-type(2){
margin-left: 10px;
transform: rotate(-45deg);
margin-top: -11px;
background-color: #fff;
opacity: 1;
}

#icon.active span:nth-of-type(3){
opacity: 0;
background-color: #fff;
}
}



/* ----------------------------------------
	#　スライダー
---------------------------------------- */
#main{
position: relative;
}

.logo{
width: 80%;
max-width: 700px;
text-align: center;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

/* ズーム */
.splide__slide img {
transition: 10s ease-out;
}
.splide__slide.is-active img{
transform: scale(1.15);
transition-delay: 0s;
}
/* スライドのサイズ調整 */
.splide__slide img{
height: auto;
width: 100%;
}



/* ----------------------------------------
	#　バナー
---------------------------------------- */
.bnr_box{
width: 92%;
max-width: 500px;
margin: 80px auto 0;
}

.bnr_box a:hover{
opacity: 0.7;
}



/* ----------------------------------------
	#　お知らせ
---------------------------------------- */
#news{
margin-top: 100px;
}

.news_inner{
width: 100%;
max-width: 800px;
margin: 30px auto;
}

.news_inner li a{
padding: 15px 50px 15px 15px;
display: flex;
transition: .2s;
position: relative;
border-bottom: 1px solid #000;
}
@media only screen and (max-width:767px) {
.news_inner li a{
flex-direction: column;
}
}

.news_inner li a:hover{
background: #E9E9E9;
}

.news_inner li a:after{
content: "";
position: absolute;
margin: auto;
top: 50%;
right: 20px;
width: 10px;
height: 10px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: translate(0%,-50%) rotate(45deg);
}

.news_inner .date{
margin-right: 30px;
}
@media only screen and (max-width:767px) {
.news_inner .date{
font-weight: bold;
}
}

#news_content .all_box{
margin-top: 50px;
}

.pNav a:hover{
text-decoration: underline;
}

.pNav{
max-width: 900px;
width: 92%;
margin: 50px auto;
font-size: 16px;
}

.datail_box{
max-width: 800px;
margin: 30px auto 0;
}

.detail_txt{
margin-top: 30px;
}

.newMark{
color: red;
font-weight: bold;
}

/* ---------------- お知らせ2層目 ---------------- */
.logo_second{
max-width: 300px;
margin: 0 auto;
padding: 30px 0;
}

.detailUpfile a{
text-decoration: underline;
}

.detailUpfile a:hover{
opacity: 0.5;
}

.detailText{
margin-bottom: 15px;
}

.detailText a{
text-decoration: underline;
}

.detailText a:hover{
opacity: 0.5;
}

.detailUpfile img{
margin: 18px auto;
display: block;
max-width: 600px;
}


/* ----------------------------------------
	#　会社概要
---------------------------------------- */
#abo{
margin-top: 100px;
}

.all_box{
width: 900px;
margin: 0 auto 150px;
}

h2{
position: relative;
font-size: 38px;
font-weight: 500;
letter-spacing: 0;
padding: 0 15px 20px;
line-height: 120%;
}
@media only screen and (max-width:767px) {
h2{
font-size: 30px;
padding-left: 0;
padding-right: 0;
}
}

h2 span{
font-size: 25px;
font-weight: 700;
letter-spacing: 0.2em;
display: inline-block;
color: #cf2c25;
opacity: 0.5;
margin-left: 25px;
}
@media only screen and (max-width:767px) {
h2 span{
font-size: 18px;
margin-left: 15px;
}
}

h2:before{
content: "";
position: absolute;
background-color: #000;
width: 0%;
height: 2px;
bottom: 0;
left: 0;
z-index: 0;
transition: all 0.8s;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
h2.isActive:before{
width: 100%;
}

.abo_box{
width: 800px;
margin: 30px auto 0;
}

.abo_box th{
width: 15%;
padding: 15px 5px;
border-bottom: 1px solid #cf2c25;
letter-spacing: 0.5em;
}

.abo_box td{
width: 90%;
padding: 15px;
border-bottom: 1px solid #b2b2b2;
}


/* ----------------------------------------
	#　ごあいさつ
---------------------------------------- */
#aisatu{
margin-top: 100px;
}

.aisatu_box{
width: 800px;
margin: 30px auto 0;
line-height: 200%;
}
@media only screen and (max-width:1024px) {
.aisatu_box{
width: 100%;
line-height: 180%;
}
}
@media only screen and (max-width:767px) {
.aisatu_box{
line-height: 150%;
}
}

.aisatu_box p{
text-align: right;
margin-top: 20px;
font-size: 25px;
}

.aisatu_box p span{
margin-right: 20px;
font-size: 16px;
}


/* ----------------------------------------
	#　ジャパンパックライスができること
---------------------------------------- */
#can{}

#can .all_box{
margin-bottom: 80px;
}
@media only screen and (max-width:767px) {
#can .all_box{
margin-bottom: 50px;
}
}

.can_box{
width: 800px;
margin: 30px auto 0;
}

.can_img{
background-color: #E60013;
padding: 50px 50px 20px;
margin-bottom: 20px;
text-align: center;
}

.can_img img{
width: 570px;
}


/* ----------------------------------------
	#　工場内機械・製造工程
---------------------------------------- */
h3{
font-size: 30px;
padding-left: 35px;
display: inline-block;
position: relative;
}

h3:before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 45%;
width: 25px;
height: 3px;
background-color: #000;
}

.pro_box{
border-top: 1px dashed #666666;
padding-top: 80px;
}
@media only screen and (max-width:767px) {
.pro_box{
padding-top: 50px;
}
}

.pro02{
display: flex;
flex-wrap: wrap;
margin: 30px 0;
}

.pro02 li{
width: 195px;
margin-right: 30px;
margin-bottom: 30px;
position: relative;
display: inline-block;
}

.pro02 li:after{
content: "";
position: absolute;
vertical-align: middle;
top: 85px;
right: -38px;
border: 15px solid transparent;
border-left: 15px solid #E60012;
}

.pro02 li:last-child{
width: 235px;
}

.pro02 li:last-child:after{
display: none;
}

.pro02 li:nth-last-child(2){
margin-right: 100px;
position: relative;
}

.pro02 li:nth-last-child(2):after{
right: -80px;
}

.pro02 li:nth-last-child(2) > span{
position: absolute;
color: #E60012;
top: 50px;
right: -80px;
}

.pro02 li p{
margin-top: 10px;
text-align: center;
}
@media only screen and (max-width:767px) {
.pro02 li p{
margin-top: 10px;
text-align: center;
}
}

.pro02 li p span{
display: inline-block;
}

.huk{
display: flex;
justify-content: space-between;
}

.huk div{
width: 48%;
position: relative;
}

.huk div p{
width: 100%;
padding: 5px;
font-size: 18px;
color: #fff;
text-align: center;
position: absolute;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}

.movie_box{
max-width: 800px;
margin: 30px auto 50px;
}

.movie_box iframe{
width: 100%;
height: 450px;
vertical-align: bottom;
}
@media only screen and (max-width:767px) {
.movie_box iframe{
height: 70vw;
}
}

.movie_box p{
text-align: right;
font-size: 18px;
margin-top: 5px;
}



/* ----------------------------------------
	#　採用情報
---------------------------------------- */
#rec{
background: #f9f4ea;
padding-top: 80px;
display: inline-block;
width: 100%;
}

.rec_top{
max-width: 800px;
margin: 30px auto 0;
}

.rec_top p{
margin-bottom: 30px;
}

.rec_list{
margin-top: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media only screen and (max-width:767px) {
.rec_list{
flex-direction: column;
}
}

.rec_list li{
width: 47%;
margin-bottom: 40px;
display: flex;
flex-direction: column;
}
@media only screen and (max-width:767px) {
.rec_list li{
width: 100%;
}
}

.job_demand{
text-align: center;
font-size: 23px;
margin: 0 15px 15px;
padding-bottom: 10px;
border-bottom: 1px solid #000;
line-height: 120%;
letter-spacing: 0;
}
@media only screen and (max-width:1024px) {
.job_demand{
margin-left: 0;
margin-right: 0;
}
}

.job_content{
margin-bottom: 15px;
text-align: justify;
font-size: 16px;
letter-spacing: 0;
}

.job_img{
width: 100%;
margin-top: auto;
}

.rec_link{
max-width: 500px;
margin: 0 auto;
text-align: center;
}

.rec_link a{
width: 100%;
padding: 15px 50px 15px 20px;
display: inline-block;
position: relative;
font-size: 25px;
font-weight: bold;
line-height: 120%;
margin-bottom: 30px;
text-align: left;
}
.rec_link a:last-of-type{
margin-bottom: 0;
}

.rec_link a span{
font-weight: bold;
color: #CF2B24;
}

.rec_link a:before{
content: "";
position: absolute;
margin: auto;
top: 50%;
right: 20px;
width: 10px;
height: 10px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: translate(0%,-50%) rotate(45deg);
}

.rec_link a:after{
content: "";
position: absolute;
width: 100%;
height: 2px;
background: #000;
bottom: 0;
left: 0;
transform: scale(1, 1);
transform-origin: right top;
transition: transform .3s;
}
.rec_link a:hover:after{
transform: scale(0, 1);
transform-origin: left top;
}

.rec_link p{
margin-top: 15px;
font-size: 16px;
}


/* ----------------------------------------
	#　コピーライト
---------------------------------------- */
footer{
width: 100%;
padding: 35px;
background: #000;
}

.copy{
width: 100%;
text-align: center;
color: #fff;
}







/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●　タブレット　769〜1024　●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
@media screen and ( max-width : 1024px ) {
/* ----------------------------------------
	#　トップページ
---------------------------------------- */
#wrap{
width: 100%;
letter-spacing: 0.1em;
position: relative;
font-size: 18px;
}

.pc{
display: none;
}

.tab{
display: block;
}

/* ----------------------------------------
	#　会社概要
---------------------------------------- */
#abo{
margin-top: 100px;
}

.all_box{
width: 92%;
margin: 0 auto 100px;
}



/* ----------------------------------------
	#　工場内機械・製造工程
---------------------------------------- */
.pro02 li{
width: 20%;
margin-right: 5%;
}

.pro02 li:after{
top: 35%;
right: -25%;
}

.pro02 li:last-child{
width: 25%;
}

.pro02 li:nth-last-child(2) > span{
top: 20%;
}


/* ----------------------------------------
	#　コピーライト
---------------------------------------- */
footer{}
	
}





/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●　スマホ　●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
@media screen and ( max-width : 1024px ) {

/* ----------------------------------------
	#　トップページ
---------------------------------------- */
#wrap{}


/* ----------------------------------------
	#　ヘッダーメニュー
---------------------------------------- */
.submenu{
width: 200px;
background-color:#fff;
border-top: none;
border-bottom: none;
height: 100vh;
box-shadow: 0 3px 10px rgba(142, 142, 142, 0.7);
align-items: flex-start;
}

.submenu ul{
width: 100%;
padding: 70px 5% 0;
flex-direction: column;
}

.submenu ul li{
width: 100%;
}


/* ----------------------------------------
	#　会社概要
---------------------------------------- */
#abo{
margin-top: 80px;
}

.abo_box{
width: 100%;
}

.abo_box th{
letter-spacing: 0.4em;
min-width: 100px;
}


/* ----------------------------------------
	#　ごあいさつ
---------------------------------------- */
#aisatu{}


/* ----------------------------------------
	#　ジャパンパックライスができること
---------------------------------------- */
#can{}

.can_box{
width: 100%;
}

.can_img{
padding: 50px 5% 20px;
}

.can_img img{
width: 100%;
}


/* ----------------------------------------
	#　工場内機械・製造工程
---------------------------------------- */
.pro02 li{
width: 28%;
margin-right: 5%;
}

.pro02 li:after{
right: -20%;
}

.pro02 li:last-child{
width: 30vw;
}


/* ----------------------------------------
	#　コピーライト
---------------------------------------- */
footer{}

}





/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●　スマホ　●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
@media only screen and (max-width: 600px) {
.pc{
display: none;
}

.smp{
display: block;
}


/* ----------------------------------------
	#　工場内機械・製造工程
---------------------------------------- */
h3 {
font-size: 28px;
}

.pro02 li{
width: 44%;
margin-right: 6%;
}

.pro02 li:after{
right: -18%;
border: 10px solid transparent;
border-left: 10px solid #E60012;
}

.pro02 li:nth-last-child(2){
margin-right: 6%;
}

.pro02 li:nth-last-child(2):after{
right: 90%;
top: auto;
bottom: -75px;
border: 15px solid transparent;
border-top: 15px solid #E60012;
}

.pro02 li:last-child{
width: 100%;
max-width: 300px;
margin: 40px auto 0;
}

.pro02 li:nth-last-child(2) > span{
top: auto;
bottom: -40px;
right: 50%;
width: 100%;
text-align: center;
}

.huk{
flex-direction: column;
align-items: center;
}

.huk div{
width: 100%;
max-width: 500px;
margin: 0 auto;
}

.huk div:first-child{
margin-bottom: 15px;
}


}



#topBtn{
position: fixed;
bottom: 15px;
right: 15px;
display: block;
text-align: center;
z-index: 1000;
}

.topBtn{
width: 70px;
height: 70px;
padding: 13px 5px;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
color: #000;
font-weight: 700;
font-size: 13px;
border: 1px solid #000;
transition: .3s;
background: #fff;
}

.topBtn:before{
content: "";
position: absolute;
left: 50%;
top: 45%;
width: 12px;
height: 12px;
border-top: 3px solid #000;
border-left: 3px solid #000;
transform: translate(-50%,-50%) rotate(45deg);
transition: .3s;
}

.topBtn:hover{
color: #fff;
background: #000;
transition: .3s;
}

.topBtn:hover:before{
border-top: 3px solid #fff;
border-left: 3px solid #fff;
transition: .3s;
}



/* ----------------------------------------
	# アニメーション用css
---------------------------------------- */
.fadeIn{
animation-name:fadeInAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
from{
opacity: 0;
}

to{
opacity: 1;
}
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}
.Topfadeup{
animation-name:fadeUpAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
from{
opacity: 0;
transform: translateY(100px);
}

to{
opacity: 1;
transform: translateY(0);
}
}

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
from{
opacity: 0;
transform: translateX(-100px);
}

to{
opacity: 1;
transform: translateX(0);
}
}

.fadeRight{
animation-name:fadeRightAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
from{
opacity: 0;
transform: translateX(100px);
}

to{
opacity: 1;
transform: translateX(0);
}
}

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
opacity: 0;
}