@charset "UTF-8";

/* =================================================
   Config
================================================= */
:root {
  --nav-width: 200px;
}

/* =================================================
   Slideshow (nav container only)
   ※ 下層ページでは「スライドショー」ではなく
      ナビゲーションコンテナとして使用
================================================= */
.slideshow {
  position: relative;
  font-family: Verdana, Geneva, sans-serif;
}

/* =================================================
   Navigation
================================================= */
.slideshow .nav {
  width: var(--nav-width);
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* ==============================
   Navigation items（通常）
============================== */
.slideshow .nav li a {
  display: block;
  height: 49px;
  line-height: 49px;
  padding-left: 34px;
  width: 100%;
  text-decoration: none;
  color: #40220F;
  font-size: 14px;
  background-image: url("../images/flashtext-bg.jpg");
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-shadow: 0 0 4px #fff;
  transform: translateX(0);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-image 0.2s ease,
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width;
}

/* ==============================
   Hover / Active
============================== */
.slideshow .nav li:hover a,
.slideshow .nav li.is-active a {
  width: calc(100% + 35px);   /* active 時のみ拡張 */
  transform: translateX(-35px);
  background-image: url("../images/flash-on.png");
  border-bottom: none;
}
/* =================================================
   Optional variants
================================================= */
.slideshow .nav li.en a {
  font-size: 13px;
}

.slideshow .nav li.long a {
  height: 39px;
  line-height: 1.3em;
  padding-top: 10px;
  font-size: 12px;
}