@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*
* css precss ver1.0
* Written by Variety Article Factory
******************************************vaf*/
/*
* 引数
**************************************/
:root {
  --inner_width: 1064px; /* padding in */
  --fontfamily_def: Roboto,'Noto Sans JP',"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --fontfamily_mincho: "Hiragino Mincho Pro","Yu Mincho","MS Mincho",sans-serif;
  --lineheight_def: 1.5;
  --lineheight_mid: 1.9;
  --lineheight_hi: 2.5;
  --header_height: 70px;
  --header_height_logo: 24px;
  
  --animate_spead: 0.3s;
  --img_maxsize: 940px;
  
  --sp_lineheight_def: 1.5;
  --sp_lineheight_mid: 1.7;
  --sp_lineheight_hi: 2.0;
  --sp_header_height: 42px;
  --sp_header_height_logo: 18px;
  
  --color_def: #000000;
  --color_link: #000000;
  --color_white: #ffffff;
  --color_black: #000000;
  --color_blue: #0000aa;
  --color_red: #aa0000;
  --color_header_bg_def: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  --color_footer_bg_def: linear-gradient(90deg, #eeeeee 0%, #eeeeee 100%);
  --color_kv_bg_def: linear-gradient(90deg, #ff9999 0%, #ffeeee 100%);
  --color_kv_text_def: #ffffff;;
  --color_recruit_bg_def: linear-gradient(90deg, #99ff99 0%, #eeffee 100%);
  --color_mainpoint_def: #999999;
  --color_btn_text_def: #ffffff;
}

/*
* font-size
**************************************/
/*
font-size: 10px = 0.625rem
font-size: 11px = 0.6875rem
font-size: 12px = 0.75rem
font-size: 14px = 0.875rem
font-size: 18px = 1.125rem
font-size: 20px = 1.25rem
font-size: 21px = 1.3125rem
font-size: 22px = 1.375rem
font-size: 24px = 1.5rem
font-size: 26px = 1.625rem
font-size: 28px = 1.75rem
font-size: 30px = 1.875rem
font-size: 32px = 2rem
*/


/*
* keyframes
**************************************/
@keyframes --key_hoveranimasion {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}


/*
* 共通要素（base）
**************************************/
body{
  font-family: var(--fontfamily_def);
  color: var(--color_def);
  font-size: var(--fontsize_def);
  line-height: var(--lineheight_def);
}
a {
  color: var(--color_link);
  text-decoration: none;
  
  &:hover {
    color: var(--color_link);
    text-decoration: underline;
    
    & img {
      opacity: 0.7;
      animation-name: --key_hoveranimasion;
      animation-duration: 0.2s;
    }
  }
}
ul,ol {
  list-style: none;
}
img {
  aspect-radio: 16 / 9;
  max-width: 100%;
}

button {
  font-family: var(--fontfamily_def);
}
input:focus, textarea:focus, select:focus { outline: none; box-shadow: none; }

/*
* 強制要素（helper）
**************************************/
/* text design */
.hp_gothic{
  font-family: var(--fontfamily_def) !important;
}
.hp_mincho{
  font-family: var(--fontfamily_mincho) !important;
}
.hp_t_left {
  text-align: left !important;
}
.hp_t_center {
  text-align: center !important;
}
.hp_t_right {
  text-align: right !important;
}
.hp_red {
  color: var(--color_link) !important;
}
.hp_blue {
  color: var(--color_blue) !important;
}


/*
* プログラム要素（Javascript）
**************************************/
.js_hide {
  display: none !important;
}

.swiper {
  overflow: visible;
}
.swiper-slide {}
.swiper-horizontal {
  .swiper-button-prev {
    z-index: 5;
    background-color: var(--color_mainpoint_def);
  }
  .swiper-button-prev ,
  .swiper-button-next {
    cursor: pointer;
    
    top: 50%;
    bottom: 50%;
    margin: auto;
    
    z-index: 5;
    width: 35px;
    height: 35px;
    border-radius: 25px;
    background-color: var(--color_mainpoint_def);
    
    
    svg {
      width: 8px;
      height: 13px;
      color: var(--color_white);
    }
    
    &.swiper-button-disabled {
      opacity: 0;
    }
  }
  .swiper-button-prev {
    transform: rotate(180deg);
  }
}

body.js_fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

body.admin-bar {
  margin-top: -32px !important; /* デフォルト高さは32px */
}

/*
* エレメント要素（element）
**************************************/
/* btn */
.el_btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  
  padding: 20px 20px;
  font-size: 1.00rem;
  font-weight: 700;
  
  /**/
  width: 240px;
  height: 55px;
  border-radius: 30px;
  border: 1px solid var(--color_mainpoint_def);
  color: var(--color_btn_text_def);
  background-color: var(--color_mainpoint_def);
  
  &:hover {
    text-decoration: none;
    
    /*border: 1px solid var(--color_btn_text_def);*/
    color: var(--color_mainpoint_def);
    background-color: var(--color_btn_text_def);
    
  }
  &:after {
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    margin: auto;
    font-family: 'icon-fonts' !important;
  }
  
  .el_btn__blue {}
}

/* imgbox */
.el_imgbox {
  width: 100%;
  max-width: var(--img_maxsize);
  & img {
    width: 100%;
  }
}

/* colorbox */
.el_colorbox {
  .el_colorbox__white {
    background-color: var(--color_white);
  }
}
/* title */
.el_title {
  font-size: 1.5rem;
  font-weight: 700;
}

/* text */
.el_text {}

/* text */
.el_videoname {
  font-size: 1.0rem;
  font-weight: 500;
}

/* Copyright */
.el_copyright {
  font-size: 0.625rem;
  font-weight: 500;
  color: #878787;
}

/* texticon */
.el_texticon {
  .el_texticon__xxxx {}
}

/* form */
.el_filter_btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 165px;
  height: 55px;
  padding: 10px 10px;
  border: 1px solid #D6D6D6;
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  font-weight: 500;
  font-size: 0.875rem;
  color: #515151;
  
  input[type="radio"] {
    display: none;
  }
}
.el_input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  height: 55px;
  padding: 10px 25px;
  border: 1px solid #D6D6D6;
  border-radius: 30px;
  font-weight: 500;
  font-size: 0.75rem;
  color: #969696;
  background-color: #F8F8F8;
  
  input {
    width: 100%;
  }
}

.el_radio {
  input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: auto; /* 1 */
    appearance: auto;
  }
}


.el_hamburger {
  cursor: pointer;
  display: inline-flex;
  font-size: 0;
  
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  
  .el_hamburger__item {
    display: block;
    height: 100%;
    width: 100%;
    font-size: 0;
    
    background:
      linear-gradient(#000000 0 0) top center,
      linear-gradient(#000000 0 0) center,
      linear-gradient(#000000 0 0) bottom center;
    background-repeat: no-repeat;
    background-size: 20px 1px;
    background-position: center;
    background-origin: content-box;
    background-clip: content-box;
    box-sizing: border-box;
    
    background-position:
    center top 15px,
    center center,
    center bottom 15px;
    
  }
  
  &.el_hamburger__close {
    background-color: var(--color_mainpoint_def);
    .el_hamburger__item {
      background-image:
        linear-gradient(45deg,
          transparent calc(50% - 0.5px),
          var(--color_white) 0,
          var(--color_white) calc(50% + 0.5px),
          transparent 0),
        linear-gradient(-45deg,
          transparent calc(50% - 0.5px),
          var(--color_white) 0,
          var(--color_white) calc(50% + 0.5px),
          transparent 0);
      background-repeat:no-repeat;
      background-size: 18px 18px;
      background-position:center;
    }
  }
}




/*
* 共通レイヤー要素（layer）
**************************************/
/* wrapper */
.ly_wrap {
}

/* header */
.ly_header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  
  width: 100%;
  height: var(--header_height);
  background: var(--color_header_bg_def);
  
  .ly_header__left {}
  .ly_header__right {
    min-height: 42px;
  }
  
  .ly_header__inner {
    padding: 15px 40px;
  }
  
  .ly_header__logo {
  
    img {
      max-height: var(--header_height_logo);
      width: auto;
      height: auto;
    }
  }
  .el_btn__entry {
    width: 190px;
    height: 40px;
  }
}
.ly_header_menu {
  .bl_flex {
    gap: 50px;
  }
  .bl_list {
    .bl_list__item {
      flex-shrink: 0;
      font-size: 0.875rem;
      font-weight: 500;
    }
  }
}
.ly_header_spmenu {
  display: none;
}


/* footer */
.ly_footer {
  background: var(--color_footer_bg_def);
  
  .ly_footer__inner {}
  
  .ly_footer__logo {
    max-height: 24px;
    
    img {
      max-height: 24px;
      width: auto;
      height: auto;
    }
  }
}
.ly_footer_topblock {
  padding: 40px 80px;
  .bl_flex {
    gap: 50px;
  }
  .bl_list {
    .bl_list__item {
      font-size: 1.25rem;
      font-weight: 700;
    }
  }
}
.ly_footer_bottomblock {
  padding: 15px;
  border-top: 2px solid #E5E5E5;
  
  .el_copyright {
    text-align: center;
  }
}


/* contents */
.ly_cont {
  padding-top: var(--header_height);
}
.ly_cont_inner {
}


/*
* 共通ブロック要素（block）
**************************************/
/* inner */
.bl_inner {
  position: relative;
  max-width: var(--inner_width);
  margin: auto;
  padding: 0 20px;
}

/* flex */
.bl_flex {
  display: flex;
  
  &.bl_flex__wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  &.bl_flex__bw {
    justify-content: space-between;
  }
  &.bl_flex__column {
    flex-direction: column;
  }
  &.bl_flex__shrink {
    flex-shrink: 0;
  }
  
  &.bl_flex__start {
    justify-content: flex-start;
  }
  &.bl_flex__end {
    justify-content: flex-end;
  }
  &.bl_flex__center {
    justify-content: center;
  }
  &.bl_flex__astart {
    align-items: flex-start;
  }
  &.bl_flex__acenter {
    align-items: center;
  }
  &.bl_flex__aend {
    align-items: flex-end;
  }
  
  & > .bl_flex__left {
    order: 1;
  }
  & > .bl_flex__right {
    order: 2;
  }
}
/* grid */
.bl_grid {
  display: grid;
  grid-template-rows: auto auto;
	grid-template-columns: auto auto;
	
  .bl_grid__item {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
}

/* sectionbox */
.bl_section {
  .el_title {
    margin-bottom: 15px;
  }
}

/* btnbox */
.bl_btnbox {
  margin: auto;
  margin-top: 100px;
  text-align: center;
}

/*
* オリジナル要素（origin）
**************************************/
.box_pagination {}
.box_videolist {
  /*gap: 15px;*/
  
  .bl_list__item {
    width: 270px;
    .el_imgbox {
      img {
        border-radius: 4px;
      }
    }
    .el_videoname {
      margin-top: 15px;
    }
  }
}
.box_filter {
  min-width: 200px;
  padding-top: 10px;
  .el_title {
    padding: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E0E0E0;
    
    font-size: 1.0625rem;
    font-weight: 700;
  }
  .bl_list {
    padding: 10px 0;
    
    .bl_list__item {
      padding: 10px;
      font-size: 14px;
      font-weight: 500;
      
      &.active {
        background-color: #F2F2F2;
      }
    }
  }
  
  .el_radio {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    
    .el_radio__text {
      margin-left: 10px;
    }
  }
}
.box_filter_keywords {}
.box_filter_categories {
  border-bottom: 1px solid #E0E0E0;
}

.box_videobox {
  aspect-ratio: 16 / 9;
  .box {
    width: 100%;
  }
  &.short {
    text-align: center;
    
    .box {
      width: auto;
    }
  }
}

.box_tagslist {
  padding: 10px 0;
  .bl_list {
    /*gap: 15px;*/
    .bl_list__item {
      flex-shrink: 0;
      flex: 0 0 auto;
      width: auto;
      
      &.active {
        .el_btn {
          /**/
          color: var(--color_btn_text_def);
          background-color: var(--color_mainpoint_def);
        }
      }
      
      .el_btn ,
      .el_box {
        width: auto;
        height: 32px;
        padding: 10px 15px;
        border: 0;
        border-radius: 8px;
        
        font-weight: 500;
        font-size: 0.875rem;
        color: var(--color_def);
        background-color: #F2F2F2;
      }
      
      .el_btn {
        cursor: pointer;
        input[type="radio"] {
          display: none;
          -webkit-appearance: auto;
          appearance: auto;
        }
      }
    }
  }
}

.box_wp_content {
  h1 {
    margin-bottom: 20px;
    font-size: 2.25rem;
    font-weight: 700;
  }
  h2 {
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: 700;
  }
  h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 700;
  }
  h4 {
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 700;
  }
  p {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 500;
  }
  p + h1, p + h2, p + h3, p + h4, p + h5, p + h6  {
    margin-top: 50px;
  }
}

.box_recruit {
  padding: 80px 0;
  
  background: var(--color_recruit_bg_def);
   
  .box_recruit__inner {
    max-width: 1120px;
    padding: 0 20px;
    margin: auto;
  }
  .el_title {
    margin-bottom: 60px;
    font-size: 1.75rem;
    font-weight: 600;
  }
  .bl_flex {
    gap: 30px;
    
    & + .bl_flex {
      margin-top: 60px;
    }
  }
}




/*
* ページ固有要素（unique）
**************************************/
/* home page */
.un_home {}
.un_home_kv {
  position: relative;
  width: 100%;
  background: var(--color_kv_bg_def);
  .un_home_kv__inner {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 0.4fr 0.5fr 0.1fr;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .un_home_kv_textbox {
    grid-column: 1 / 2;
    position: relative;
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: last baseline;
    gap: 20px;
    padding: 40px;
    
    .un_home_kv_textbox__category {
      font-size: 1.5rem;
      font-weight: 700;
      
      /**/
      color: var(--color_mainpoint_def);
    }
    .un_home_kv_textbox__title {
      font-size: 1.5rem;
      font-weight: 700;
      
      /**/
      color: var(--color_kv_text_def)
    }
    .un_home_kv_textbox__text {
      font-size: 0.875rem;
      /**/
      color: var(--color_kv_text_def)
    }
    .el_btnbox {
      .el_btn {
        max-width: 350px;
      }
    }
  }
  .un_home_kv_videobox {
    grid-column: 2 / 3;
    position: relative;
    z-index: 11;
    
    .el_vlink {
      display: block;
      position: relative;
      
      &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 14;
        margin: auto;
        width: 32px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.95);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        transition: transform ease 0.15s;
      }
      &:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 13;
        margin: auto;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        
        background: rgba(0, 0, 0, 0.5);
        transition: transform ease 0.15s;
      }
       img {
        border-radius: 16px;
       }
      &:hover {
        img {
          opacity: 1.0;
          animation: none;
        }
        &:before ,
        &:after {
          transform: scale(1.3);
        }
      }
    }
  }
  .un_home_kv_bgbox {
    grid-column: 3 / 4;
    
    img {
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 10;
      width: 100%;
    }
  }
}

.un_home_sc {
  overflow: hidden;
  padding: 25px 0;
  border-bottom: 4px solid #E5E5E5;
  
  scroll-margin-top: var(--header_height);
  
  .un_home_sc__inner {
    padding: 0px 80px;
  }
  
  .el_title {
    margin-bottom: 15px;
  }
  .bl_flex {
    /*gap: 15px;*/
  }
  .bl_list {
    .bl_list__item {
      width: 320px;
      .el_imgbox {
        img {
          border-radius: 4px;
        }
      }
      .el_videoname {
        margin-top: 15px;
      }
    }
  }
}
.un_home_videolist {
  padding: 50px 0;
  .un_home_videolist__inner {
    padding-left: 80px;
  }
  
  .bl_flex__right {
    width: 100%;
    overflow: hidden;
  }
  
  .box_filter_pc {
    align-self: flex-start;
    position: sticky;
    top: var(--header_height);
  }
}
.un_home_videolist_box {
  gap: 30px;
  
  .bl_section {
    scroll-margin-top: var(--header_height);
    &:not(.js_hide) + .bl_section {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 2px solid #F8F8F8;
    }
  }
  
  /*
    transition: transform 0.8s ease, opacity 0.8s ease;
  */
  
}
.un_home_videolist_search {
  margin-bottom: 30px;
  
  &.bl_flex {
    gap: 20px;
    
    .bl_flex__left {
      flex-shrink: 0;
    }
    .bl_flex__right {
      width: 100%;
    }
  }
  .el_box {
    position: relative;
    max-width: 800px;
    
    .el_btn {
      position: absolute;
      right: 4px;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 48px;
      height: 48px;
      font-size: 0;
      
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        width: 12px;
        height: 12px;
        background-color: var(--color_white);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
      }
      
      &:hover {
        &::after {
          background-color: var(--color_mainpoint_def);
        }
      }
    }
  }
}
.un_home_videolist_tags {
  overflow: hidden;
  margin-bottom: 40px;
}
.un_home_videolist_short {
  padding-bottom: 50px;
  border-bottom: 4px solid #E5E5E5;
  margin-bottom: 50px;
  .bl_list__item {
    width: 200px;
  }
  
  &.bl_section {
    &:not(.js_hide)  + .bl_section {
      padding-top: 0;
      margin-top: 0;
      border: 0;
    }
  }
}
.un_home_videolist_noitem {
  width: 100%;
  padding: 0 80px;
  text-align: center;
  .el_text {
    font-size: 1.125rem;
    font-weight: bold;
  }
}


.un_home_recruit {
  padding: 80px 0;
  
  background: var(--color_recruit_bg_def);
   
  .un_home_recruit__inner {
    max-width: 1120px;
    padding: 0 20px;
    margin: auto;
  }
  .el_title {
    margin-bottom: 60px;
    font-size: 1.75rem;
    font-weight: 600;
  }
  .bl_flex {
    gap: 30px;
    
    & + .bl_flex {
      margin-top: 60px;
    }
  }
}

/* xxxxx page */
.un_detail {
  padding: 30px 0 100px;
  /**/
  background: var(--color_kv_bg_def) no-repeat scroll;
  background-size: auto 150px;
  
  .un_detail__inner {
    overflow: hidden;
    
    max-width: var(--inner_width);
    padding: 0 20px;
    margin: auto;
  }
}
.un_detail_box {
  .el_videobox {
    margin-bottom: 40px;
  }
  .el_title {
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: 600;
  }
  .el_btnbox{
    margin-bottom: 50px;
    .el_btn {
      width: 220px;
      height: 42px;
      font-size: 1.0rem;
      font-weight: 700;
    }
  }
  .box_tagslist {
    margin-bottom: 35px;
    overflow: hidden;
  }
  .un_detail_box__short {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 24px;
    background-color: #FBFBFB;
    
    .un_detail_box__shorttext {
      font-size: 1rem;
      line-height: 1.8;
      font-weight: 500;
      
      &.short {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
      }
    }
    .un_detail_box__btnbox {
      text-align: right;
      .un_detail_box__shortbtn {
        font-weight: 700;
      }
    }
  }
  .un_detail_box__content {
    margin-top: 55px;
    margin-bottom: 35px;
    padding: 40px 0 0;
    border-top: 4px solid #E5E5E5;
  }
}
.un_detail_others {
  margin-top: 55px;
  padding: 40px 0;
  border-top: 4px solid #E5E5E5;
  
  .el_title {
    margin-bottom: 
  }
  
  .bl_section {
    & + .bl_section {
      margin-top: 50px;
    }
  }
}

.un_search {
}
.un_search_videolist {
  padding: 50px 0;
  .un_search_videolist__inner {
    padding-left: 80px;
  }
  
  .bl_flex__right {
    width: 100%;
    overflow: hidden;
  }
}
.un_search_videolist_box {
  gap: 30px;
  
  .box_videolist {
    gap: 30px 1%;
    
    & .bl_list__item {
      width: 24%;
    }
  }
  .box_filter_keywords {
  }
  .box_tagslist {
     .bl_list__item {
       padding: 0;
     }
  }
  
  .box_filter_pc {
    align-self: flex-start;
    position: sticky;
    top: var(--header_height);
  }
  .bl_section {
    scroll-margin-top: var(--header_height);
    &:not(.js_hide) + .bl_section {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 2px solid #F8F8F8;
    }
  }
  
  
}
.un_search_videolist_search {
  margin-bottom: 30px;
  
  &.bl_flex {
    gap: 20px;
    
    .bl_flex__left {
      flex-shrink: 0;
    }
    .bl_flex__right {
      width: 100%;
    }
  }
  .el_box {
    position: relative;
    max-width: 800px;
    
    .el_btn {
      position: absolute;
      right: 4px;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 48px;
      height: 48px;
      font-size: 0;
      
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        width: 12px;
        height: 12px;
        background-color: var(--color_white);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
      }
      
      &:hover {
        &::after {
          background-color: var(--color_mainpoint_def);
        }
      }
    }
  }
}
.un_search_videolist_tags {
  overflow: hidden;
  margin-bottom: 40px;
}




/*
* SCREEN
**************************************/


/*
* PCのみ（中間デザイン）
**************************************/
@media screen and (max-width: 1350px) {
/*
* 
**************************************/
.ly_header_menu {
  .bl_flex {
    gap: 30px;
  }
}

}

/*
* PCのみ（中間デザイン）
**************************************/
@media screen and (max-width: 1200px) {
/*
* 
**************************************/
.ly_header_menu {
  position: absolute;
  right: 0;
  top: var(--header_height);
  z-index: 1000;
  width: 90%;
  height: calc(100vh - var(--sp_header_height));
  border-top: 10px solid var(--color_mainpoint_def);
  background: var(--color_header_bg_def);
  
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--animate_spead) ease;
  
  &.js_active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  .bl_list {
    display: block;
    .bl_list__item {
      padding: 15px;
      padding-left: 40px;
      border-bottom: 1px solid #EBEBEB;
    }
    .bl_list__item:last-child {
      border-bottom: 0;
    }
  }
}
.ly_header_spmenu {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  
  .el_hamburger {
    width: 70px;
    height: 70px;
    
    .el_hamburger__item {
      background-size: 36px 3px;
      
      background-position:
      center top 22px,
      center center,
      center bottom 22px;
      
    }
    
    &.el_hamburger__close {
      .el_hamburger__item {
        background-size: 26px 26px;
      }
    }
    
  }
}





.un_home_kv {
  min-height: auto;
  
  .un_home_kv__inner {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  .un_home_kv_textbox {
    order: 2;
    gap: 10px;
    align-items: flex-start;
    padding: 20px 0;
    
    .un_home_kv_textbox__category {}
    .un_home_kv_textbox__title {}
    .un_home_kv_textbox__text {}
    
    .el_btnbox {
      margin: auto;
      margin-top: 30px;
      text-align: center;
      .el_btn {
      }
    }
    
  }
  .un_home_kv_videobox {
    order: 1;
    padding-top: 20px;
    text-align: center;
    
    aspect-ratio: auto;
    
    .box {
      max-width: var(--img_maxsize);
      height: auto;
    }
  }
  .un_home_kv_bgbox {
    img {
      bottom: auto;
      top: 0;
    }
  }
}

.un_search_videolist_box {
  .box_videolist {
    gap: 30px 1%;
    
    & .bl_list__item {
      width: 32%;
    }
  }
}


}





/*
* PCのみ
**************************************/
@media screen and (min-width: 768.1px) {
/*
* 強制要素（helper）
**************************************/
.hp_pc_display {
}
.hp_sp_display{
  display: none !important;
}
.hp_sp_br {
  display: none;
}

/*
* 共通レイヤー要素（layer）
**************************************/
/*
* 共通ブロック要素（block）
**************************************/
/*
* ページ固有要素（unique）
**************************************/

}


/*
* SPのみ（WP管理設定）
**************************************/
@media screen and (max-width: 782px) {
/*
* 強制要素（helper）
**************************************/
  body.admin-bar {
    margin-top: -46px !important; /* モバイル時の管理バー高さ */
  }
}

/*
* SPのみ
**************************************/
@media screen and (max-width: 768px) {
/*
* 強制要素（helper）
**************************************/
.hp_pc_display {
  display: none !important;
}
.hp_sp_display{}
.hp_sp_br {}


/*
* 共通要素
**************************************/
body {
  line-height: var(--sp_lineheight_def);
}


/*
* プログラム要素（Javascript）
**************************************/

/*
* エレメント要素（element）
**************************************/
/* btn */
.el_btn {
  padding: 12px 12px;
  height: 48px;
}

.el_closebtn {
  cursor: pointer;
  display: inline-flex;
  font-size: 0;
  
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  
  .el_closebtn__text {
    display: block;
    height: 100%;
    width: 100%;
    font-size: 0;
    
    background-image:
      linear-gradient(45deg,
        transparent calc(50% - 0.5px),
        #1D1D1D 0,
        #1D1D1D calc(50% + 0.5px),
        transparent 0),
      linear-gradient(-45deg,
        transparent calc(50% - 0.5px),
        #1D1D1D 0,
        #1D1D1D calc(50% + 0.5px),
        transparent 0);
    background-repeat:no-repeat;
    background-size: 18px 18px;
    background-position:center;
    background-origin: content-box;
    background-clip: content-box;
    box-sizing: border-box;
    
    
  }
}


/* form */
.el_filter_btn {
  width: 48px;
  height: 48px;
}
.el_input {
  height: 48px;
  font-size: 1.0rem;
}


/* Copyright */
.el_copyright {
  font-size: 0.625rem;
}

/* title */
.el_title {
  font-size: 1.125rem;
}




/*
* 共通レイヤー要素（layer）
**************************************/
/* contents */
.ly_cont {
  padding-top: var(--sp_header_height);
}
/* header */
.ly_header {
  height: var(--sp_header_height);
  
  .ly_header__right {
    min-height: none;
  }
  .ly_header__inner {
    padding: 0;
  }
  .ly_header__logo {
    padding: 10px 15px;
    font-size: 0;
    img {
      max-height: var(--sp_header_height_logo);
    }
  }
  .el_btn__entry {
    width: 80%;
    max-width: 500px;
    height: 48px;
    margin-top: 20px;
  }
  
}
.ly_header_menu {
  position: absolute;
  right: 0;
  top: var(--sp_header_height);
  z-index: 1000;
  width: 90%;
  height: calc(100vh - var(--sp_header_height));
  border-top: 10px solid var(--color_mainpoint_def);
  background: var(--color_header_bg_def);
  
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--animate_spead) ease;
  
  &.js_active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  .bl_list {
    .bl_list__item {
      padding: 15px;
      padding-left: 40px;
    }
  }
}
.ly_header_spmenu {
  position: static;
  .el_hamburger {
    width: 42px;
    height: 42px;
    
    .el_hamburger__item {
      background-size: 20px 1px;
      
      background-position:
        center top 15px,
        center center,
        center bottom 15px;
    }
    
    
    &.el_hamburger__close {
      .el_hamburger__item {
        background-image:
          linear-gradient(45deg,
            transparent calc(50% - 0.5px),
            var(--color_white) 0,
            var(--color_white) calc(50% + 0.5px),
            transparent 0),
          linear-gradient(-45deg,
            transparent calc(50% - 0.5px),
            var(--color_white) 0,
            var(--color_white) calc(50% + 0.5px),
            transparent 0);
        background-repeat:no-repeat;
        background-size: 18px 18px;
        background-position:center;
      }
    }
    
  }
}


/* footer */
.ly_footer {
  padding: 0;
  padding-bottom: 70px;
  
  .ly_footer__logo {
    img {
      max-height: var(--sp_header_height_logo);
    }
  }
}
.ly_footer_topblock {
  padding: 25px;
  .bl_list {
    margin-top: 40px;
    .bl_list__item {
      font-size: 0.875rem;
      font-weight: 700;
      
      & + .bl_list__item {
        margin-top: 10px;
      }
    }
    .el_btn__entry {
      width: 80%;
      max-width: 500px;
      height: 42px;
    }
  }
}
.ly_footer_bottomblock {
  border-top-width: 1px;
  margin-top: 0;
  padding: 20px;
}
.ly_footer_linkbox {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 10px;
  background-color: var(--color_mainpoint_def);
  
  .bl_list {
    gap: 25px;
    .bl_list__item {
      a {
        color: var(--color_white);
      }
      .el_imgbox {
        width: auto;
        text-align: center;
        & img {
          width: 28px;
        }
      }
      .el_text {
        text-align: center;
        font-size: 0.75rem;
      }
    }
  }
}

/*
* 共通ブロック要素（block）
**************************************/
.bl_flex {
  display: block;
  
  &.bl_flex__spflex {
    display: flex;
  }
}



/*
* 共通ブロック要素（block）
**************************************/
.bl_inner {
  padding: 0 10px;
}


/*
* オリジナル要素（origin）
**************************************/
.box_videolist {
  .bl_list__item {
    width: 200px;
  }
}

.box_wp_content {
  h1 {
    margin-bottom: 15px;
    font-size: 2rem;
  }
  h2 {
    margin-bottom: 15px;
    font-size: 1.75rem;
  }
  h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
  }
  h4 {
    margin-bottom: 15px;
    font-size: 1.25rem;
  }
  h5 {
    margin-bottom: 15px;
    font-size: 1.0rem;
  }
  h6 {
    margin-bottom: 15px;
    font-size: 0.875rem;
  }
  p {
    margin-bottom: 15px;
    font-size: 0.875rem;
  }
  p + h1, p + h2, p + h3, p + h4, p + h5, p + h6  {
    margin-top: 25px;
  }
  
}

.box_filter_sp {
  overflow: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: var(--color_header_bg_def);
  
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform var(--animate_spead) ease;
  
  &.js_active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  
  .box_filter_sp_head {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    
    border-bottom: 1px solid #EBEBEB;
    
    .el_title {
      padding: 10px;
      border-bottom: 0;
      font-size: 1.125rem;
      font-weight: 700;
    }
    .el_closebtn {
      position: absolute;
      right: 20px;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  .box_filter_sp_body {
    padding: 20px 0 20px 35px;
    
    .box_filter_sp_body__section {
      .el_title {
        padding: 10px;
        border-bottom: 1px solid #EBEBEB;
        font-size: 1rem;
        font-weight: 700;
      }
      .bl_list {
        padding: 10px;
        .bl_list__item {
          border-radius: 8px;
        }
      }
      
      & + .box_filter_sp_body__section {
        margin-top: 20px;
      }
    }
    .el_btnbox {
      padding-top: 30px;
      border-top: 1px solid #EBEBEB;
    }
  }
  
  .box_filter_sp_keywords {
    
  }
  
  .bl_list {
    .bl_list__item {
    }
  }
}

/*
* ページ固有要素（unique）
**************************************/
/* home page */
.un_home {}
.un_home_kv {
  .un_home_kv_textbox {
    gap: 10px;
    padding: 20px 0;
    
    .un_home_kv_textbox__category {
      font-size: 1.3125rem;
    }
    .un_home_kv_textbox__title {
      font-size: 1.25rem;
    }
    .un_home_kv_textbox__text {
      font-size: 0.9375rem;
    }
    .el_btnbox {
      margin-top: 10px;
    }
    
  }
  .un_home_kv_videobox {
    .box {
      max-width: 100%;
    }
  }
  .un_home_kv_bgbox {
  }
}
.un_home_sc {
  padding: 40px 0;
  border-bottom-width: 2px;
  
  .un_home_sc__inner {
    padding: 0px 10px;
  }
  .el_title {
    font-size: 1rem;
    margin-bottom: 15px;
  }
  .bl_list__item {
    width: 270px;
  }
}
.un_home_videolist {
  padding: 20px 0;
  
  .un_home_videolist__inner {
    padding-left: 10px;
  }
}
.un_home_videolist_box {
  .bl_section {
    & + .bl_section {
      margin-top: 30px;
    }
  }
}
.un_home_videolist_search {
  padding-right: 10px;
  margin-bottom: 20px;
  &.bl_flex {
    gap: 15px;
  }
}
.un_home_videolist_tags {
  margin-bottom: 20px;
}
.un_home_videolist_short {
  padding-bottom: 10px;
  border-bottom: 0px;
  
  .box_videolist {
   .bl_list__item {
     width: 168px;
   }
  }
}

.un_home_recruit {
  padding: 30px 0;
  
  .bl_flex {
    flex-wrap: wrap;
    gap: 30px;
    
    & + .bl_flex {
      margin-top: 30px;
    }
    
    .bl_list__item {
      width: 100%;
      text-align: center;
    }
  }
}


/* xxxxx page */
.un_detail {
  padding: 0 0 40px;
  
  .un_detail__inner {
    padding: 0;
  }
}
.un_detail_box {
  .el_videobox {
    margin-bottom: 20px;
    text-align: center;
    
    .box {
      width: 100%;
      max-width: 100%;
      height: 100%;
    }
  }
  .el_title {
    padding: 0 10px;
    font-size: 1.25rem;
  }
  .el_btnbox {
    padding: 0 10px;
    margin-bottom: 20px;
  }
  .box_tagslist {
    padding-left: 10px;
    margin-bottom: 15px;
  }
  .un_detail_box__short {
    padding: 0 10px;
    background-color: transparent;
    
    .un_detail_box__shorttext {
      font-size: 0.875rem;
    }
    .un_detail_box__btnbox {
      margin-top: 15px;
      text-align: center;
      .un_detail_box__shortbtn {
        font-size: 0.75rem;
        font-weight: 500;
      }
    }
  }
  .un_detail_box__content {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 30px 20px 0;
    border-top: 2px solid #E5E5E5;
  }
}
.un_detail_others {
  overflow: hidden;
  margin-top: 15px;
  padding: 15px 0;
  padding-left: 10px;
  border-top: 0;
}

.un_search {}
.un_search_videolist {
  .un_search_videolist__inner {
    padding: 0 20px;;
  }
}
.un_search_videolist_box {
  .box_videolist {
    gap: 30px 2%;
    
    & .bl_list__item {
      width: 49%;
    }
  }
}


}



/*
* SPのみ
**************************************/
@media screen and (max-width: 420px) {

/*
* ページ固有要素（unique）
**************************************/
.un_search {
}
.un_search_videolist_box {
  .box_videolist {
    gap: 30px 0;
    
    & .bl_list__item {
      width: 100%;
    }
  }
}



}