@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}

html {
  scroll-behavior: smooth;
}

/* ------------------------------------------- ヘッダー ------------------------------------------  */

/* ------------------------------ PC -----------------------------  */
#header {
  width:100%;
  position: fixed;
  top:0;
  transition: color 0.4s ease-out;
  z-index: 99;
}
@media screen and (max-width:757px) {/* sp */
	#header { height:auto; background:none; }
}

/*　上に上がる動き　*/

#header.UpMove{
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

#header.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}


div.header-pc {
  position: fixed;
  color: black;
	font-size:14px;
  margin:0;
  padding: 0;
  height:0;
  position:relative;
  z-index: 99999;
  transition: top .5s;
} 
@media screen and (max-width:757px) {/* sp */
	div.header-pc { display: none; }
}

.pc {
  position: relative;
}


/* --------- スクロール ----------  */
.elm {
  transition: 0.2s;
  opacity: 0;
  z-index:-1;
}

.elm-2 {
  transition: 0.2s;
  opacity: 0;
  z-index:-1;
}


/* ---（ロゴ） ---  */
.narabi {
  position: absolute;
  top:45px;
  left:45px;
}

.Header-Logo{
  width:120px;
  display: block;
  transition: all 0.4s ease;
}
.Header-Logo:hover {
  transform: scale(1.1);
  transition: all 0.4s ease;
}


/* ---ナビ ---  */
.navi-oya-s {
  position:absolute;
  text-align: right;
  top:45px;
  right:45px;
  background-color: #ffffffe5;
  padding:15px 35px 15px 35px;
  border-radius: 50px;
}

.navi-s {
  display: inline-block;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  color:#2B2B2B;
  font-size:16px;
  font-weight: bold;
  text-align: left;
}

a.navi-li-s {
  position: relative;
  text-decoration: none;
  text-align: center;
  margin:15px;
}
a.navi-li-s::after {
  position: absolute;
  left:0;
  bottom: -5px;
  content: '';
  width: 100%;
  height: 1px;
  background: #2B2B2B;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
a.navi-li-s:hover::after {
  transform: scale(1, 1);
}



/* ------------------------------ sp -----------------------------  */
div.header-sp {
  position: fixed;
  background:none;
  color: black;
  font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
  margin:0;
  padding: 0;
  height:70px;
  width: 100%;
  z-index: 99;
} 
@media screen and (min-width:754px) {
	div.header-sp { display: none; }
} 

.header-back-sp {
  position: fixed;
  background:#F2F0F0;
  height:100px;
  width:100%;
}

.siro-sp {
  background: none;
  height:43px;
  width:100%;
  position: fixed;
  z-index:10;
}

.narabi-sp {
  display:inline-block;
  margin-top:20px;
  margin-left:30px;
}

.narabi-sp-2 {
  display:inline-block;
}



/* --- 社名 ---  */
.logo-1-sp-top {
  width:70px;
}

.logo-1-sp-top.isSmall2{
  width:90px!important;
  margin-top:-10px!important;
  margin-left:-10px!important;
}

.logo-1-sp {
  width:90px;
  margin-top:-10px;
  margin-left:-10px;
}


/* --- link ---  */
.link-sp {
  font-size:14.5px;
  color:#707070;
  margin-top:0;
}

.link-li1-sp {
  background-color: black;
  width:50px;
  height:43px;
  text-align:center;
  text-decoration:none;
  margin:0;
  padding:0;
  position: fixed;
  right:100px;
  top:0;
  z-index:10;
}
.link-li1-sp:hover {
  background: #424242;
  color: white;
  text-decoration:none;
}



/* ---------------- navi（hamburger） ----------------  */

#nav-drawer {
position: fixed;
right:30px;
top:40px;
z-index:99;
}

.nav-unshown {
display:none;
}

#nav-open {
display: inline-block;
width: 30px;
height: 20px;
vertical-align: middle;
}

/*hamburger*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height:5px;
  width: 35px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
  z-index: 99999;
  transition: all .4s;
}

#nav-open span:before {
  bottom: -12px;
}
#nav-open span:after {
  bottom: -24px;
}

/*click*/
#nav-open.active span {
  top: 0px;
  left: 0px;
  width:40px;
  transform: translateY(6px) rotate(-45deg);
  background-color: #fff;
  margin-top:8px;
}
#nav-open.active span:before {
  opacity: 0;
}
#nav-open.active span:after {
  top: 12px;
  left: 0px;
  width:40px;
  transform: translateY(-12px) rotate(90deg);
  background-color: #fff;
}



/*cover*/
#nav-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/*naka*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
right: 0;
z-index: 9999;
width: 300px;
max-width: 82%;
height: 100vh;
padding-top:100px;
padding-left: 50px;
padding-right: 35px;
text-align: center;
color: black;
font-size:16px;
line-height: 50px;
letter-spacing:0px;
background: #0C6E45;
transition: .3s ease-in-out;
-webkit-transform: translateX(200%);
transform: translateX(105%);
list-style: none;
overflow:hidden;
overflow: scroll;
}

#nav-content ul li {
  list-style-type:none; 
  background-image:none; 
  padding-left:20px; 
  text-align: left;
}


#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);
}

/*link*/
.link-g {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-weight: bold;
  text-decoration: none;
  display:block;
  letter-spacing: 0.2em;
}
.link-g:hover {
  text-decoration: none;
}
.link-g:link {
  color: #fff
}
.link-g:visited {
  color:  #fff
}
.link-g:hover { 
  color: #fff
}
.link-g:active {
  color:  #fff
}

/*link2*/
.link-g-2 {
  font-family: "Noto Sans JP";
  font-weight: bold;
  text-decoration: none;
  display:block;
  letter-spacing:0.1em;
}
.link-g-2:hover {
  text-decoration: none;
}
.link-g-2:link {
  color: black; 
}
.link-g-2:visited {
  color: black; 
}
.link-g-2:hover { 
  color:  black; 
}
.link-g-2:active {
  color: black; 
}

/*sen*/
.sen-siro {
  margin:0;
  padding:0;
  margin-top:10px;
  margin-bottom:10px;
  border:solid 1px white;
}

/* ------------------------------------------- ヘッダーここまで ------------------------------------------  */