@charset "utf-8";
* { margin: 0; padding: 0; line-height:1.8em; font-size: 15px;}


.loading {
    display: none;
    max-width: 100%;
    min-width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  background: #f8f6e6;
  z-index: 99998;
    background-size: cover;
}

/* Loading画像中央配置　*/
.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@-webkit-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

.ball-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -10px; }
  .ball-spin-fade-loader > div:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
            animation: ball-spin-fade-loader 1s -0.96s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
            animation: ball-spin-fade-loader 1s -0.84s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
            animation: ball-spin-fade-loader 1s -0.72s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
            animation: ball-spin-fade-loader 1s -0.6s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
            animation: ball-spin-fade-loader 1s -0.48s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
            animation: ball-spin-fade-loader 1s -0.36s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
            animation: ball-spin-fade-loader 1s -0.24s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
            animation: ball-spin-fade-loader 1s -0.12s infinite linear; }
  .ball-spin-fade-loader > div {
    background-color: #c2bc89;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute; }




#header_photo{
                                height: 65vw;
                                max-height: 370px;
                                width: 100%;
                                position: relative;
}
@media screen and (min-width:767px){
#header_photo{
                                width: 100%;
                                height: 400px;
}
}
@media screen and (min-width:990px){
#header_photo{
                                height: 48vw;
                                max-height: 750px;
                                width: 100%;
}
#header_photo div {
                                margin: 0 auto
}
}

.image {
                                position: absolute;
                                top: 0;
                                left: 0;
                                bottom: 0;
                                right: 0;
                                opacity: 0;
                                background-size: contain;
                                background-position: top center;
                                background-repeat: no-repeat;

                                animation: image-switch-animation 25s infinite;
}

.src1 {
  background-image: url("../images/header_photo_d_sp.jpg");
}
.src2 {
  background-image: url("../images/header_photo_e_sp.jpg");
}
.src3 {
  background-image: url("../images/header_photo_d_sp.jpg");
}
.src4 {
  background-image: url("../images/header_photo_e_sp.jpg");
}
.src5 {
  background-image: url("../images/header_photo_d_sp.jpg");
}
@media screen and (min-width:767px){
.src1 {
  background-image: url("../images/header_photo_d_pc.jpg");
}
.src2 {
  background-image: url("../images/header_photo_e_pc.jpg");
}
.src3 {
  background-image: url("../images/header_photo_d_pc.jpg");
}
.src4 {
  background-image: url("../images/header_photo_e_pc.jpg");
}
.src5 {
  background-image: url("../images/header_photo_d_pc.jpg");
}
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}