@charset "UTF-8";
/* CSS Document */
@media screen and (min-width:0px) {
img{
  width: 100%;
  height: auto;
}
body{
  background: url("../images/common_bg.jpg");
  font-feature-settings: "palt" 1;
}

#wrapper{padding: 70px 0 0;}

header{
  width: 100%;
  height: 70px;
  position: fixed;
  top:0;
  left: 0;
  z-index: 100;
  background: url("../images/common_bg.jpg");
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: solid 1px rgba(0,0,0,0.2);
}
header h1 img{
  width: auto;
  height: 48px;
}

header .nav_btn{
  width: 30px;
  height: 30px;
  position: relative;
}

header .nav_wrapper.sp{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left: 0;
  padding: 0 20px;
  margin: 70px 0 0;
  display: none;
  flex-wrap: wrap;
  flex-flow: column-reverse;
  justify-content: flex-end;
  align-content: space-between;
}

header .nav_wrapper.sp .link{
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
  header .nav_wrapper.sp .link li a{
    display: block;
    padding: 6px;
  }
  header .nav_wrapper.sp .link li a img{
    width: auto;
    height: 36px;
  }
header .link li:last-child{
  position: relative;
}
header .link p {
  position: absolute;
  bottom: 50%;
  right: 0;
  transform: translate(-10%,50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 2px 4px;
}
header .nav_wrapper.sp nav{margin: 30px 0 40px;}
header .nav_wrapper.sp nav ul{display: grid;}
header .nav_wrapper.sp nav ul li{
  line-height: 66px;
  text-align: center;
  font-size: 2.1em;
  border-bottom: dashed 2px rgba(0,0,0,0.5);
}
  
header .nav_wrapper.sp nav ul li:last-child{border:none;}
  
.nav_bg {
  opacity: 0;
  transition: all 0.75s;
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left: 0;
  padding: 0 20px;
  margin: 70px 0 0;
  z-index: -1;
  visibility: hidden;
  background: rgba(251,249,238,0.95);
  cursor: pointer;
}
.nav_open .nav_bg {
  opacity: 1;
  visibility: visible;
}
  
.hamburger_line{
  transition: all 0.6s;
  width: 30px;
  height: 3px;
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  background-color: #000;
  display: block;
  background: #000;
  border-radius: 1.5px;
}

.hamburger_line01{
  top: 25%;
}

.hamburger_line02{
  top: 50%;
}

.hamburger_line03{
  top: 75%;
}

.nav_open header .nav_wrapper.sp{
  display: flex;
}
.nav_open .nav_bg {
  opacity: 1;
  visibility: visible;
}
.nav_open .hamburger_line01 {
  transform: rotate(45deg);
  top: 50%;
}
.nav_open .hamburger_line02 {
  width: 0;
  left: 50%;
}
.nav_open .hamburger_line03 {
  transform: rotate(-45deg);
  top: 50%;
}

.breadcrumbs{
  width: 100%;
  padding: 10px 20px;
  background: rgba(0,128,0,0.8);
}
.breadcrumbs ol{width: 100%;}
.breadcrumbs ol li{
  display: inline-block;
  color: #fff;
  font-size: 1.2em;
}
.breadcrumbs ol li::after{
  content: ">>";
  padding: 0 1em;
  vertical-align: text-bottom;
}
.breadcrumbs ol li:last-child::after{display: none;}

#title{
  padding: 16px 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.4);
  background-blend-mode: multiply;
}
#title h2{
  text-align: center;
  }
#title h2 img{
  width: auto;
  height: 34px;
}

footer{
  font-size: 1em;
  height: 4.5em;
  line-height: 4.5em;
  text-align: center;
}
.br_sp{display: inline-block;}
.sp{display: block;}
.pc{display: none;}
}
@media screen and (min-width:1000px) {
#wrapper{padding: 90px 0 0;}
header{
  height: 90px;
  padding: 0 30px;
}
header h1 img{
  width: auto;
  height: 60px;
}
header .nav_wrapper{
  height: 60%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
}
header .link{
  display: flex;
  justify-content: flex-end;
}
header .link img{width:50%;}
header .link p {
  transform: translate(25%,50%);
}
header ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

header ul li{margin-right: 2em;}
header ul li:last-child{margin-right: 0;}
  
header ul li a{
  display: block;
  font-size: 1.4em;
  text-align: end;
}
  
.breadcrumbs ol{
  max-width: 1000px;
  margin: 0 auto;
}

#title{padding: 42px 0 48px;}

#title h2 img{height: 44px;}


footer{font-size: 1.2em;}

.sp{display: none !important;}
.pc{display: block;}

}