#header2{
  position:relative;
}

/***************/
/* 2024.10.07  */
/***************/
nav {
  background:#000;
}

/*ナビゲーションを横並びに*/
nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  padding:0px;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
  position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
  display: block;
  text-decoration: none;
  color: #fff;
  padding:9px 25px;
  transition:all .3s;
  font-size:16px;
  white-space: nowrap;
}
nav ul li a:link{
  color: #fff;
}

nav ul li a:hover {
  height: auto;
  color: #333;
  background-color: #3cc;
  text-decoration:none;
  -webkit-transition: all .5s;
  transition: all .5s;
  z-index:10;
}

nav ul li a:hover{
  color:#fff;
}

@media screen and (max-width:768px){
nav{
  padding: 0;
}
nav ul{
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
nav ul li a{
  border-bottom:1px solid #ccc;
}
}

/**** ハンバーガーメニューボタン ******/
.hamburger { display:block; position:absolute; z-index:3000; right:5px; top:5px; width:42px; height: 42px; cursor: pointer; text-align: center; }
.hamburger span { display:block; position: absolute; width:25px; height :2px; left :6px; background:#BBBBBB; -webkit-transition: 0.3s ease-in-out; -moz-transition :0.3s ease-in-out; transition :0.3s ease-in-out; }
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 25px; }

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) { top:16px; left: 6px; background :#fff; -webkit-transform: rotate(-45deg); -moz-transform  :rotate(-45deg); transform :rotate(-45deg);}
.hamburger.active span:nth-child(2),.hamburger.active span:nth-child(3) { top: 16px; background :#fff; -webkit-transform: rotate(45deg); -moz-transform  :rotate(45deg); transform :rotate(45deg); }


/* メニュー背景　*/
nav.globalMenuSp {
position: absolute;
z-index:2000;
top :0; left:0;
color: #fff; background: #333;
text-align: center;
width: 100%;
transform: translateY(-100%);
transition: all 0.6s
}

nav.globalMenuSp ul {
margin: 0 auto; padding: 0; width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; transition: .4s all}
nav.globalMenuSp ul li:first-child { background: #000; padding: 1em 0 }
nav.globalMenuSp ul li:last-child { padding-bottom: 0; }
nav.globalMenuSp ul li:hover{ background :#ddd; }
nav.globalMenuSp ul li a { display: block; color: #fff; padding: 1em 0; text-decoration :none; border-style: solid; border-width: 1px; border-color: #222;}
nav.globalMenuSp ul li ul li:first-child { background: unset; padding: 0 }

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
opacity: 100;
display: block;
transform: translateY(0%);
/*
position: fixed;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
*/
-webkit-overflow-scrolling: touch;
}



#head {
width:100%;
height: 70px;
display:block;
background-color: #fff;
text-align:center;
margin:0 auto;
top: 0;
}

@media screen and (max-width: 480px) {
#head{height:0px}
}

.header {
width: 100%;
display:flex;
align-items:center;
justify-content:flex-start;
padding-left: 20px;
box-sizing: border-box;
}


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

/********************************************************/
/* レスポンシブ時上部メニューのスクロール表示・非表示対応 */
/********************************************************/
#header{
  /*fixedで上部固定*/
position: fixed;
height: 50px;
width:100%;
  z-index: 999;/*最前面へ*/
/*以下はレイアウトのためのCSS*/
}

/*　上に上がる動き　*/

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

.header_wrap {width: 100%; margin: 0 auto;}
.header_center{
}
.logo_banner{
  height:70px;
  width:auto;
}
.header_tel {
font-size:2.5rem;
font-weight:500;
color:#3cc;
text-shadow:2px 2px 2px #aaa;
margin-top:-5px;
margin-bottom: 5px;
}
.header_tel--nav {
color: #333;
display:inline-block;
}
@media screen and (max-width: 480px) {

#head{height:0px}
.header{
  width:100vw; height: auto;
}
.header_wrap {width: 100%; margin: 0 auto; height: auto;
  position: fixed;
  z-index: 400;
  background: #fff;
}
.header_center {
  width: 100%;
  justify-content:center;
  background:#fff;
}

.logo_banner{
  height:47px;
  width:auto;
}

}

.headerSpacer{
height: 20px;
}
@media screen and (max-width: 480px) {
.headerSpacer{
  height: 50px;
}
}

.attention{
  margin-top: 2em;
  background-color: #ebebeb;
  padding: 1em 2em;
}

.attention span{
  color:#c0392b;
  font-weight: bold;
}