@charset "UTF-8";
/* Scss Document */
/*変数の宣言*/
/*タブレット端末の横幅*/
/*スマホ端末の横幅*/
/*PC用画像の高さ*/
/*タブレット用画像の高さ*/
/*スマホ用画像の高さ*/
/*画像のパス*/
/*一枚あたりの表示時間(秒数)*/
/*画像の枚数*/
@media (min-width: 1366px) {
  #head_anim {
    width: 1366px;
    height: 850px;
    margin: 0 auto; }

  .header_anim li {
    width: 1366px;
    height: 850px;
    opacity: 0;
    animation: header_anim 12s linear infinite 0s;
    height: 850px; }

  .header_anim li:nth-child(1) {
    background: url("../images/bg_header01.jpg") center top no-repeat;
    height: 850px; }

  .header_anim li:nth-child(2) {
    background: url("../images/header_bg02.jpg") center top no-repeat;
    height: 850px;
    margin-top: -850px;
    animation-delay: 3s; }

  .header_anim li:nth-child(3) {
    background: url("../images/header_bg03.jpg") center top no-repeat;
    height: 850px;
    margin-top: -850px;
    animation-delay: 6s; }

  .header_anim li:nth-child(4) {
    background: url("../images/header_bg04.jpg") center top no-repeat;
    height: 850px;
    margin-top: -850px;
    animation-delay: 9s; } }
@media (min-width: 768px) and (max-width: 1365px) {
  #head_anim {
    height: 0;
    padding-bottom: 62.2254758419%;
    background-size: contain;
    margin: 0 auto;
    font-size: 0em; }

  .header_anim li {
    opacity: 0;
    animation: header_anim 12s linear infinite 0s;
    height: 0;
    padding-bottom: 62.2254758419%;
    background-size: contain; }

  .header_anim li:nth-child(1) {
    background: url("../images/header_bg01.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 62.2254758419%;
    background-size: contain; }

  .header_anim li:nth-child(2) {
    background: url("../images/header_bg02.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 62.2254758419%;
    background-size: contain;
    margin-top: -62.2254758419%;
    animation-delay: 3s; }

  .header_anim li:nth-child(3) {
    background: url("../images/header_bg03.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 62.2254758419%;
    background-size: contain;
    margin-top: -62.2254758419%;
    animation-delay: 6s; }

  .header_anim li:nth-child(4) {
    background: url("../images/header_bg04.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 62.2254758419%;
    background-size: contain;
    margin-top: -62.2254758419%;
    animation-delay: 9s; } }
@media (max-width: 767px) {
  #head_anim {
    height: 0;
    padding-bottom: 113.3333333333%;
    background-size: contain;
    margin: 0 auto;
    font-size: 0em; }

  .header_anim li {
    opacity: 0;
    animation: header_anim 12s linear infinite 0s;
    height: 0;
    padding-bottom: 113.3333333333%;
    background-size: contain; }

  .header_anim li:nth-child(1) {
    background: url("../images/header_bg01.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 113.3333333333%;
    background-size: contain; }

  .header_anim li:nth-child(2) {
    background: url("../images/header_bg02.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 113.3333333333%;
    background-size: contain;
    margin-top: -113.3333333333%;
    animation-delay: 3s; }

  .header_anim li:nth-child(3) {
    background: url("../images/header_bg03.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 113.3333333333%;
    background-size: contain;
    margin-top: -113.3333333333%;
    animation-delay: 6s; }

  .header_anim li:nth-child(4) {
    background: url("../images/header_bg04.jpg") center top no-repeat;
    height: 0;
    padding-bottom: 113.3333333333%;
    background-size: contain;
    margin-top: -113.3333333333%;
    animation-delay: 9s; } }
@keyframes header_anim {
  0% {
    opacity: 0; }
  12.5% {
    opacity: 1; }
  25% {
    opacity: 1; }
  37.5% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-webkit-keyframes header_anim {
  0% {
    opacity: 0; }
  12.5% {
    opacity: 1; }
  25% {
    opacity: 1; }
  37.5% {
    opacity: 0; }
  100% {
    opacity: 0; } }