@charset "UTF-8";

/*   common_sp.css   */
/* 【SP版】ヘッダー・フッターのcss */

/* ---------ヘッダー--------- */
header {
  width:100%;
  position: relative;
  background-color:#ffffff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .16);
  position:fixed;
  z-index: 10000;
}

header::before {
  content: "";
  display: block;
  padding-top:14.66%; /* 比率を指定 */
}

header .hd_sp {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: flex;
  justify-content: space-between;
}

.hd_sp_logo {
  width:25%;
  margin:2%;
}

.hd_sp_logo h1 {
  width:auto;
  height:100%;
}

.hd_sp_logo h1 img {
  width:auto;
  height:100%;
  aspect-ratio:500 / 210;
}

/* 電話番号 */
.hd_sp_tel {
  width:auto;
  margin:3vw 0;
  text-align: right;
}

.hd_sp_tel p {
  font-size: 2.67vw;
  text-align: right;
}

.hd_sp_tel div {
  display: flex;
  justify-content: flex-end;
}

.hd_sp_tel div img {
  width:12%;
  height:100%;
  margin-top:0.6vw;
}

.hd_sp_tel div span {
  margin-left:2%;
  font-size: 4.40vw;
  letter-spacing: 0.01rem;
}

/* ハンバーガーメニュー */
/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top:0;
  left: 100%;
  width:77%;
  height: 100%;/*ナビの高さ*/
  background-color:#EBDBEF;
  /*動き*/
  transition: .5s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    left: 23%;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100%;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:clamp(5%, 50vw, 10%);
    left:7%;
    /* top:50%;
    left:50%;
    transform: translate(-50%,-50%); */
}

/*リストのレイアウト設定*/

#g-nav li{
  padding-bottom:0.5rem;
  font-family:serif;
  text-align: left;
  font-size: 5.33vw;
}

#g-nav li:first-child {
    padding-bottom:0.2rem;
}

#g-nav li.sub {
  padding-bottom:0.3rem;
  margin-left:20px;
  font-size: 4.53vw;
}

#g-nav li.pd {
  padding-bottom:0.7rem;
}

#g-nav li a{
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:relative;
    z-index: 9999;/*ボタンを最前面に*/
  margin: 0 3%;
	cursor: pointer;
  width: clamp(50px, 40%, 5%);
  height:100%;
}

/*×に変化*/
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	width: 100%;
  }

.openbtn span:nth-of-type(1) {
	top:35%;
}

.openbtn span:nth-of-type(2) {
	top:50%;
}

.openbtn span:nth-of-type(3) {
	top:65%;

}

.openbtn.active span:nth-of-type(1) {
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  top:50%;

}

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

.openbtn.active span:nth-of-type(3){
  -webkit-transform:rotate(-45deg);
   transform:rotate(-45deg);
   top:50%;
}


 /* ヘッダー裏回り込み回避 */
 .hd_sp_back {
     width:100%;
     margin-top:14.66%;
 }

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

/* ---------フッタ--------- */

footer{
  width:100%;
  background-color: #f6f6f6;
  padding: 8vw 0 2vw;
}

.footer_right_area {
  width:90%;
  margin:0 auto;
  text-align:center;
}

.footer_navi_top {
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5.07vw;
  margin-bottom:6vw;
}

.footer_navi_top li {
}

.footer_navi_top li a {
  font-size:min(3.73vw, 18px);
}

/* ボタン */
.footer_navi_middle {
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:2vmax;
}

.footer_navi_middle li {
  width:45%;
  border:solid 1px #bbbbbb;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:min(3.73vw, 18px);
  height: 13vw;
}

.footer_navi_middle li a {
  display: flex;
  width:100%;
  height:100%;
  text-align: center;
  font-size:min(3.73vw, 18px);
  align-items: center;
  justify-content: center;
}

.footer_copyright_area {
  font-size: min(2.4vw, 18px);
  line-height:2;
  margin:3vmax 0;
}





/* ---------フッターend--------- */