@charset "UTF-8";
/* m-panel */
.m-panel > * {
    width: 100%;
    margin-top: 0;
    margin-right: 0;
  background-color: #f1f1f1;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  outline: none;
}
/* Ex -> 2col
  .m-panel > *:nth-child(2n) {margin-right: 0;}
  .m-panel > *:nth-child(-n + 2) {margin-top: 0;}
*/
.m-panel > *::before {
  display: block;
    padding-top: 100%;
  content: '';
}
.m-panel > *::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background-color: rgba(255, 255, 255, 0);
  content: '';
}
.m-panel-cont {
  position: absolute;
  left: 50%;
  top: 50%;
    width: 90%;
    height: 90%;
  transform: translate(-50%,-50%);
    background-color: rgba(255, 255, 255, 0.9);
  transition: all .2s ease;
  z-index: 1
}
.m-panel-cont__ttl {
  position: absolute;
    left: 5%;
    top: 5%;
}
.m-panel-cont__txt {
  position: absolute;
    left: 5%;
    top: 25%;
}
.m-panel-cont__btn {
  position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, 0);
}

/* m-card */
.m-card > * {
    width: 100%;
    margin-top: 0;
    margin-right: 0;
  background-color: #fff;
}
.m-card-img {}
.m-card-img img {height: auto;}
.m-card-bgimg {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.m-card-bgimg::before {
  display: block;
    padding-top: 50%;
  content: '';
}
.m-card-bgimg::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  content: '';
}
.m-card-cont {position: relative;}
.m-card-cont__ttl {}
.m-card-cont__txt {}

/* m-list */
.m-list > * {
  display: block;
  position: relative;
  padding: 2rem 2.5rem 2rem 2rem;
    background-color: #fff;
    border-bottom: 1px solid #f1f1f1;
}
.m-list > *:last-child {border-bottom: none;}
.m-list-meta > *:nth-child(1) {}
.m-list-meta > *:nth-child(2) {}
.m-list-ttl {}

/* m-bgimg */
/* ----------
  null    ：Height Contents Variable
  is-fixed：Height .m-bgimg::before Setting
---------- */
.m-bgimg {position: relative;}
.m-bgimg-bg {
  padding: 50px 0;
  background-color: #fff;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.m-bgimg.is-fixed .m-bgimg-bg {padding: 0;}
.m-bgimg.is-fixed .m-bgimg-bg::before {
  display: block;
    padding-top: 30%;
  content: '';
}
.m-bgimg-bg::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .6);
  content: '';
}
.m-bgimg-bg video {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
}
.m-bgimg.is-fixed .m-bgimg-cont {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 90%;
  margin: auto;
  z-index: 1;
/*
  position: absolute;
  left: 50%;
  top: 50%;
    width: 100%;
    height: 100%;
  transform: translate(-50%,-50%);
    background-color: rgba(255, 255, 255, 0);
  transition: all .2s ease;
  z-index: 1
*/
}
.m-bgimg-cont__ttl {}
.m-bgimg-cont__txt {}
.m-bgimg-cont__btn {}
.m-bgimg.is-fixed .m-bgimg-cont > * {
  position: absolute;
  width: 100%;
}
.m-bgimg.is-fixed .m-bgimg-cont__ttl {top: 5%;}
.m-bgimg.is-fixed .m-bgimg-cont__txt {top: 25%;}
.m-bgimg.is-fixed .m-bgimg-cont__btn {top: 70%;}

/* m-parlx */
/* ----------
  null    ：Height Contents Variable -> data-height="100%"
  is-fixed：Height Fixed -> data-height="400px"
---------- */
.m-parlx {
  position: relative;
  background-color: transparent;
  overflow: hidden;
}
.m-parlx::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, .6);
  content: '';
}
.m-parlx-bg {
  position: absolute;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.m-parlx-cont {
  position: relative;
  z-index: 1;
}
.m-parlx.is-fixed .m-parlx-cont{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
  z-index: 1;
}
.m-parlx-cont__ttl {}
.m-parlx-cont__txt {}

@media screen and (max-width: 1200px){}
@media screen and (max-width: 980px){}
@media screen and (max-width: 768px){}
@media screen and (max-width: 640px){}
@media screen and (max-width: 480px){
  /* m-list */
  .m-list > * {padding: 1.5rem 2.5rem 1.5rem 1.5rem;}
}
@media screen and (max-width: 370px){}