@charset "UTF-8";
/* ---------------------------------------------------------
reset
--------------------------------------------------------- */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* rem */
  font-size: 625%;
}

@media (min-width: 768px) and (max-width: 1000px) {
  html {
    font-size: calc(100vw / 10);
  }
}

@media (max-width: 767px) {
  html {
    font-size: calc(100vw / 7.67);
  }
}

header, main, section, picture, footer {
  display: block;
}

body, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol, ul, li, dl, dt, dd {
  margin: 0;
  padding: 0;
}

ol, ul, li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
}

a:hover {
  -webkit-filter: drop-shadow(0 0 0.05rem rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0 0 0.05rem rgba(0, 0, 0, 0.5));
}

img {
  border-style: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

iframe {
  vertical-align: bottom;
}

/* ---------------------------------------------------------
common
--------------------------------------------------------- */
body {
  line-height: 1.6;
  font-family: 'Noto Sans JP',sans-serif;
  font-size: .16rem;
  -webkit-font-feature-settings: 'palt';
          font-feature-settings: 'palt';
  text-align: center;
  letter-spacing: .05em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.inner {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 9.4rem;
}

/* ---------------------------------------------------------
animation
--------------------------------------------------------- */
.lama_basic {
  opacity: 0;
}

.anime {
  -webkit-animation: fadeToTop 1s forwards;
          animation: fadeToTop 1s forwards;
}

@-webkit-keyframes fadeToTop {
  from {
    -webkit-transform: translateY(0.2rem);
            transform: translateY(0.2rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeToTop {
  from {
    -webkit-transform: translateY(0.2rem);
            transform: translateY(0.2rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* ---------------------------------------------------------
header
--------------------------------------------------------- */
header {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

@media (max-width: 767px) and (orientation: landscape) {
  header {
    height: inherit;
  }
}

header .mv {
  width: 100%;
  height: 100%;
}

header .mv img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

header .wrap {
  margin: auto;
  position: absolute;
  right: 0;
  bottom: .88rem;
  left: 0;
  width: calc(100% - .8rem);
}

@media (max-width: 767px) {
  header .wrap {
    bottom: .92rem;
  }
}

header .logo {
  margin: 0 0 .3rem 0;
}

@media (max-width: 767px) {
  header .logo {
    margin: 0 0 .52rem 0;
  }
}

header .logo img {
  max-width: 6.67rem;
}

@media (min-width: 768px) {
  header .btn {
    margin: 0 auto;
    padding: 0 0 0 .26rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 4rem;
  }
}

header .btn p {
  margin: 0 .2rem 0 0;
  width: 4rem;
  -webkit-filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.8));
          filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.8));
}

@media (max-width: 767px) {
  header .btn p {
    margin: 0 auto .34rem auto;
    width: 4.4rem;
  }
}

header .btn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (min-width: 768px) {
  header .btn ul {
    width: calc(100% - 3.14rem);
  }
}

@media (max-width: 767px) {
  header .btn ul {
    padding: 0 0 0 .36rem;
  }
}

header .btn li + li {
  margin: 0 0 0 .16rem;
}

@media (max-width: 767px) {
  header .btn li + li {
    margin: 0 0 0 .18rem;
  }
}

header .btn li:nth-child(1) {
  width: 1.9rem;
}

@media (max-width: 767px) {
  header .btn li:nth-child(1) {
    width: 2.03rem;
  }
}

header .btn li:nth-child(2) {
  width: 1.82rem;
}

@media (max-width: 767px) {
  header .btn li:nth-child(2) {
    width: 1.93rem;
  }
}

header .btn li:nth-child(3) {
  position: relative;
  width: 2.56rem;
}

@media (max-width: 767px) {
  header .btn li:nth-child(3) {
    width: 2.71rem;
  }
}

header .btn li:nth-child(3) img {
  position: absolute;
  top: -.16rem;
  left: -.16rem;
}

/* ---------------------------------------------------------
about
--------------------------------------------------------- */
.about {
  padding: 0 .4rem;
  position: relative;
  background: url("../img/bg_about.png") no-repeat center/cover;
}

@media (max-width: 767px) {
  .about {
    background-image: url("../img/bg_about_sp.png");
  }
}

.about::before {
  margin: auto;
  -webkit-box-shadow: 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: .1rem;
  content: '';
  background: url("../img/bg_border.jpg") repeat-x center;
}

.about .inner {
  padding: .82rem 0 1rem 0;
}

@media (max-width: 767px) {
  .about .inner {
    padding: .9rem 0 .92rem 0;
  }
}

.about h2 {
  margin: auto;
  position: absolute;
  top: -.6rem;
  right: 0;
  left: 0;
}

@media (max-width: 767px) {
  .about h2 {
    top: -.5rem;
  }
}

.about h2 img {
  max-width: 7.05rem;
}

.about .txt {
  margin: 0 0 .55rem 0;
}

.about .txt img {
  max-width: 7.28rem;
}

@media (max-width: 767px) {
  .about .txt {
    margin: 0 0 .38rem 0;
  }
  .about .txt img {
    max-width: 5.83rem;
  }
}

.about .img img {
  max-width: 5.9rem;
}

@media (max-width: 767px) {
  .about .img img {
    max-width: 6.7rem;
  }
}

/* ---------------------------------------------------------
contents
--------------------------------------------------------- */
.contents {
  padding: 1.12rem .4rem 1rem .4rem;
  position: relative;
}

.contents::before, .contents::after {
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  content: '';
}

.contents::before {
  position: fixed;
  z-index: -1;
  height: 100%;
  background: url("../img/bg_contents.jpg") no-repeat center/cover;
}

.contents::after {
  -webkit-box-shadow: 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  height: .1rem;
  background: url("../img/bg_border.jpg") repeat-x center;
}

.contents .img {
  margin: 0 0 1rem 0;
}

@media (max-width: 767px) {
  .contents .img {
    margin: 0 0 .86rem 0;
  }
}

.contents .img li {
  -webkit-filter: drop-shadow(0 0.1rem 0.05rem rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0 0.1rem 0.05rem rgba(0, 0, 0, 0.5));
}

.contents .img li + li {
  margin: .32rem 0 0 0;
}

@media (max-width: 767px) {
  .contents .img li + li {
    margin: .55rem 0 0 0;
  }
}

.contents .img li.anime:nth-child(1), .contents .img li.anime:nth-child(3) {
  -webkit-animation: fadeToRight 1s forwards;
          animation: fadeToRight 1s forwards;
}

@-webkit-keyframes fadeToRight {
  from {
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeToRight {
  from {
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.contents .img li.anime:nth-child(2) {
  -webkit-animation: fadeToLeft 1s forwards;
          animation: fadeToLeft 1s forwards;
}

@-webkit-keyframes fadeToLeft {
  from {
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeToLeft {
  from {
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.contents .img img {
  max-width: 5.8rem;
}

@media (max-width: 767px) {
  .contents .img img {
    max-width: 6.7rem;
  }
}

.contents .tw {
  margin: 0 0 .5rem 0;
}

@media (max-width: 767px) {
  .contents .tw {
    margin: 0 0 .6rem 0;
  }
}

.contents .tw h2 {
  margin: 0 0 .05rem 0;
  -webkit-filter: drop-shadow(0 0 0.02rem black);
          filter: drop-shadow(0 0 0.02rem black);
}

.contents .tw h2 img {
  max-width: 2.94rem;
}

.contents .sns {
  margin: 0 auto;
}

.contents .sns li {
  display: inline-block;
}

.contents .sns li + li {
  margin: 0 0 0 .18rem;
}

.contents .sns img {
  max-width: .78rem;
}

/* ---------------------------------------------------------
footer
--------------------------------------------------------- */
footer {
  padding: .9rem .4rem .4rem .4rem;
  position: relative;
  background-color: #fff;
  background-image: linear-gradient(135deg, #f2f2f2 25%, transparent 25%), linear-gradient(225deg, #f2f2f2 25%, transparent 25%), linear-gradient(45deg, #f2f2f2 25%, transparent 25%), linear-gradient(315deg, #f2f2f2 25%, transparent 25%);
  background-repeat: repeat;
  background-position: .5rem 0,.5rem 0,0 0,0 0;
  background-size: .5rem .5rem;
}

@media (max-width: 767px) {
  footer {
    padding: .86rem .4rem .4rem .4rem;
  }
}

footer::after {
  margin: auto;
  -webkit-box-shadow: 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0.05rem 0.05rem 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: .1rem;
  content: '';
  background: url("../img/bg_border.jpg") repeat-x center;
}

footer .inner {
  max-width: 7.36rem;
}

footer .logo {
  margin: 0 0 .18rem 0;
  -webkit-filter: drop-shadow(0 0 0.05rem rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0 0 0.05rem rgba(0, 0, 0, 0.5));
}

footer .logo img {
  max-width: 3.47rem;
}

footer .outline {
  margin: 0 0 .5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  text-align: left;
}

@media (max-width: 767px) {
  footer .outline {
    margin: 0 0 .58rem 0;
  }
}

footer .outline p {
  margin: 0 .2rem 0 0;
  width: 1.5rem;
}

footer .outline .flex {
  width: calc(100% - 1.5rem);
}

footer .outline dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .outline dt {
  position: relative;
  width: 5.4em;
}

@media (max-width: 767px) {
  footer .outline dt {
    width: 8em;
  }
}

footer .outline dt::before {
  position: absolute;
  right: .2em;
  content: '：';
}

footer .outline dd {
  width: calc(100% - 5.4em);
}

@media (max-width: 767px) {
  footer .outline dd {
    width: calc(100% - 8em);
  }
}

footer .btn {
  margin: 0 0 .3rem 0;
}

@media (max-width: 767px) {
  footer .btn {
    margin: 0 0 .5rem 0;
  }
}

footer .btn p {
  margin: 0 0 .34rem 0;
  -webkit-filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.8));
          filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.8));
}

footer .btn p img {
  max-width: 4.58rem;
}

footer .btn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 767px) {
  footer .btn ul {
    padding: 0 0 0 .36rem;
  }
}

footer .btn li + li {
  margin: 0 0 0 .18rem;
}

footer .btn li:nth-child(1) {
  width: 2.12rem;
}

@media (max-width: 767px) {
  footer .btn li:nth-child(1) {
    width: 2.03rem;
  }
}

footer .btn li:nth-child(2) {
  width: 2.02rem;
}

@media (max-width: 767px) {
  footer .btn li:nth-child(2) {
    width: 1.93rem;
  }
}

footer .btn li:nth-child(3) {
  position: relative;
  width: 2.86rem;
}

@media (max-width: 767px) {
  footer .btn li:nth-child(3) {
    width: 2.71rem;
  }
}

footer .btn li:nth-child(3) img {
  position: absolute;
  top: -.18rem;
  left: -.18rem;
}

@media (max-width: 767px) {
  footer .btn li:nth-child(3) img {
    top: -.17rem;
  }
}

footer .privacy_copy {
  font-size: .18rem;
}

footer .privacy_copy li + li {
  margin: .2rem 0 0 0;
}

/* ---------------------------------------------------------
IE11
--------------------------------------------------------- */
_:-ms-lang(x)::-ms-backdrop, * {
  -ms-overflow-style: none;
}

_:-ms-lang(x)::-ms-backdrop, .lama_basic {
  opacity: 1;
}

_:-ms-lang(x)::-ms-backdrop, header {
  height: 100%;
}
/*# sourceMappingURL=common.css.map */