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


body{
  margin: 0;
  font-family: Verdana, sans-serif;
}

header{
  display: flex;
	padding: 0;
  height: 54px;
  width: 100%;
  z-index: 100000;
}

.sp-header{
  position:fixed;
  top:0;
  left: 0;
  height: 54px;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  z-index:1000;
  border-bottom: solid 1px #ccc;
}

.sp-menu{
	margin-left: auto;
	position:fixed;
	top:2px;
  right: 13px;
	z-index:1000;
}

.sp-menu #open{
  font-size: 32px;
  line-height: 54px;
  cursor: pointer;
}

.sp-menu #open.hide{ /* Javascriptで設定したhide class */
  display: none;
}


main {
	padding: 0 16px;
}

.overlay{
	position:fixed;
	z-index:1000;
  top:0;
  bottom: 0;
  right: 0;
  overflow-y: auto; /* fixed でスクロール */
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  font-size: 14px;
  width: 100%;
  min-width: 160px;
  padding: 12% 4% 12%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
  box-sizing: border-box;
}

.overlay h1 {
  font-size: 11px;
  font-weight: normal;
  position: absolute;
  top:16px;
  left: 16px;
}

.overlay h1 img{
  width: 40px;
  margin-right: 8px;
}

.overlay.show { /* Javascriptで設定したshow class */
  opacity: 1;
  pointer-events: auto;
}

.overlay #close{
  position: absolute;
  top:12px;
  right: 12px;
  font-size: 32px;
  margin: 0;
  cursor: pointer;
}

.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap; 
}

.overlay li {
  margin-top: 18px;
  width: 100%;
  opacity: 0; /* 非掲載にしておく */
  transform: translateY(16px); /* 16px下へ移動させておく */
  transition: opacity .3s, transform .3s; /* 0.3秒で透明度・移動させる */
}

.overlay.show li {
  opacity: 1; /* 非掲載から表示させる */
  transition-delay: .1s;
  transform: none; /* 16px下へ移動させておいたものを解除 */
}

.area::before {
  content: "- ";
}

.area::after {
}

li.navi_link_button {
  margin-left: auto;
  margin-right: auto;
  width: 47%;
  margin-right: 3%;
  margin-bottom: 3%;
  justify-content: space-between;
}

.navi_link_button a:link, .navi_link_button a:visited {
  font-size: 12px;
  width: 100%;
  margin: 0 auto;
  padding: 5% 0;
  display: block;
  border: solid 1px #666;
  text-align: center;
}



.overlay .material-icons{
  font-size: 18px;
  margin-right: 2%;

  display: inline-flex; /* マテリアルアイコン縦位置調整 */
  vertical-align: middle; /* マテリアルアイコン縦位置調整 */
}



ul.sp-menu-sns {
  display: flex;
  width: 60%;
  margin: 5% auto;
}

.sp-menu-sns li {
  justify-content: space-around;
  width: 33%;
  text-align: center;
}

.sp-menu-sns li img {
  width: 50%;
}


ul.sp-menu-app {
  display: flex;
  width: 100%;
  margin: 0;
}

.sp-menu-app li {
  justify-content: space-around;
}

.sp-menu-app li.ios {
  width: 41.5%; /* marigin 込みで 47.5%に設定する */
  padding-top: 2.7%;
  margin-left: 3%;
  margin-right: 3%;
}

.sp-menu-app li.andoroid {
  width: 46.5%; /* marigin 込みで 52.5%に設定する */
  margin-left: 3%;
  margin-right: 3%;
}
.sp-menu-app li.ios img {
  width: 100%;
}

.sp-menu-app li.andoroid img {
  width: 100%;
}


.pc-menu{
  display: none;
}


.text_cap {
  text-transform: capitalize;
}

.text_upp {
  text-transform: uppercase;
}

.text_low {
  text-transform: lowercase;
}