@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 共通 */
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
.btn_login {
  color: blue;
  font-size: 14px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px 0 45px;
  border: 1px solid blue;
  border-radius: 2px;
  position: relative;
  width: auto;
}
.btn_login:before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  border-radius: 50%;
}

/* ヘッダー */
.header {
}
.header .container {
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 60px;
}
/* バーガー */
.button_burger {
  width: 40px;
  height: 40px;
  background: gray;
}
/* ロゴ */
.area_logo_header {
  margin: 0 0 0 10px;
}
.area_logo_header .logo {
  display: block;
  width: 80px;
  height: 30px;
  background: gray;
}

/* フォーム_ヘッダー */
.form_header {
  margin: 0 auto;
}

/* ナビ_ヘッダー */
.nav_header {
  /* margin: 0 0 0 auto; */
}
.list_nav_header {
  display: flex;
  align-items: center;
}
.list_nav_header a:not(.btn_login) {
  display: block;
  width: 45px;
  height: 45px;
  background: gray;
}
.list_nav_header li + li {
  margin-left: 15px;
}
/* サイドバー */
.sidebar {
  flex: 0 0 240px;
}
.sidebar .box {
  padding: 10px 0;
}
.sidebar .box + .box {
  border-top: 1px solid #ccc;
}

/* サイドバーナビリスト */
.list_nav_sidebar a {
  display: flex;
  align-items: center;
  height: 40px;
  position: relative;
  padding: 0 0 0 80px;
}
.list_nav_sidebar a:before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: gray;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
}
/* サイドバーログイン */
.area_register_sidebar {
  padding: 10px 30px;
}
.area_register_sidebar .description {
  font-size: 14px;
  line-height: 1.5em;
}
.area_register_sidebar .wrap_btn {
  margin-top: 10px;
}

.main {
  background-color: #f5f5f5;
  flex: 1 0 auto;
  min-width: 10px;
  padding: 24px;
}
.main .box {
  padding: 30px 8px;
}
.main .box + .box {
  border-top: 3px solid #ccc;
}
.main .box > .ttl {
  font-size: 24px;
}
/* ビデオリスト */
.list_video {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}
.list_video > li {
  padding: 8px;
  width: 25%;
}
.list_video .thumb {
  width: 100%;
  background: gray;
}
.list_video .thumb:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
/* レイアウト */
.list_video .layout {
  display: flex;
  margin: 10px 0 0;
}
/* アイキャッチ */
.list_video .eye {
  flex: 0 0 40px;
  margin: 0 10px 0 0;
}
.list_vide .img {
  width: 100%;
}
.list_video .img:before {
  content: "";
  width: 100%;
  display: block;
  padding-top: 100%;
  background: gray;
  border-radius: 50%;
}
/* テキスト */
.list_video .text {
  flex: 1 1 auto;
}
.list_video .ttl {
  font-size: 13px;
}
.list_video .user {
  font-size: 12px;
}
.list_video .count {
  font-size: 12px;
}

/* ページのレイアウト */
.layout_page {
  display: flex;
}