html{scroll-behavior:smooth}
: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
}

/* 「編集」ボタンを非表示にするCSS */
.post-edit-link {display:none;}

/* またはリンクの外側のspanから消す */
.edit-link {display:none;}

body{font-family:var(--sans);color:#333}
body,p{margin:0;padding:0}
dd,dl,dt,li,ul{padding:0;margin:0}
li,ul{list-style-type:none}
h1{padding:0;margin:0}
.header_wrapper{width:100%;position:fixed;height:110px;z-index:9990}
.header_space{padding: 50px;}/*H2 テキストタイトル用*/
header{width:calc(100% - 80px);height:69px;display:flex;justify-content:space-between;padding:20px 40px 0px 40px}
header .logo{width:196px;height:69px}
header .logo a{position:relative;display:block;width:100%}
header .logo a:hover{opacity:.6}
header .logo img{position:absolute}
header .header_right{width:calc(100% - 196px);height:69px;padding-top:20px}
header .header_right ul{display:flex;justify-content:flex-end}
header .header_right ul li{margin-right:40px;padding-top:3px;width:50px;display:block}
header .header_right ul li a{position:relative;display:block;width:100%}
header .header_right ul li a:hover{opacity:.6}
header .header_right ul li img{position:absolute}
header .header_right ul li:first-of-type{width:108px}
header .header_right ul li:nth-of-type(2){width:74px}
header .header_right ul li:nth-of-type(3){width:205px}
header .header_right ul li:nth-of-type(4){margin-right:0;width:88px}
header .header_right ul li:last-of-type{margin-right:0;padding-top:0;width:30px;margin-top:-5px;display:none}
header .w{opacity:1}
header .b{opacity:0}
.header_wrapper.ani{background-color:#fff;animation-name:a;animation-fill-mode:backwards;animation-duration:.5s;animation-timing-function:ease;animation-delay:0;animation-direction:normal}

/*1で解説*/
@keyframes fadeInAnime{
  0% {
    background-color: transparent;
  }

  100% {
    background-color: #FFF;
  }
}
.header_wrapper.ani header .logo .w{opacity: 0}
.header_wrapper.ani header .logo .b{opacity: 1}
.header_wrapper.ani .w{opacity: 0}
.header_wrapper.ani .b{opacity: 1}

@keyframes fade_w{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



  /*チェックボックス等は非表示に*/
.header_wrapper input[type="checkbox"].nav-unshown,.nav-unshown{display:none}


#nav-open{display:block;width:20px;height:20px;vertical-align:middle;background-repeat:no-repeat;cursor:pointer;background-position:center center;padding:10px 30px 15px 15px;margin-left:auto;z-index:3}
#nav-open span,#nav-open span:after,#nav-open span:before{position:absolute;height:3px;width:30px;border-radius:3px;display:block;content:'';cursor:pointer;background-color:#fff;z-index:4;transition:0 ease-in-out}
.header_wrapper.ani #nav-open span,.header_wrapper.ani #nav-open span:after,.header_wrapper.ani #nav-open span:before{background-color:#231815}
#nav-open span:before{bottom:-8px}
#nav-open span:after{bottom:-16px}
.nav-unshown:checked+#nav-open span{transform:rotate(45deg);width:30px;top:35px;right:20px}
.nav-unshown:checked+#nav-open span:before{transform:rotate(-90deg);bottom:0;width:30px}
.nav-unshown:checked+#nav-open span:after{transform:rotate(-90deg);bottom:-20px;width:30px;display:none}
.header_wrapper.ani .nav-unshown:checked+#nav-open span,.header_wrapper.ani .nav-unshown:checked+#nav-open span:after,.header_wrapper.ani .nav-unshown:checked+#nav-open span:before{background-color:#fff}
#nav-close{display:none;z-index:1;left:0;width:100%;background:#000;opacity:0}
#nav-close,#nav-content{position:fixed;top:0;height:100%;transition:.3s ease-in-out}
#nav-content{overflow:auto;right:0;z-index:2;width:80%;max-width:330px;background:#231815;-webkit-transform:translateX(105%);transform:translateX(105%)}
#nav-input:checked~#nav-close{display:block;opacity:.5}
#nav-input:checked~#nav-content{-webkit-transform:translateX(0);transform:translateX(0);box-shadow:6px 0 25px rgba(0,0,0,.15)}
#nav-content ul{display:block;padding-top:60px}
#nav-content ul li{width:calc(100% - 20px);margin-left:0;padding-left:20px}
#nav-content ul li a{display:block;padding-top:10px;padding-bottom:10px;padding-left:20px;position:relative;font-size:20px;background-image:url(../img/common/menu_arrow.png);background-position:right 26px center;background-repeat:no-repeat;color:#fff;text-decoration:none}

#nav-content .food_safety_sp_nav {padding-left: 30px;margin-top: 30ppx;margin-right: 40px;margin-top: 50px;}  
#nav-content .food_safety_sp_nav a{padding: 10px;color: #FFF;text-align: left;text-decoration: none;border: 1px solid #FFF}  

.contents_wrapper{width:100%}
.footer_wrapper{height: 319px;}
.footer_wrapper footer{text-align: center}
.footer_wrapper footer .logo{padding: 80px 0px 80px 0px;}
.footer_wrapper footer .copy{background-color: #9b7182;padding: 25px;margin: 0}



/*
 * 個別 ページネーション
 * */

.single_content_pager{padding: 0px;width: 100% ;border: 1px solid #000}
.single_content_pager__inner{display:block;width: 100%}
.single_content_pager__inner ul{display:flex;justify-content:space-between;flex-wrap: wrap;padding: 0;margin: 0}
.single_content_pager__inner ul li{width: 40%;padding: 0;margin: 0}

.single_content_pager__inner ul li:nth-of-type(1){width: 40%}
.single_content_pager__inner ul li:nth-of-type(2){width: 20%;position: relative;}
.single_content_pager__inner ul li:nth-of-type(2)::before,
.single_content_pager__inner ul li:nth-of-type(2)::after{position: absolute;background-color: #000;width: 1px;top: 0;bottom: 0; content: "";display: block;height: 60%;margin-top: auto;margin-bottom: auto;}
.single_content_pager__inner ul li:nth-of-type(2)::before{right: 0}
.single_content_pager__inner ul li:nth-of-type(2)::after{left: 0}


.single_content_pager__inner ul li:nth-of-type(3){width: 40%;}

.single_content_pager__inner ul li a{
  display:flex;
justify-content:center;
align-items:center;
  text-decoration: none;color: #000;position: relative;
  flex-wrap: wrap}

.single_content_pager__inner ul li a:hover{opacity: 0.6}

.single_content_pager__inner ul li:nth-of-type(1) a{height: 60px;padding: 0px 20px 0px 50px;width: calc(100% - 70px);justify-content: flex-start}
.single_content_pager__inner ul li:nth-of-type(2) a{text-align: center;height: 43px;display: block;padding-top: 17px;width: 100%;}
.single_content_pager__inner ul li:nth-of-type(3) a{padding: 0px 50px 0px 20px;text-align: right;height: 60px;width: calc(100% - 70px);justify-content: flex-end}

.single_content_pager__inner ul li:nth-of-type(1) a::before,
.single_content_pager__inner ul li:nth-of-type(1) a::after
{
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 10px;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000;
  transform-origin: calc(100% - 1px) 50%;
}

.single_content_pager__inner ul li:nth-of-type(1) a::before {
  transform: rotate(-135deg);
}

.single_content_pager__inner ul li:nth-of-type(1) a:after {
  transform: rotate(135deg);
}



.single_content_pager__inner ul li:nth-of-type(3) a::before,
.single_content_pager__inner ul li:nth-of-type(3) a::after
{
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 10px;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000;
  transform-origin: calc(100% - 1px) 50%;
}

.single_content_pager__inner ul li:nth-of-type(3) a::before {
  transform: rotate(-45deg);
}

.single_content_pager__inner ul li:nth-of-type(3) a:after {
  transform: rotate(45deg);
}







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

.header_space{padding: 25px;}/*H2 テキストタイトル用*/  
  
.header_wrapper{width:100%;position:fixed;height:70px;z-index:9991;}
header{width:calc(100% - 40px);height:69px;display:flex;justify-content:space-between;padding:0px 20px 0px 20px}
header .logo{width:100px;height:40px;padding-top: 20px;}
header .logo img{width:100px;height:auto}
header .header_right{width:calc(100% - 196px);height:40px;padding-top:20px}
header .header_right ul li{display: none}
header .header_right ul li:last-of-type{margin-right:0;padding-top:0;width:40px;margin-top:-5px;display:block}
header .header_right ul li ul li  {display: block}


  
.footer_wrapper{height: auto;}
.footer_wrapper footer{text-align: center}
.footer_wrapper footer .logo{padding: 40px 0px 40px 0px;}
.footer_wrapper footer .logo img{width: 150px}
.footer_wrapper footer .copy{background-color: #9b7182;padding: 15px;margin: 0}
.footer_wrapper footer .copy img{width: 220px} 
  
.single_content_pager{padding: 0px;width: 90% ;border: 1px solid #000;margin: 0 auto 0 auto}  
  
}



@media print {
.header_wrapper{width:100%;position:static;height:110px;z-index:9990}
}