﻿.custom_box{
    position: relative;
}

.custom_box span{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/catch.png);
    background-position: -3% 75%;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 40%;
    pointer-events: none;
    z-index: 1;
}

.bg_color1 {
    background-color: #02c5b5;
}

#contents .con_bg{
        background-color: #e2fefb;
}

#contents .con_wrap.txt_white{
    color: #4c5654;
}

footer{
    background-image: url(./Dup/img/foot.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 50%;
}

#contents h2.con_title{
        color: #018780;
}

.leaf {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.leaf li{
  position: absolute;
  list-style: none;
  top: -50px;
  background: #47ff76;
  border-radius: 0% 70%;
}


@keyframes fall {
  to {
    top: 120%;
  }
}

@keyframes sway1 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(-45deg);
  }
}

@keyframes sway2 {
  from {
    transform: translateX(200px) rotate(-45deg);
  }
  to {
    transform: translateX(0px) rotate(0deg);
  }
}

.leaf li:nth-child(1){
  left: 0%;
  top: -60px;
  width: 24px;
  height: 15px;
  background-color: #ffbf00;
  animation: fall 10s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 0.2s;
}

.leaf li:nth-child(2){
  left: 5%;
  top: -70px;
  width: 13px;
  height: 9px;
  background-color: #009926;
  animation: fall 15s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 0.1s;
}

#contents > div{
    overflow: hidden;
}

.hvr_bg_color3:hover {
    background-color: #ffbe08;
}

#page_title > span.opacity08{
    opacity: 0.95;
}

#page_title p span{
    color: #02c5b5;
}

#page08 .form_wrap{
    display: none;
}

.linkStyle{color: #ffbe08;}

.title_wrap h2 span{
        background-color: #0ec4b4;
}

@media all and (-ms-high-contrast: none){
  
.title_wrap h2 span{
     padding-top: 6px;
}

#page04 .cate_title{
    padding-bottom: 0;
}

}


/* ---------- カスタム ---------- */
@media screen and (max-width: 1560px){

.custom_box span {
    background-size: 700px;
}

}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

.custom_box span {
    top: 47%;
}

footer > div{
    height: auto !important;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#custom{
    height: 90vw !important;
}

.custom_box span {
    background-size: 250px;
    top: 47%;
}

#intro .intro_left {
    padding-top: 60px;
}

.intro_left h1#logo{
    margin-bottom: 40px;
}

.intro_left h1#logo img{
    width:150px;
}



}