@charset "UTF-8";

/* ----------------------------- ナビゲーション ----------------------------- */
#g-nav {
}

/* PCメニュー・表示ワイドサイズ*/
@media (min-width: 800px) {

/* スマホメニュー非表示 */
#header_sf_menu, #header_sf_menu2 {
display: none;
}

/* 1階層目 */
#header_pc_menu {
}
#header_pc_menu ul {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
#header_pc_menu ul li {
  height: 40px;
  font-size: var(--fn);
  position: relative;
}
#header_pc_menu ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  height: 100%;
  color: var(--bcg6);
  background-color: #fff;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  z-index: 100;
  transition: color 0.2s ease;
}
#header_pc_menu ul li a::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--5cc);
  z-index: -1;
  transition: top 0.2s ease;
}
#header_pc_menu ul li a:hover::before {
  top: 0;
}
#header_pc_menu ul li a:hover {
  color: #fff;
}
#header_pc_menu ul li.current-menu-item a {
  background-color: var(--5cc);
  color: #fff;
}


/* ▼ 2階層目 メガメニューAタイプ megamenu-a 対応 */
/* wordpress メニュー設定内の親メニューのクラスに megamenu-a 付与 */
#header_pc_menu .megamenu-a {
  position: relative;
}

#header_pc_menu .megamenu-space {
  position: absolute;
  top: 100%;
  padding-top: 10px;
  z-index: 9;
  pointer-events: none;
  box-sizing: border-box;
}

#header_pc_menu .megamenu-a .megamenu-a.is-hover .megamenu-space {
  pointer-events: auto;
}

#header_pc_menu .megamenu-a .megamenu-wrap {
  position: relative;
  top: 0;
  right: 0;
  width: fit-content;
  max-width: 90vw;
  background: var(--5cc);
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
  z-index: 10;
  box-sizing: border-box;
}

#header_pc_menu .megamenu-a.is-hover .megamenu-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0s;
}

/* はみ出し対応 */
#header_pc_menu .megamenu-wrap.align-right {
  right: 35px;
  left: auto;
}

#header_pc_menu .megamenu-wrap.align-left {
  left: 0;
  right: auto;
}


/* ▼ shelf：中身の配置 */
#header_pc_menu .megamenu-a .megamenu-space .megamenu-wrap .shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  justify-content: flex-start;
}

/* ▼ ul.sub-menu：初期スタイルリセット */
#header_pc_menu .megamenu-a .megamenu-space .megamenu-wrap .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: contents;
}

/* ▼ 項目ごとの調整 */
#header_pc_menu .megamenu-a .megamenu-space .megamenu-wrap .sub-menu li {
  display: inline-block;
  white-space: nowrap; /* 折り返さず横幅を広げる */
  letter-spacing: .1em;
  width: auto;
  min-width: 120px;
  height: 30px;
  border-radius: 4px;
  background-color: #fff;
}

#header_pc_menu .megamenu-a .megamenu-space .megamenu-wrap .sub-menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  text-align: center;
  color: var(--bcg6);
  text-decoration: none;
  font-weight: 500;
  background: transparent;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
    position: relative; /* ← ★必須：::beforeと重ねるため */
  z-index: 1;          /* ← ★必須：テキストや画像を上に */
  overflow: hidden;    /* ← ★必須：::beforeはみ出し防止 */
}
#header_pc_menu .megamenu-a .megamenu-space .megamenu-wrap .sub-menu li a:hover {
  color: #fff;
}

#header_pc_menu .megamenu-a .megamenu-wrap .sub-menu li a::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--5cc); /* ← ★2階層目のホバー色 */
  z-index: -1;
  transition: top 0.2s ease;
}

/* hoverで上から下に色が降りてくる */
#header_pc_menu .megamenu-a .megamenu-wrap .sub-menu li a:hover::before {
  top: 0;
}




/* ▼ 2階層目 メガメニューBタイプ megamenu-b 対応 */
/* wordpress メニュー設定内の親メニューのクラスに megamenu-b 付与 */
/* ▼ megamenu-b 親設定 */
#header_pc_menu .megamenu-b {
  position: relative;
}

/* ▼ megamenu-b 表示領域 */
#header_pc_menu .megamenu-b .megamenu-space {
  position: absolute;
  top: 100%;
  right: -120px;
  padding-top: 10px;
  z-index: 9;
  pointer-events: none;
  box-sizing: border-box;
}

/* ▼ hover時に表示 */
#header_pc_menu .megamenu-b.is-hover .megamenu-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0s;
}

/* ▼ メニュー全体の外枠 */
#header_pc_menu .megamenu-b .megamenu-wrap {
  position: relative;
  top: 0;
  right: 0;
  width: fit-content;
  max-width: 90vw;
  height: auto;
  background: var(--5cc);
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
  z-index: 10;
  box-sizing: border-box;
}

/* ▼ 表示時 */
#header_pc_menu .megamenu-b.is-hover .megamenu-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ▼ megamenu-b：中身のレイアウトを grid に（ホバーはそのまま） */
#header_pc_menu .megamenu-b .megamenu-wrap .shelf{
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)); /* PCは4カラム */
  gap: 15px 15px;   /* 行・列の余白 */
}

/* 各アイテム（cell内の縦積みは従来通り） */
#header_pc_menu .megamenu-b .sub-menu{
  all: unset;   /* 初期リセット */
  display: contents;  /* gridの子要素として li をそのまま並べる */
}
#header_pc_menu .megamenu-b .sub-menu li{
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* a, 画像、ラベルのスタイル＆ホバーはそのまま（再掲しておく） */
#header_pc_menu .megamenu-b .sub-menu li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: .1rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 10px 0;
	background-color: #fff; /*これがないと親メニュー current-menu-item の影響を受ける*/
}
#header_pc_menu .megamenu-b .sub-menu li a::before{
  content:'';
  position:absolute;
  top:-100%;
  left:0;
  width:100%;
  height:100%;
  background-color: var(--3cc10); /* ホバー色 */
  z-index:-1;
  transition: top .2s ease;
}
#header_pc_menu .megamenu-b .sub-menu li a:hover::before{ top:0; }
#header_pc_menu .megamenu-b .sub-menu li a:hover{ color:#fff; }

#header_pc_menu .megamenu-b .sub-menu li img{
  width: 120px;         /* ここは後のブレークポイントで可変にする */
  height: auto;
  display: block;
  margin-bottom: 8px;
  transition: transform .5s ease;
}
#header_pc_menu .megamenu-b .sub-menu li a:hover img{ transform: scale(1.2); }

#header_pc_menu .megamenu-b .sub-menu li .menu-label{
  color: var(--bcg6);
  font-size: 16px;
  line-height: 1.4;
}
#header_pc_menu .megamenu-b .sub-menu li a:hover .menu-label{
	color: var(--5cc);
	font-weight: 700;
}

/* ---- ブレークポイント：幅が狭くなった時に列数を落とす ---- */
/* 3カラム */
@media (max-width: 999px){
  #header_pc_menu .megamenu-b .megamenu-wrap .shelf{
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}



/*========= PC 見出しメニュー ===============*/
#header_pc_menu2 {
position: absolute;
top: 20px;
right: 25px;
}

#header_pc_menu2 ul {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
}

#header_pc_menu2 ul li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fn);
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: .1rem;
}

#header_pc_menu2 ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 40px; /* 高さを揃える */
  padding: 10px 15px;
  color: var(--5cc);
  border: solid 1px var(--5cc);
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-decoration: none;
}
#header_pc_menu2 ul li.menu-tel a {
  display: inline-flex;       /* 横並びにする */
  flex-direction: row;
  align-items: baseline;      /* 下揃え */
  border: none;
  font-size: 1.6rem;
  padding: 8px 0 0 0;
  transition: all 0.3s ease;
  white-space: nowrap;       /* 改行を防ぐ */
}
#header_pc_menu2 ul li.menu-tel a .tel {
font-size: 1.0rem;
}

/* アイコンを表示させる場合 */
#header_pc_menu2 ul li a i {
  font-size: var(--f3);
  margin-right: 5px;
}

.menu-item_label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.4;
}

.menu-item_description {
  font-size: 0.75em;
  line-height: 1.2;
  margin-top: 4px;
}

#header_pc_menu2 ul li a:hover {
  color: #FFF;
  background-color: var(--5cc);
}
#header_pc_menu2 ul li.menu-tel a:hover {
  background-color: #fff; /* 明示的に元と同じ白を指定 */
  color: inherit;         /* 色の変化も防ぐ */
}

}/* min-width: 800px */


/* ▼950px以上：テキストのみ（アイコン隠す） */
@media (min-width: 950px) {
  #header_pc_menu2 ul li a::before {
    display: none;
  }
}

/* ▼949px以下：アイコンのみ（テキスト隠す） */
@media (max-width: 949px) {
  #header_pc_menu2 ul li.menu-reserve a,
  #header_pc_menu2 ul li.menu-access a {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 4px;
    justify-content: center;
    font-size: 0;   /* テキスト消す */
  }

  /* アイコン表示（Font Awesome） */
  #header_pc_menu2 ul li.menu-reserve a::before {
    content: "\f073"; /* calendar */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--5cc);
  }
  #header_pc_menu2 ul li.menu-access a::before {
    content: "\f3c5"; /* map-marker */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--5cc);
  }
	#header_pc_menu2 ul li.menu-reserve:hover a::before,
#header_pc_menu2 ul li.menu-access:hover a::before {
	color: #fff;
}
}

/* ================================================== */



/*========= SFメニュー（ハンバーガーメニュー ）・切り替えワイドサイズ ===============*/
/* ================================================== */
@media (max-width: 799px) {
/* PCメニュー非表示 */
#header_pc_menu, #header_pc_menu2 {
display: none;
}

/* スマホナビ全体の設定 */
#burger-menu {
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position:fixed;
z-index: 980;
/*ナビのスタート位置と形状*/
top:0;
right: -100%;
width:70%;
height: 100vh;
overflow: scroll;
background: var(--3cch);
transition: all 0.3s ease;
}
/*トグルメニュークリック→ js で panelactive がついたら位置を0に（右からスライド）*/
#burger-menu.panelactive {
right: 0;
}

#header_sf_menu {
}
#header_sf_menu2 {
padding: 40px 15px 0 15px;
}
#header_sf_menu2 ul {
display: flex;
flex-direction: column;
align-items: center;
}
#header_sf_menu2 ul li {
flex: 0 0 100%;
width: 100%;
border: solid 3px var(--3cc);
background-color: #fff;
padding: 10px 12px;
border-radius: 20px;
margin-bottom: 10px;
}
#header_sf_menu2 ul li a {
display: inline-block;
color: var(--5cc);
font-size: 1.2em;
	letter-spacing: .1em;
width: 100%;
height: 100%;
}
#header_sf_menu2 ul li a i {
padding: 0 5px 0 0;
}
/* 最初の ul 位置等 */
.sf-menu {
position: relative;
border-top: solid 2px var(--3cc70);
margin-top: 59px;
}
.sf-menu2 {
position: relative;
}
.sf-menu2 li a {
color: #fff;
}
/*下の階層のulや + の基点にするためliにrelativeを指定*/
#header_sf_menu ul li{
position: relative;
border-bottom: solid 1px var(--3cc70);
}
/*ナビゲーションのリンク設定*/
#header_sf_menu ul li a{
display: block;
	font-size: 1.2em;
	letter-spacing: .1em;
text-decoration: none;
color: #fff;
padding:20px 35px 20px 25px;
transition:all .3s;
}
#header_sf_menu ul li a:hover {
color:#fff;
background-color: var(--3cc);
}
#header_sf_menu ul li li a {
}


/* 親メニューのスタイル */
.menu-item-has-children {
    position: relative;
}

/* トグルボタンを `li` に固定する */
.menu-item-has-children .toggle-button {
    position: absolute;
    right: 25px; /* 右端に配置 */
    top: 15px; /* 高さを固定（必要に応じて調整） */
    width: 30px;
    height: 30px;
    background: none;
    cursor: pointer;
    z-index: 10; /* 確実に前面でクリックできるように */
}

/* `+` 記号の横棒 */
.menu-item-has-children .toggle-button::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* `+` 記号の縦棒 */
.menu-item-has-children .toggle-button::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 15px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 開閉時に `-` 記号（横棒のみ） */
.menu-item-has-children.sub_active .toggle-button::before {
    display: none;
}


/* `<a>` のクリック領域を制限せず、100% 使えるように */
.menu-item-has-children > a {
    display: inline-block;
    width: calc(100% - 40px);
}

/* サブメニューの表示・非表示制御 */
.menu-item-has-children ul {
    display: none;
}

.menu-item-has-children.sub_active ul {
    display: block;
}

  /* バーガー内トグルボタンの既定装飾を消す */
  #burger-menu #header_sf_menu .menu-item-has-children > .toggle-button {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 14px;
    width: 30px;
    height: 30px;
  }

  /* フォーカスが当たったときは白い枠でわかるようにする */
  #burger-menu #header_sf_menu .menu-item-has-children > .toggle-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
	

/*-------------------- 2・3階層目の共通設定 --------------------*/
/* 下の階層を持っているulの指定 */
#header_sf_menu li.menu-item-has-children ul{
/*絶対配置で位置を指定*/
position: absolute;
left:0;
top:60px;
z-index: 4;
/*形状を指定*/
background-color: var(--3cch2); /* 2階層目の背景 */
width:180px;
/*はじめは非表示*/
visibility: hidden;
opacity: 0;
/*アニメーション設定*/
transition: all .3s;
}
/*hoverしたら表示*/
#header_sf_menu li.menu-item-has-children:hover > ul,
#header_sf_menu li.menu-item-has-children ul li:hover > ul,
#header_sf_menu li.menu-item-has-children:active > ul,
#header_sf_menu li.menu-item-has-children ul li:active > ul{
visibility: visible;
opacity: 1;
}

/* 2階層目 li の形状*/
#header_sf_menu li.menu-item-has-children ul li a{
color: #fff;
	padding-left: 50px;
}
#header_sf_menu li.menu-item-has-children ul li:last-child > a{
border-bottom:none;
}
#header_sf_menu li.menu-item-has-children ul li a:hover,
#header_sf_menu li.menu-item-has-children ul li a:active{
background-color: var(--3cc);
}

/* 3階層目の位置 参考*/
#header_sf_menu li.menu-item-has-children ul ul{
top:0;
left:182px;
background:#66ADF5;
}
#header_sf_menu li.menu-item-has-children ul ul li a:hover,
#header_sf_menu li.menu-item-has-children ul ul li a:active{
background:#448ED3;
}

/* アコーディオンメニュー */
#header_sf_menu li.menu-item-has-children ul,
#header_sf_menu li.menu-item-has-children ul ul{
position: relative;
left:0;
top:0;
width:100%;
border-top: solid 1px var(--3cc70);
visibility:visible;/*JSで制御するため一旦表示*/
opacity:1;/*JSで制御するため一旦表示*/
display: none;/*JSのslidetoggleで表示させるため非表示に*/
transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}


/*========= トグルボタンのCSS ===============*/
.openbtn1{
position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:5px;
right: 10px;
cursor: pointer;
width: 50px;
height:50px;
}
.openbtn1 span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #666;
width: 45%;
}
.openbtn1 span:nth-of-type(1) {
  top:15px; 
}
.openbtn1 span:nth-of-type(2) {
  top:23px;
}
.openbtn1 span:nth-of-type(3) {
  top:31px;
}

/*×に変化*/  
.openbtn1.active span {
background-color: #FFFFFF;
}
.openbtn1.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 50%;
}
.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 50%;
}
}/* max-width: 779px */
/* ================================================== */



/* ================================================== */
/* フッターメニュー =================================== */

.footer_main-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: auto;
margin: 0 auto;
padding: 30px 0 30px 0;
}
.footer_main-menu .f-menu {
flex: 0 0 25%;
padding: 0;
margin: 0;
list-style: none;
}
.footer_main-menu .f-menu ul {
list-style: none;
}

@media (min-width: 1000px) {
.footer_main-menu {
justify-content:center;
}
.footer_main-menu .f-menu {
max-width: 240px;
}
}/* min-width: 1000px */

@media (max-width: 679px) {
.footer_body .fb_wide2 {
    padding: 0;
}
}/* max-width: 679px */ 

@media (max-width: 550px){
/* スマホフッターメニュー2列並びの位置調整*/
.footer_body .fb_wide2 {
padding: 0 0 0 30px;
}
.footer_main-menu {
justify-content: flex-start;
padding-left: 6%;
}
.footer_main-menu .f-menu {
flex: 0 0 50%;
max-width: 240px;
}
}/* max-width: 550px */ 

.footer_main-menu .f-menu .lead-menu a {
color: var(--4cc);
font-size: 1em;
font-weight: 700;
left: -0.3em;
}
.footer_main-menu .f-menu li {
padding: 0 10px 15px 0px;
margin-bottom: 6px;
}
.footer_main-menu .f-menu li a {
color: var(--cg02);
font-size: 1em;
font-weight: 500;
padding: 5px 10px;
border-radius: 6px;
transition: all 0.3s ease;
}
.footer_main-menu .f-menu li a:hover {
color: #fff;
background-color: var(--2cc);
transition: 0.3s ease;
}

.footer_main-menu .f-menu li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}



/*=============== ページトップ ===============*/
#pagetop{
  position: absolute;
  z-index: 950;
}

#pagetop_button{
  position: fixed;
  right: 4%;
  bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--cc);
  border-radius: 10px;
  width: 65px;
  height: 65px;
  /* アイコンのズレ要因を排除 */
  line-height: 0;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

#pagetop_button:hover{
  background-color: var(--2cc);
}

#pagetop_button a{
  color: #fff;
  position: relative;          /* 擬似要素の基準 */
  display: flex;               /* 中央寄せ */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1;              /* フォントアイコンの基準を1に */
}

/* ダッシュアイコン（矢印） */
#pagetop_button .dashicons{
  font-size: 30px;             /* 見た目サイズ */
  line-height: 1;              /* 垂直中央の安定化 */
  transform: scale(1.0);
  transition: transform 0.3s ease;
  /* margin-top はズレ要因になるので使わない */
}

#pagetop_button:hover .dashicons{
  transform: scale(1.2) translateY(-10px); /* ちょっと大きく＋4px上に移動 */
}

/* 縦線アニメーション（通常は非表示、高さ0） */
#pagetop_button a::after{
  content: "";
  position: absolute;
  /* 矢印の先端あたりからスタートさせる */
  top: 31px;   /* ←ここを微調整：矢印先端の位置に合わせる */
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 0;          /* 初期は非表示 */
  background: #fff;
  transition: height 0.4s ease;
  pointer-events: none;
}

#pagetop_button:hover a::after{
  height: 40%;        /* 下にだけ伸びる */
}


@media (max-width: 779px) {
#pagetop_button {
width: 50px;
height: 50px;
line-height: 50px;
}
#pagetop_button .dashicons-arrow-up-alt2 {
transform: scale(1.2);
}
#pagetop_button:hover .dashicons-arrow-up-alt2 {
transform: scale(1.6);
}
}/* max-width: 779px */ 

@media (max-width: 550px) {
#pagetop_button {
bottom: 55px;
}
}

/*=============== スマートフォンボタン ===============*/
@media (min-width: 551px) {
#sp-buttom {
display: none;
}
}/* min-width: 551px */ 

@media (max-width: 550px) {
#sp-buttom {
position: relative;
width: 100%;
}
#smartphone-menu01 {
position: fixed;
z-index: 1000;
bottom: 0;
width: 100%;
background-color: #fff;
/*はじめは非表示*/
opacity: 0;
transform: translateY(100px);
}
#menu-smartphone {
box-sizing: border-box;
list-style: none;
display: flex;
width: 100%;
height: 50px;
border-top: solid 1px var(--cc30);
border-bottom: solid 1px var(--cc30);
box-shadow: 0px -1px 3px rgba(0,0,0,0.10);
}
#menu-smartphone li {
flex: 0 0 33.3%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-right: solid 1px var(--cc30);
}
#menu-smartphone li:last-child {
border-right: none;
}
#menu-smartphone li a {
box-sizing: border-box;
display:flex;
flex-flow: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--cc);
padding: 8px 0 0 0;
color: #fff;
font-size: 0.8em;
}
#menu-smartphone li a .button-text{
display: none;
}
#menu-smartphone li a:hover {
background-color: var(--cch);
}
#menu-smartphone li a i {
font-size: 240%;
padding-bottom: 6px;
}
}/* max-width: 550px */ 

/*　上に上がる動き　*/
#smartphone-menu01.SpUpMove{
  animation: SpUpAnime 0.3s forwards;
}
@keyframes SpUpAnime{
  from {
    opacity: 0;
  transform: translateY(50px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#smartphone-menu01.SpDownMove{
  animation: SpDownAnime 0.3s forwards;
}
@keyframes SpDownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(50px);
  }
}