@charset "utf-8";
/* ============================================================
    reset css
============================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: bottom;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html{overflow-y: scroll;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
input, textarea{margin: 0; padding: 0;}
ol, ul{list-style:none;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
a:focus {outline:none;}

/* float解除 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


/* ============================================================
    body
============================================================= */
body{
  position: relative;
  font-family: "Noto Sans Japanese", 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 14px;
    -webkit-text-size-adjust: 100%;
}

#wrap{
/*  width: 1380px;*/
	width:inherit;
  position: relative;
}

#content{
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.pc_only{
  display: block;
}

.sp_only{
  display: none;
}


/* ============================================================
    nav
============================================================= */
.sidenav{
  width: 151px;
  height: 100%;
  position: absolute;
  top: 0;
  right:0;
  background-color: #23406c;
  overflow: hidden;
  padding: 30px 25px 0;
  z-index: 4;
}

.sidenav nav{
  float: left;
}

.sidenav nav ul{
  margin: 20px 0 0 15px;
}

.sidenav nav ul li{
  padding: 10px 0 10px 14px;
  background: url(../images/icon_list.png) no-repeat 0 30%;
  line-height: 20px;
}

.sidenav nav ul li a{
  text-decoration: none;
  color: #fff;
}

.sidenav nav ul li a:hover{
  text-decoration: underline;
}

.sidenav a:hover img{
  text-decoration: underline;
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.sidenav nav ul li a span{
  display: block;
  font-size: 10px;
}

.logo a{
  display: inline-block;
}

.sns div{
  float: left;
}

.sns div:first-child{
  margin-right: 10px;
}


/* ============================================================
    footer
============================================================= */
#footer{
  width: 100%;
  background-color: #1c3357;
  padding: 25px 0 50px;
  color: #fff;
  text-align: center;
  clear: both;
  z-index: 5;
}

#footer p{
/*  max-width: 1400px;*/
    padding: 0 60px;
  text-align: left;
  margin: 0 auto;
}

/*@media screen and (min-width: 1380px) {
  #wrap{
    width: 100%;
  }
}*/

@media screen and (max-width: 1420px) {
#footer p{
	padding:0 5%;
}
}

@media screen and (max-width:768px){
  #wrap{
    width: 100%;
  }

  .pc_only{
    display: none;
  }

  .sp_only{
    display: block;
  }

  .sidenav{
    width: 100%;
    height: auto;
    background-color: #23406c !important;
    overflow: hidden;
    padding: 0 !important;
	right: inherit !important;
	box-shadow: none !important;
    z-index: 111;
  }

  .sidenav nav{
    float: none;
  }

  .sidenav nav ul{
    display: none;
    margin: 0;
  }

  .sidenav nav ul li{
    width: 100%;
    padding: 0;
    background: url(../images/arR.png) no-repeat 95% 50%;
    background-size: 12px auto;
    border-bottom: 1px solid #fff;
    font-size: 14px;
    line-height: normal;
  }

  .sidenav nav ul li:first-child{
    border-top: 1px solid #fff;
  }

  .sidenav nav ul li a{
    display: block;
    padding: 4% 0 4% 2%;
  }

  .sidenav nav ul li a:hover{
    text-decoration: none;
  }

  .sidenav nav ul li a span{
    display: none;
  }

  .sidenav .nav{
    display: inline-flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    margin: 0 4%;
    margin: 15px;
    top: 0;
  }

  .sidenav .nav .button{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .sidenav .nav span{
    display: inline-block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    box-sizing: border-box;
    transition: all .4s;
  }

  .sidenav .nav span:nth-of-type(1){
    top: 0;
  }

  .sidenav .nav span:nth-of-type(2){
    top: calc(50% - 1px);
  }

  .sidenav .nav span:nth-of-type(3){
    bottom: 0;
  }

  .sidenav .nav .active span:nth-of-type(1){
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }

  .sidenav .nav .active span:nth-of-type(2){
    opacity: 0;
  }

  .sidenav .nav .active span:nth-of-type(3){
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
  }

  .sidenav .logo{
    position: relative;
    padding: 13px 2%;
	min-height: 50px;
	box-sizing: border-box;
  }

  .sidenav .logo img{
    width: 255px;
  }

  .sidenav .sns{
    display: none;
  }

  #footer{
      padding: 15px 0;
  }
    
    
  #footer p{
	  text-align:center;
	  font-size: 12px;
  }
}

/*
@media screen and (max-width:420px){
  .sidenav .nav{
    top: 25%;
  }
}*/