@charset "UTF-8";

/* ヘッダー
================================================ */
.header {
  position: fixed;/* 固定　常時表示 スクロール追従しない */
  top: 0;/* 絶対位置指定 */
  left: 0;/* 絶対位置指定 */
  right: 0;/* 絶対位置指定 */
  height: 60px;
  z-index: 11;
}

/* header-topここから
------------------------------- */
.header-top {
  /* max-width: 1200px;　最大ワイド幅1200pxに設定 */
  /* margin-left: auto;　ブラウザの幅から要素の幅を引いた値を、左右均等に分配して余白を設ける */
  /* margin-right: auto;　ブラウザの幅から要素の幅を引いた値を、左右均等に分配して余白を設ける */
  padding-top: 15px;/* 余白を設定 */
  padding-left: 15px;/* 余白を設定 */
  padding-right: 15px;/* 余白を設定 */
  display: flex;/* フレキシブルボックスに【子要素を横並び】 */
  justify-content: space-between;/* アイテムを両端から均等に配置 */
  /*align-items: center;/* 子要素の軸とクロスする方向の配置を、中央揃え */
}

/* header-logo */
.header-logo {
  display: block;/* 初期値に戻す */
  width: 150px;/* 要素の幅サイズ指定 */
  margin-bottom: 0;
}

/* main-navここから --- */
ul.nav-list {
  right: 10px;
}
ul.nav-list li {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding: 0.5em;
}
ul.nav-list li a {
  color: var(--kuro);
  text-decoration: none;
}
ul.nav-list img {
  display: block;
  width: 20px;
}
ul.nav-list-sub {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}
ul.nav-list-sub li {
  width: 100%;
  padding: 0.2em 0.5em;
}
ul.nav-list li:hover>ul.nav-list-sub {
  display: block;
}

/* width　600px 以下の設定 */
@media screen and (max-width: 600px) {
  .nav-list {
    position: fixed;
    display: none;/* main-nav非表示 */
  }
}
/* main-navここまで --- */

/* ハンバーガーメニューここから
------------------------------- */

/* 開閉ボタンここから --- */
.btn-menu {
  position: fixed;
  /* left: 50%;
  bottom: 0; */
  right: 8px;
  bottom: 90px;/* 絶対位置指定 */
  /* transform: translateX(-50%); */
  z-index: 15;
  font-size: 1.2em;
  letter-spacing: 0.1em;
  line-height: 1.2em;
  color: var(--kuro);
  text-shadow: 1px 1px 5px var(--shiro);
  padding: 0 0 6px;
  /*background-color: var(--kuro);
  border: 1px solid var(--kuro);;
  /* border-radius: 50%; */
  height: 20px;
  width: 50px;
  transition: .1s;
  transform-origin: right bottom;
  transform: rotate(-90deg);
}

/* .btn-menu svg {
  fill: var(--kuro);
  margin-top: .25rem;
  height: 2rem;
  width: 2rem;
} */

/* 閉じるボタンここから */
/* #menu-close {
  border: 1px solid var(--shiro);
} */

/* #menu-close svg {
  fill: var(--shiro);
} */
/* 閉じるボタンここまで */

/* 開閉ボタンここまで --- */

/* menu-panelここから --- */
#menu-panel {
  position: fixed;/*位置固定*/
  bottom: 0;
  z-index: 15;
  padding: 2rem 2rem 2rem;
  width: 100vw;
  height: 380px;
  background-color: var(--shiro);
  box-shadow: 0 0 2rem var(--kuro);
  translate: 110vw;/*メニューパネルが画面外*/
}
.menu-list {
  list-style: none;
  color: var(--kuro);
}
.menu-list li {
  margin: 0.5rem 0;
  text-align: center;
  opacity: 0;
}
.menu-list a {
  color: var(--kuro);
  text-decoration: none;
  font-size: 2rem;
}
/* menu-panelここまで --- */

/* width　601px 以上の設定 */
@media screen and (min-width: 601px) {
  #menu-open {
    display: none;/* ハンバーガーメニュー非表示 */
  }
}
/* ハンバーガーメニューここまで
------------------------------- */

/* pagetopここから
------------------------------- */
.pagetop {
  cursor: pointer;
  position: fixed;
  right: -2px;
  bottom: 0;/* 絶対位置指定 */
  font-size: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: .3s;
  color: var(--kuro);
  
/*   デフォルトは非表示 */
  opacity: 0;

  /*縦書き*/
-webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.pagetop:hover {
    box-shadow: 0 0 10px var(--shiro);
}
/* pagetopここまで
------------------------------- */

/* copyrightsここから
------------------------------- */
.copyrights {
  position: fixed;/* 固定　常時表示 スクロール追従しない */
  left: 1px;/* 絶対位置指定 */
  top: calc(50svh - 337px / 2);/* 絶対位置指定 */
  color: var(--kuro);/* 文字色 */
  font-size: 1rem;/* 文字サイズ */
  text-decoration: none;/* none=装飾解除 */
  letter-spacing: 0.1em;/* 文字間隔(em=親要素に指定したサイズ基準) */
/*縦書き*/
  transform: rotate(90deg);
  transform-origin: left bottom;
/*改行禁止*/
  white-space: nowrap;
}
/* copyrightsここまで
------------------------------- */

/* ヘッダーここまで
================================================ */