.nav_toggle{ display: none; }
nav{ display: none; }
.pc{ display: block; }
.sp{ display: none; }
#sideArea nav{
  display: block;
}

@media (max-width: 786px) {
  .pc{ display: none; }
  .sp{ display: block; }
  #content_wrap{
    position: relative;
    height: 100%;
  }
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
    z-index:99999999;
    background-color: #FFFFFF;
  }
  .nav.show {
    opacity: 0.9;
    visibility: visible;
  }
  .nav ul{
    margin-top: 70px;
    padding: 0;
    font-size: 20px;
    clear: both;
    overflow-y: scroll;
    height: 100%;
  }
  .nav li{
    padding: 8px 20px 8px 20px;
    margin-bottom: 1px;
    font-size: 14px;
    background-color: #02762F;
  }
  .nav li .arrow{
    position: relative;
    display: block;
    padding: 0 0 0 16px;
    color: #FFFFFF;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.3rem;
  }
  .nav li .arrow::before,
  .nav li .arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
  }
  .nav li .arrow::before{
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #FFFFFF;
  }
  .nav li .arrow::after{
    left: 5px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #02762F;
  }
  .nav li a{
    color: #FFFFFF;
  }
  .nav_toggle {
    display: block;
    position: absolute;
    top: 30px;
    right: 15px;
    width: 1.75rem;
    height: 1.5rem;
    z-index: 999999999;
  }
  .nav_toggle i {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    transition: transform .5s, opacity .5s;
  }
  .nav_toggle i:nth-child(1) {
    top: 0;
  }
  .nav_toggle i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .nav_toggle i:nth-child(3) {
    bottom: 0;
  }
  .nav_toggle.show i:nth-child(1) {
    transform: translateY(10px) rotate(-45deg);
  }
  .nav_toggle.show i:nth-child(2) {
    opacity: 0;
  }
  .nav_toggle.show i:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
  }
  #page{
    margin-top: 80px;
  }
  #header{
    width: 96%;
    margin: 0 auto;
    padding: 5px 2% 10px;
    background: none;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index:9999999;
    background-color: #FFFFFF;
  }
  #header .inner{
    width: 100%;
  }
  #header h1{
    font-size: 9px;
  }
  #header .fontSize{
    display: none;
  }
  #headerSubMenu{
    display: none;
  }
  #header h1 img{
    width: 50%;
    height: auto;
  }
  #gnav{
    display: none;
  }
  #content{
    width: 100%;
    margin: 0 auto;
  }
  #contents{
    width: 100%;
    margin: 20px auto 0;
    padding: 0;
  }
  .Box{
    margin-bottom: 15px;
  }
  h2.pageTtl{
    margin-bottom: 15px;
    padding: 6px 0 0 34px;
  }
  #AboutarticleBox .h4style, 
  #SharearticleBox .h4style{
    margin-bottom: 5px;
    padding: 3px 0 3px 25px;
  }
  #SharearticleBox .row2{
    background: url(../images/title_h4_2.gif) no-repeat left;
    height: 44px;
  }
  #AboutarticleBox img{
    width: 100%;
    height: auto;
  }
  .home #anshin p{
    font-size: 12px;
    margin-bottom: 10px;
  }
  .logo-70anniversary img{
    margin-right: 10px;
    width: 80px;
    height: 80px;
  }
  #mainImage{
    width: 96%;
    margin: 0 auto;
  }
  #mainImage img{
    width: 100%;
    height: auto;
  }
  #mainImage .slider li img{
    height: auto;
  }
  #mainArea{
    width: 96%;
    margin: 0 auto;
    padding: 0;
    float: none;
    border-left: none;
    min-height: 100px;
  }
  #Business img{
    width: 100%;
    height: auto;
  }
  #mainArea .left{
    float: none;
    width: 86%;
    margin: 0 auto;
  }
  #mainArea .left img{
    width: 100%;
    height: auto;
  }
  #mainArea .right{
    float: none;
    width: 86%;
    margin: 0 auto;
  }
  #mainArea .right img{
    width: 100%;
    height: auto;
  }
  #mainArea h2 img{
    max-width: 100%;
  }
  .newsList dt{
    border-bottom: none;
    float: none;
    padding: 5px 0 5px 10px;
  }
  .newsList dd{
    padding: 0 0 5px 0;
  }
  .Box p.Figure img{
    width: 100%;
    height: auto;
  }
  .Box img{
    width: 100% !important;
    height: auto !important;
  }
  /*---------------------------------------------------------------------------*/
  /* NOSAIとは */
  /*---------------------------------------------------------------------------*/
  #AboutarticleBox,
  #SharearticleBox{
    width: 96%;
    margin: 0 auto;
    line-height: 150%;
  }
  .page-id-18 p.Figure img{
    width: 100%;
    height: auto;
  }
  #LogoArea{
    width: 96%;
    padding: 15px 0;
    margin-bottom: 15px;
  }
  .page-id-18 #mainArea .left{
    margin-bottom: 10px;
    text-align: center;
  }
  .page-id-18 #mainArea .left img{
    width: 70%;
  }
  #AboutBnr{
    width: 96%;
    margin: 0 auto 15px;
  }
  #AboutBnr li{
    width: 94%;
    margin: 0 auto 10px;
    padding: 10px 3%;
    text-align: center;
  }
  #AboutBnr li em{
    padding: 0 0 5px 17px;
    display: inline-block;
  }
  #AboutBnr li img{
    width: 100%;
    height: auto;
  }
  /*---------------------------------------------------------------------------*/
  /* NOSAIの大きな特徴 */
  /*---------------------------------------------------------------------------*/
  #Compare{
    width: 96%;
    margin: 10px auto;
  }
  /*---------------------------------------------------------------------------*/
  /* 引受から共済金支払いまで */
  /*---------------------------------------------------------------------------*/  
  .FigureCenter{
    width: 100%;
  }
  /*---------------------------------------------------------------------------*/
  /* 事業内容 */
  /*---------------------------------------------------------------------------*/  
  .WorkListBlock h3 a{
    display: inline-block;
    text-decoration: none;
  }
  #mainArea .WorkListBlock .right a{
    display: block;
    text-align: center;
  }
  #mainArea .WorkListBlock .right img{
    width: 60%;
  }
  /*---------------------------------------------------------------------------*/
  /* 農作物共済 */
  /*---------------------------------------------------------------------------*/ 
  .Standard td{
    padding: 10px 4%;
  }
  .Standard td img{
    width: 92%;
    height: auto;
  }
  /*---------------------------------------------------------------------------*/
  /* 園芸施設共済 */
  /*---------------------------------------------------------------------------*/ 
  .Engei01{
    padding: 0 0 180px 0;
    background-position: bottom center;
  }
  /*---------------------------------------------------------------------------*/
  /* NOSAIで使われる主な用語 */
  /*---------------------------------------------------------------------------*/ 
  .Word th{
    padding: 10px;
    width: 6em;
  }
  .Word td{
    padding: 10px;
  }
  /*---------------------------------------------------------------------------*/
  /* 収納保険 */
  /*---------------------------------------------------------------------------*/ 
  .box01 ul{
    float: none;
    width: 96%;
    padding: 10px 2%;
    margin-bottom: 5px;
  }
  .box01 p{
    float: none;
    width: 96%;
    padding: 5px 2%;
  }
  .box02 ul{
    float: none;
    width: 96%;
    padding: 10px 2%;
    margin-bottom: 5px;
  }
  .box02 p{
    float: none;
    width: 96%;
    padding: 5px 2%;
  }
  .box03{
    height: 470px;
    background-position: 0 top;
  }
  .box03 p{
    float: none;
    padding: 10px 2%;
    width: 96%;
    margin-top: 260px;
  }
  /*---------------------------------------------------------------------------*/
  /* 公表事項 */
  /*---------------------------------------------------------------------------*/ 
  #articleBox{
    width: 96%;
    margin: 0 auto;
  }
  #articleBox .articleArea{
    width: 100%;
  }
  h4.newyearDeta{
    padding-left: 15px;
  }
  .dlAdobe img.right{
    width: 50%!important;
    height: auto;
    display: block;
  }
  .dlAdobe{
    width: 90%;
    margin: 5px auto;
  }
  #subMenuArea ul{
    padding: 10px;
  }
  /*---------------------------------------------------------------------------*/
  /* 書写コンクール */
  /*---------------------------------------------------------------------------*/ 
  #articleBox h3{
    margin-bottom: 15px;
  }
  #articleBox h3 img{
    top: -3px;
  }
  #articleBox h3.oubosuu{
    clear: both;
    overflow: hidden;
    text-align: center;
  }
  #articleBox h3.oubosuu img{
    width: 180%;
    height: auto;
    margin: 0 auto;
    top: 0;
    position: absolute;
    left: calc(50% - 88%);
  }
  .shoshakontop #articleBox .articleArea{
    width: 96%;
    padding: 0;
    margin: 0 auto;
  }
  .shoshakonTxt{
    width: 100%;
  }
  .shoshakontop h4{
    clear: both;
    overflow: hidden;
  }
  .shoshakontop h4 img{
    width: 180%;
    height: auto;
  }
  .sakuhinBox{
    float: none;
    width: 80%;
    margin: 0 auto 10px;
  }
  .sakuhinBox .sakuhinImage img{
    width: 100%;
    height: auto;
  }
  .shoshakontop h4.h4style{
    height: auto;
    padding: 7px 0 7px 25px;
    color: #2b7611;
    letter-spacing: 2px;
    font-size: 100%;
    margin-bottom: 10px;
  }
  .ouboTable, .meiboTable table{
    width: 100%!important;
    margin: 0 auto 10px;
  }
  .shinsaImage{
    width: 90%;
    height: auto;
    padding: 0;
    float: none;
    margin: 0 auto 10px;
  }
  /*---------------------------------------------------------------------------*/
  /* 広報紙NOSAIかがわ */
  /*---------------------------------------------------------------------------*/ 
  .single-newsletter #articleBox .articleArea,
  .post-type-archive-newsletter #articleBox .articleArea{
    width: 80%;
    margin: 20px auto 30px;
    padding: 0;
  }
  .newsletterBox{
    float: none;
    width: 90%;
    margin: 0 auto 15px;
  }
  .newsletterBox .newsletterImage{
    width: 90%;
    height: auto;
    padding: 20px 5%;
  }
  .newsletterBox .newsletterImage img{
    width: 90%!important;
    height: auto!important;
  }
  .newslettertop #articleBox .articleArea{
    width: 80%;
    margin: 20px auto 30px;
    padding: 0;
  }
  /*---------------------------------------------------------------------------*/
  /* 農業共済新聞 */
  /*---------------------------------------------------------------------------*/ 
  #NewsPaper{
    width: 100%;
    margin: 10px auto 20px;
  }
  #NewsPaper p{
    margin-bottom: 10px;
  }
  #NewsPaper p img{
    width: 100%;
    height: auto;
  }
  .LocalArea{
    padding: 10px;
    margin-bottom: 10px;
  }
  .LocalArea dt{
    background: url(../images/icon_square_gr.gif) no-repeat left 0.3em;
    float: none;
    display: block;
    width: 90%;
    margin-bottom: 5px;
  }
  .LocalArea dd.Add{
    width: 8em;
    margin-right: 10px;
  }
  .LocalArea dd.Tel{
    width: 9em;
    margin: 0;
  }
  /*---------------------------------------------------------------------------*/
  /* お問い合わせ */
  /*---------------------------------------------------------------------------*/ 
  #mainArea iframe{
    width: 100%;
    height: 1000px;
    max-height: 2000px!important;
  }
  /*---------------------------------------------------------------------------*/
  /* 新着情報 */
  /*---------------------------------------------------------------------------*/ 
  #articleBox .articleArea dt{
    padding-left: 5px;
  }
  #articleBox .articleArea dd{
    padding-left: 5px;
  }
  #articleBox .pageNation{
    width: 90%;
  }
  .wp-block-latest-posts.wp-block-latest-posts__list{
    line-height: 160%;
  }
  /*---------------------------------------------------------------------------*/
  /* 新着情報 */
  /*---------------------------------------------------------------------------*/   
  #Network{
    width: 96%;
    margin: 10px auto;
  }
  .page-template-office h2.pageTtl {
    font-size: 15px;
    line-height: 160%;
  }
  .NtTable{
    padding: 10px;
  }
  .NtTable2{
    padding: 10px;
  }
  .TableInner dt{
    width: 100%;
    float: none;
  }
  .TableInner dd{
    width: 100%;
    float: none;
  }
  #LowArea{
    margin-left: 1em;
  }
  #LowArea ul{
    margin-left: 1em;
  }
  #sideArea nav{
    display: block;
  }
  /*---------------------------------------------------------------------------*/
  /* リンク */
  /*---------------------------------------------------------------------------*/   
  #Link{
    padding-top: 0px;
  }
  .ordinarilyList .green{
    font-size: 14px;
    background-position: 5px center;
    line-height: 160%;
    padding: 5px 0 5px 25px;
  }
  #Link h4{
    padding-left: 5px;
    font-weight: bold;
  }
  .ordinarilyList .indent{
    margin-left: 0;
    font-size: 14px;
    background-position: 5px center;
    line-height: 160%;
    padding: 5px 0 5px 25px;
  }
  /*---------------------------------------------------------------------------*/
  /* サイトマップ */
  /*---------------------------------------------------------------------------*/   
  #Sitemap ul{
    margin-left: 10px;
  }

  /*---------------------------------------------------------------------------*/
  /* サイドバー */
  /*---------------------------------------------------------------------------*/   
  #sideArea{
    width: 96%;
    float: none;
    margin: 10px auto 50px;
  }
  #sideArea li img{
    width: 98%;
    height: auto;
  }
  #navBnr1{
    clear: both;
    overflow: hidden;
    margin-bottom: 5px;
  }
  #navBnr1 img{
    padding: 1%;
  }
  #navBnr1 li{
    width: 49%;
    float: left;
    margin: 0 0.5%;
  }
  #navBnr2{
    clear: both;
    overflow: hidden;
  }
  #navBnr2 li{
    width: 49%;
    float: left;
    margin: 0 0.5%;
  }
  #navBnr2 li:nth-child(8){
    /* width: 100%; */
    /* float: none; */
  }
  .twitter-timeline.twitter-timeline-rendered {
    width: 100% !important;
  }
  /*---------------------------------------------------------------------------*/
  /* フッター */
  /*---------------------------------------------------------------------------*/     
  #footer .inner{
    width: 100%;
  }
  #footerNav {
    padding-top: 10px;
    margin-bottom: 30px;
  }
  #footerNav li{
    font-size: 10px;
    background-position: left 2px;
  }
  #infoFooter{
    background: #fff;
    border: 1px solid #d4eef6;
    padding: 10px 15px;
    width: 80%;
    font-weight: bold;
    clear: both;
    overflow: hidden;
    margin: 0 auto;
  }
  #infoFooter h3{
    font-size: 18px;
  }
  #infoFooter img{
    float: left;
    width: 40%;
    height: auto;
    margin-right: 10px;
  }
  #infoFooter img:nth-child(1){
    width: 45%;
  }
  #infoFooter p{
    margin-bottom: 5px;
  }
  #footer .right{
    float: none;
    width: 80%;
    margin: 0 auto;
    border-left: none;
  }
  #footer h2{
    font-size: 12px;
    padding: 5px 0 0;
    text-align: center;
    border-left: none;
    clear: both;
    overflow: hidden;
  }
  #footer h2 img{
    width: 50%;
    height: auto;
    padding: 5px 0 0;
  }
  .copyRight{
    padding: 10px 0 5px;
  }
}