:root {
--serif: 'Noto Serif JP', serif, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
--sans: 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.main{height: 592px;width: 100%;background-image: url(../img/top/main_bg03.png);background-position: center bottom;
background-size: cover;position: relative;}
.main img{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.top .contents{
    width: 100%;
    background-image: url(../img/top/top_contents_bg.png);
    background-size: contain;
    padding-bottom: 405px;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.top .contents .about_text{
    text-align: center;font-family:var(--serif);
    padding: 30px 0px 100px 0px;font-size: 18px;
    line-height: 43px;
}

.naming{width:min(100%, 680px);margin: 0 auto 100px auto}
.naming a{display: block; background-color: #f2f2f2;padding: 40px 15px 40px 130px;background-image:url(../img/top/logo2024.png);background-position: left 15px center;background-repeat: no-repeat;background-size: 100px;text-decoration: none;font-size: 18px;color: #000;border: 2px solid #c8000a}
.naming a:hover{opacity: 0.4}

.top .contents .shiki_open{
    padding-bottom: 100px;
    text-align: center;
    
}
.top .contents .shiki_open img{width: 100%;max-width: 1080px;}

.top .contents .shiki_open a:hover{
    opacity: 0.6
}

.top .contents .top_link{width: min(100%, 1080px);margin: 0 auto 100px auto}
.top .contents .top_link ul{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap}
.top .contents .top_link ul li{}
.top .contents .top_link ul li a{background-position: center center;
background-repeat: no-repeat;display: block;width: 240px;height: 240px;position: relative;}
.top .contents .top_link ul li img{position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}



.top .contents .top_link ul li:nth-of-type(1) a{background-image: url(../img/top/top_about.png);}
.top .contents .top_link ul li:nth-of-type(2) a{background-image: url(../img/top/top_brand.png);}
.top .contents .top_link ul li:nth-of-type(3) a{background-image: url(../img/top/top_our.png);}
.top .contents .top_link ul li:nth-of-type(4) a{background-image: url(../img/top/top_rec.png);}


.top .contents .top_link ul li a:hover{opacity: 0.6}

.top .contents .top_food_safety{width: min(100%, 600px);margin: 0 auto 100px auto;position: relative;}
.top .contents .top_food_safety a{padding: 25px 15px 25px 15px;width: calc(100% - 30px);display: block;text-decoration: none;font-weight: bold;text-align: center;color: #FFF;font-size: 24px;background-color: #222;}
.top .contents .top_food_safety span{display: block;
position: absolute;width: 60px;height: 30px;color: #FFF;left: 25px;top:27px;font-weight: 900;font-size: 16px;background-color: red;text-align: center;}

.top .contents .top_food_safety:hover{opacity: 0.4 }

.top .contents .top_food_safety::before,
.top .contents .top_food_safety::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 30px;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 1px) 50%;
}

.top .contents .top_food_safety::before {
  transform: rotate(45deg);
}

.top .contents .top_food_safety:after {
  transform: rotate(-45deg);
}


.top .contents .top_news{padding: 100px 0px 100px 0px;width: min(100%, 1080px);margin: 0 auto 0 auto}

.top .contents .top_news h2{ text-align: center;font-family:var(--serif);border-bottom: 1px solid #a99280;padding: 0px 0px 15px 0px;margin: 0px;}
.top .contents .top_news ul{display: block;height: auto}
.top .contents .top_news ul li{display: block;position: relative;height: auto;border-bottom: 1px solid #CCC;}
.top .contents .top_news ul li .news_date{font-weight: bold;position: absolute;display: block;left: 15px;top: 24px}
.top .contents .top_news ul li .post_type{font-size: 14px;color: #FFF; text-align: center;font-weight: 600;height: 22px;position: absolute;padding: 5px 0px 5px 0px;left: 150px;width: 160px}
.top .contents .top_news ul li .post_type_news{background-color: #008000}
.top .contents .top_news ul li .post_type_food_safety{background-color: #008080}
.top .contents .top_news ul li .post_type_letter{background-color: #808000}
.top .contents .top_news ul li .news_title{display: block;padding: 2px 30px 0px 310px;}
.top .contents .top_news ul li a{display: block;height: calc(100% - 35px);text-decoration: none;color: #000;padding: 20px 10px 15px 10px;position: relative;min-height: 35px;width: calc(100% - 20px)}
.top .contents .top_news ul li a::before,
.top .contents .top_news ul li a::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 20px;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000;
  transform-origin: calc(100% - 1px) 50%;
}
.top .contents .top_news ul li a::before {
  transform: rotate(45deg);
}
.top .contents .top_news ul li a:after {
  transform: rotate(-45deg);
}
.top .contents .top_news ul li .no_link{display: block;height: calc(100% - 35px);text-decoration: none;color: #000;padding: 20px 10px 15px 10px;position: relative;}
.top .contents .top_news ul li:hover{background-color: aliceblue}


    .top_202506_news{width: 100%;background-color: #FFF;padding: 20px 0px 20px 0px;margin-bottom: 0px;margin-top: 20px;}  
    .top_202506_news .top_202506_news_inner{width: 80%;border: 1px solid #333;padding: 20px 20px 20px 20px;max-width: 700px;margin: 0 auto 0 auto}
    .top_202506_news .top_202506_news_title{text-align: center;font-size: 20px;font-weight: 900;margin-bottom: 10px;}  
    .top_202506_news .top_202506_news_title_2{text-align: center;font-size: 20px;font-weight: 900;margin: 40px 0 10px 0} 
    .top_202506_news .sub_title{font-weight: bold;margin-bottom: 5px} 
    .top_202506_news .top_202506_news_text_01{font-size: 16px;text-align: center;}
    
.top .contents .top_news .to_news_list{padding-top: 30px;width: 200px;margin-left: auto}
.top .contents .top_news .to_news_list a{background-color: #EEEEEE;display: block;}
.top .contents .top_news .to_news_list a:hover{background-color: aliceblue}
.top .contents .top_news .to_news_list a{display: block;height: calc(100% - 35px);text-decoration: none;color: #000;padding: 15px 20px 5px 20px;position: relative;min-height: 35px;width: calc(100% - 40px);font-weight: 600}
.top .contents .top_news .to_news_list a::before,
.top .contents .top_news .to_news_list a::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 20px;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000;
  transform-origin: calc(100% - 1px) 50%;
}
.top .contents .top_news .to_news_list a::before {
  transform: rotate(45deg);
}
.top .contents .top_news .to_news_list a:after {
  transform: rotate(-45deg);
}






@media screen and (max-width: 479px){
   
.main{height: 350px;width: 100%;background-image: url(../img/top/main_bg03.png);background-position: center bottom;
background-size: cover;position: relative;}
    
.main img{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 350px;
}
    
.top .contents{
    width: 100%;
    background-image: url(../img/top/top_contents_bg.png);
    background-size: 1200px;
    padding-bottom: 250px;
    background-position: center bottom;
    background-repeat: no-repeat;
} 
    
    
.naming{width:calc(100% - 40px);margin: 0 20px 30px 20px}
.naming a{display: block; background-color: #f2f2f2;padding: 20px 15px 20px 100px;background-image:url(../img/top/logo2024.png);background-position: left 15px center;background-repeat: no-repeat;background-size: 80px;text-decoration: none;font-size: 16px;color: #000;border: 2px solid #c8000a}
.naming a:hover{opacity: 0.4}
    
    
    
    
    
    
    
    
.top .contents .about_text{
    text-align: center;font-family:var(--serif);
    padding: 30px 20px 30px 20px;font-size: 14px;
    line-height: 26px;
    text-align: left;
}
.top .contents .about_text br:nth-of-type(1),
.top .contents .about_text br:nth-of-type(3){display: none}
 

    
    
    
    
.top .contents .shiki_open{
    padding-bottom: 100px;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}
    
.top .contents .shiki_open img{width: 100%;}
    
.top .contents .top_link{width: min(100%, 1080px);margin: 0 auto 0px auto}    
.top .contents .top_link ul{width: calc(100% - 40px);display: block;justify-content: space-between;flex-wrap: wrap;margin: 0 auto 0 auto}
.top .contents .top_link ul li{width: 100%;margin-bottom: 20px;}
.top .contents .top_link ul li a{background-position: center center;
background-repeat: no-repeat;display: block;width: 100%;height: 90px;position: relative;
    background-size: cover;}
    
    
.top .contents .top_link ul li img{position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    }
    
    
.top .contents .top_food_safety{width: min(90%, 600px);margin: 0 auto 60px auto;position: relative;}
.top .contents .top_food_safety a{padding: 20px 15px 20px 15px;width: calc(100% - 30px);display: block;text-decoration: none;font-weight: bold;text-align: left;color: #FFF;font-size: 18px;background-color: #222;}
.top .contents .top_food_safety span{display: block;
position: absolute;width: 45px;height: 25px;color: #FFF;left: 15px;top:-12px;font-weight: 900;font-size: 14px;background-color: red;text-align: center;}

.top .contents .top_food_safety:hover{opacity: 0.4 }

.top .contents .top_food_safety::before,
.top .contents .top_food_safety::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 15px;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 1px) 50%;
}

.top .contents .top_food_safety::before {
  transform: rotate(45deg);
}

.top .contents .top_food_safety:after {
  transform: rotate(-45deg);
}
    
.top .contents .top_news{padding: 100px 0px 100px 0px;width: min(90%, 1080px);margin: 0 auto 0 auto}
.top .contents .top_news ul li .news_date{font-weight: bold;position: absolute;display: block;left: 0px;top: 22px;font-size: 14px}    
.top .contents .top_news ul li .post_type{font-size: 14px;color: #FFF; text-align: center;font-weight: 600;height: 22px;position: absolute;padding: 2px 5px 2px 5px;left: 120px;width: auto} 
.top .contents .top_news ul li .news_title{display: block;padding: 40px 30px 0px 0px;font-size: 15px;}    
.top .contents .top_news ul li a{display: block;height: calc(100% - 25px);text-decoration: none;color: #000;padding: 20px 10px 15px 0px;position: relative;min-height: 35px;width: calc(100% - 10px)}
.top .contents .top_news ul li a::before,
.top .contents .top_news ul li a::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 10px;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000;
  transform-origin: calc(100% - 1px) 50%;
}
.top .contents .top_news ul li .no_link{display: block;height: calc(100% - 25px);text-decoration: none;color: #000;padding: 20px 10px 15px 0px;position: relative;}    
}