/*
Theme Name:
Theme URI: NA
Author: T.Oka
Author URI: NA
Description: NA
Version: 1.0.0
*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&family=BIZ+UDPGothic&family=BIZ+UDPMincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
a:hover {
  opacity: 0.7;
}
.mt-0 {
  margin-top: 0;
}
.mt-8 {
  margin-top: 2.133vw !important;
}
.mr-8 {
  margin-right: 2.133vw !important;
}
.mr-10 {
  margin-right: 2.667vw !important;
}
.mt-16 {
  margin-top: 4.267vw !important;
}
.mb-16 {
  margin-bottom: 4.267vw !important;
}
.mr-16 {
  margin-right: 4.267vw !important;
}
.mt-20 {
  margin-top: 5.333vw !important;
}
.mt-24 {
  margin-top: 6.4vw !important;
}
.mb-24 {
  margin-bottom: 6.4vw !important;
}
.pb-40 {
  padding-bottom: 10.667vw !important;
}
/*-------TOP----------*/
body.top {
  background: #EEF2FA;
  font-family: "FOT-UD角ゴ_ラージ Pr6N M", "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ", sans-serif;
  color: #10101A;
  width: 100vw;
  height: 216.533vw;
  padding :51.467vw 5.33vw;
  margin: 0;
}

h2.top_text {
  font-family: "Poppins";
  font-size: 10.133vw;
  font-weight: 600;
  margin-bottom: 0;
}
h2.top_text span{
  color: #FEBD09;
  margin-left: 4.8vw;
}
.signin {
  margin-top: 21.333vw;
}
.signin h3 {
  font-size: 5.333vw;
  font-weight: 700;
  margin-bottom: 10.667vw;
}

.signin input {
  width: 88vw !important;
  height: 15.467vw;
  font-size: 4.8vw !important;
  padding: 4.267vw;
}
.signin button {
  background: #367BFA;
  border: #367BFA;
  width: 89.333vw;
  height: 16vw;
  border-radius: 13.333vw;
  color: #FFFFFF;
  font-size: 4.8vw;
  cursor: pointer;
  margin-top: 8.533vw;
  font-weight: 700;
}
button#login:hover {
  opacity: 0.7;
}
button#login[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}

.forgot {
  font-size: 4vw;
  color: #363637;
}

.forgot a {
  color: #367BFA;
}

/*-------page-main----------*/
body.main {
  background: #F5F7FA;
  font-family: "FOT-UD角ゴ_ラージ Pr6N M", "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ", sans-serif;
  color: #10101A;
  width: 100vw;
  height: auto;
  margin: 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #FFFFFF;
  width: 100vw;
  height: 13.333vw;
}
.header_area {
  vertical-align: middle;
  padding: 2.933vw 5.333vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
}
.header_area a {
  text-decoration: none;
  vertical-align: middle;
}
h2.maintop_text {
  color: #10101A;
  font-family: "Poppins";
  font-size: 5.333vw;
  font-weight: 600;
  margin-bottom: 0;
}
h2.maintop_text span{
  color: #FEBD09;
  margin-left: 2.667vw;
}
.header__nav {
  position: absolute;
  left: 100vw;
  top: 13.333vw;
  width: 100%;
  height: 100vh;
  background: #EEF2FA;
  transition: ease .4s;
}
.header__nav.active {
  left: 0;
}
.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
.nav-items__item a {
  color: black;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 5.333vw;
  font-weight: 700;
  margin-bottom: 8.533vw;
}
.nav-items__item:last-child a {
  margin-bottom: 0;
}
.header__hamburger {
  width: 6.4vw;
  height: 100%;
}
.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}
.hamburger span {
  width: 100%;
  height: 0.533vw;
  background-color: #000;
  position: relative;
  transition: ease .4s;
  display: block;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  margin: 1.6vw 0;
}
.hamburger span:nth-child(3) {
  top: 0;
}
.hamburger.active span:nth-child(1) {
  top: 1.867vw;
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  top: -2.4vw;
  transform: rotate(-45deg);
}
.block1 {
  padding: 26.133vw 5.333vw 12.8vw 5.333vw;
}
.block1 h2,
.block2 h2,
.block3 h2,
.block4 h2,
.block5 h2,
.block6 h2 {
  font-size: 6.4vw;
  font-weight: 700;
  margin-bottom: 0;
}
.block1 h3 {
  font-size: 5.867vw;
  font-weight: 700;
  margin-bottom: 0;
}

p.welcom {
  font-size: 5.333vw;
  color: #367BFA;
  font-weight: 700;
  margin: 0;
}
p.last_used {
  font-size: 4.267vw;
  margin: 0;
}
.block1 img {
  width: 37.333vw;
  height: 26.667vw;
}
.block2 {
  background: #FFFFFF;
  padding: 8.533vw 5.333vw;
}
.block3,
.block4 {
  padding: 12.8vw 5.333vw 0px 5.333vw;
}
.block5 {
  padding: 26.133vw 0 27.733vw 0;
}
.block6 {
  background: #FFFFFF;
  padding: 8.533vw 5.333vw;
}

.block6 button label a {
  text-decoration: none;
  color: #10101a;
}
.block6 button label a:hover {
  color: #fff;
}
.block6 button label a span {
  color: #367BFA;
}
.block7,
.block8,
.block9 {
  padding-top: 8.533vw;
}
.block7 h2,
.block8 h2,
.block9 h2 {
  font-size: 5.867vw;
}
.continuation_more a {
  font-size: 4.267vw;
  text-decoration: none;
  color: #10101A;
  font-weight: 700;
}
button.continuation_more {
  width: fit-content;
  padding: 2.133vw 6.4vw;
  background: #F5F7FA;
  border-radius: 15.467vw;
  border: 0;
  margin-top: 2.667vw;
}
.continuation_flame {
  overflow: hidden;
  width: 42.133vw;
  height: 23.467vw;
  margin: 0;
}
img.movie_thumbnail {
  width: 42.133vw;
  height: 23.467vw;
  transition: transform .6s ease;
}
img.movie_thumbnail:hover {
  transform: scale(1.1);
}
.block2 h3,
.block5 h3,
.block6 h3 {
  width: 42.133vw;
  height: auto;
  font-size: 3.733vw;
  margin-top: 1.6vw;
  margin-bottom: 4.267vw;
}
.category_list,
.tag_list,
.block5 button {
  background: #FFFFFF;
  width: fit-content;
  height: auto;
  border-radius: 30.4vw;
  border: 0.533vw solid #367BFA;
  margin-bottom: 4.267vw;
}
.category_list a,
.block5 button > label {
  width: 89.333vw;
  padding: 2.667vw 2.667vw;
  display: block;
  margin-bottom: 0;
}
.tag_list.active,
.category_list.active {
	background-color: #367BFA;
}
.tag_list a,
.tag_list label {
  width: 89.333vw;
  padding: 2.667vw 5.333vw;
  display: block;
  margin-bottom: 0;
}


.category_list a,
.tag_list a,
.block5 button label {
  font-size: 4.8vw;
  font-weight: 700;
  text-decoration: none;
  color: #10101A;
}



button.tag_list span {
  color: #367BFA;
  font-size: 4.8vw;
}
.block3 img,
.block5 button img {
  width: 10.667vw;
  height: 10.667vw;
}
/*-------page-----------*/
ol.breadcrumbs {
  list-style: none;
  margin :14px 5.208vw;
  padding: 0;
}
.breadcrumbs li,
.breadcrumbs a {
  color: #A8ACB2;
}
.breadcrumbs li::after{
  content: '/';
  display: inline-block;
  padding: 0 2.667vw;
}
.breadcrumbs li:last-child::after{
  display: none;
}
.block5 input[type="radio"] {
  position: absolute;
  left: -2666.4vw;
}
ol.filters li{
  margin-top: 4.267vw;
  margin-right: 8.533vw;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 13.333vw;
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s;
}
.block5 button:hover {
  background: #367BFA;
}
.block5 button:hover span,
.block5 button:hover label {
  color: #fff;
}
.block5 button:hover img {
  opacity: 0.7;
}
[value="all"]:checked ~ .display_targets [data-category] {
  display: block;
}
[value="blank"]:checked ~ .display_targets .display_target:not([data-category~="blank"]),
[value="beginner"]:checked ~ .display_targets .display_target:not([data-category~="beginner"]),
[value="firsttime"]:checked ~ .display_targets .display_target:not([data-category~="firsttime"]),
[value="5in1"]:checked ~ .display_targets .display_target:not([data-category~="5in1"]),
[value="weight"]:checked ~ .display_targets .display_target:not([data-category~="weight"]),
[value="commentary"]:checked ~ .display_targets .display_target:not([data-category~="commentary"]),
[value="movie1"]:checked ~ .display_targets .display_target:not([data-category~="movie1"]),
[value="movie3"]:checked ~ .display_targets .display_target:not([data-category~="movie3"]) {
  display: none;
}
/*-------page-movie----------*/
img.my_favorite {
  width: 10.667vw;
  height: 10.667vw;
}

img.movie1_thumbnail {
  width: 100vw;
  height: 56.104vw;
}
#v-frame {
  width: 100vw;
  height: auto;
}
h2.movie1_title {
  font-size: 5.333vw;
}
.movie_control {
  vertical-align: middle;
}

.movie_control img{ transition: 200ms linear; }
.movie_control img:hover{ opacity:0.7}

img.square_small {
  width: 10.667vw;
  height: 10.667vw;
}
img.square_big {
  width: 13.333vw;
  height: 13.333vw;
}
.tab_switching {
  display: none;
}
img.movie_menu {
  width: 5.867vw;
  height: 5.867vw;
}
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}
.threesetmovies {
  justify-content: start;
}
.threesetmovie {
  flex: 0 0 33.33333%;
  background: #FFFFFF;
  padding: 2.667vw 0;
}
li.threesetmovie {
  font-size: 4.8vw;
  font-weight: 700;
}
.threesetmovie.active {
  background: #F5F7FA;
  width: 89.333vw;
}
.tab_switching.show {
  display: block;
}
.threesetmovie img {
  width: 34.667vw;
  height: 19.467vw;
}
.training_procedure p {
  color: #367BFA;
  font-size: 4.267vw;
  font-weight: 700;
}
.training_procedure span {
  color: #10101A;
  font-size: 4.267vw;
  margin-left: 2.667vw;
  font-weight: 700;
}
p.border-bottom {
  padding-bottom: 4.533vw;
}


/*-----------------*/
body {
  overflow-x: hidden;
}
body.top {
  padding-top: 4rem;
}

ul.nav-items {
  top: 8.533vw;
  transform: translate(-50%, 0);
}

/*-------tags---------*/
.movie-tags .badge {
  background: #febd09;
  font-size: 2.5vw;
}

.movie-tags {
  margin-bottom: 2.5vw;
}

.movie-tags a {
	text-decoration: none;
	color: #fff;
}

.movie-tags a:hover {
	color: #fff;
}

.block2 h3,
.block6 h3 {
  margin-bottom: 1vw;
}



/*------- play course ---------*/
#course_interval {
	display:none;
}
#course_interval.active {
	position:absolute;left:0;top:0;width:100%;height:100%;
	display:flex;justify-content:center;align-items:center;
	background: rgba(255,255,255,0.2);
}
#course_interval.active span {
	color:#fff;
	font-size: 20vw;
}

section#movie_in_course {
	margin-top: 50px;
}


.table_underline {
    border-bottom: 0.073vw solid #ccc;
}
table.movie_table {
	width: 100%;
}

table.movie_table thead {
	margin-bottom:10px;
}
table.movie_table tbody {
	margin-top: 10px;
}
table.movie_table tr {
	margin-top: 10px;
}
table.movie_table tr.active {
	background-color: #F5F7FA;
}

/* table.movie_table tr {
	border-spacing: 0 10px;
} */
table.movie_table th,
table.movie_table td {
    font-size: 4vw;
    padding-right: .8rem;
}

td.row-interval {
	padding: 20px 0;
}

table.movie_table tbody img {
    width: 13.5vw;
    height: 7.6vw;
}