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



.body {
	position: relative;
}


/* =====================================================
   header

===================================================== */
#top-head {
  position: relative;
  width: 100%;
  z-index: 999;
}

#nav-toggle {
  display: none; /* PCでは非表示 */
}

#global-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

#global-nav ul li a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #333;
}
#mobile-head {
	background-color: #1e4676;
	color: #fff;
	
}
.mobile-head__inner {
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: space-between; /* 左右に分散配置 */
  gap: 15px; /* 要素同士の間隔 */
		padding: 10px 20px;
}
.mobile-head__inner .mobile-head__actions ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.mobile-head__inner .mobile-head__actions ul li {
  width: 49%;
	max-width: 240px;
	list-style: none;
}
.mobile-head__inner .mobile-head__actions ul li img {
  width: 100%; height: auto;
}

.mobile-head__inner .mobile-head__info ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.mobile-head__inner .mobile-head__info li {
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0 1em;
	border-right: solid 1px #fff;
	list-style: none;
}
.mobile-head__inner .mobile-head__info li:last-of-type {
	border-right: none;
}
.mobile-head__inner .mobile-head__info ul li img {
  width: 20px; height: auto;
	margin-right: 10px;
}

@media screen and (max-width: 900px) {
	.mobile-head__inner .mobile-head__info li {
	}
}

@media screen and (max-width: 768px) {
	.mobile-head__inner {
		padding: 0;
		width: 90%;
		gap: 15px;
	}	
	.mobile-head__inner .mobile-head__info li {
		display: flex;
		margin: 1px 0;
		padding: 0 1em 0 0;
		border-right: none;
		font-size: .8em;
	}
	.mobile-head__inner .mobile-head__info {
		width: 65%;
	}
	.mobile-head__inner .mobile-head__actions {
		width: 34%;
	}	
	.mobile-head__inner .mobile-head__info ul li img {
	  width: 15px; height: auto;
	}	
	.mobile-head__inner .mobile-head__actions ul li {
	  width: 100%;
		margin: 2.5px 0;
	}	
}
@media screen and (max-width: 640px) {
.mobile-head__inner .mobile-head__info ul li {
	  width: 100%;
	}		
}


/* --- スマホ向けスタイル（768px以下） --- */
@media screen and (max-width: 768px) {
  #mobile-head {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    z-index: 1000;
  }

  /* ハンバーガーボタン設置 */
  #nav-toggle {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10001;
	  border: solid 1px #fff;
  }

  #nav-toggle span {
    display: block;
    position: absolute;
    height: 3px;
    width: 80%;
    background: #fff;
    left: 10%;
    transition: 0.35s ease-in-out;
  }

  #nav-toggle span:nth-child(1) { top: 5px; }
  #nav-toggle span:nth-child(2) { top: 12px; }
  #nav-toggle span:nth-child(3) { top: 19px; }

  /* メニューの初期状態（画面上に隠す） */
  #global-nav {
    position: absolute;
	left: -100vw;
    width: 100%;
    background: #1e4676;
    transition: 0.5s ease-in-out;
    z-index: 9999;
  }

  #global-nav ul {
    display: block;
	  margin-left: 10%;
  }

  #global-nav ul li a {
    color: #fff;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }

  /* 開閉時のアニメーション設定 */
  .open #nav-toggle span:nth-child(1) {
    top: 13px;
    transform: rotate(45deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 13px;
    transform: rotate(-45deg);
  }

  /* .open クラスがついたらメニューを下にスライド表示 */
  .open #global-nav {
	left: -10%; /* global-navを画面に出す */
	top: 0;
	position: fixed;
	height: 100vh;
  }
}


/* =====================================================
   共通

===================================================== */
.sp { display: none;} 
.pc { display: block; }
@media screen and (max-width: 640px){
	.sp { display: block;} 
	.pc { display: none; }	
}

/* =====================================================
   トップ
   fv
===================================================== */
.fv img {
	width: 100%; height: auto;
}