/*
Theme Name: child-lp-smp-both
Template: project-smp
*/

/* -----------------------------------------------------------
add
----------------------------------------------------------- */
body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
.text-primary {
    color: #02deff;
}
.bg-primary {
    background: #02deff;
}
.bg-secondary {
    background: #2a5f7f;
}
.bg-blue {
    background: #293581;
}
.bg-green {
    background: #19754e;
}
.bg-blue-light {
    background: #dbf1ff;
}
.bg-yellow-light {
    background: #ffffe7;
}
.bg-gray-dark {
    background: #241716;
}
.font-arial {
    font-family: 'DIN Condensed', 'Arial Narrow', "Arial", sans-serif;
}
.aspect-square {
    aspect-ratio: 1 / 1;
}
.aspect-\[2\/1\] {
    aspect-ratio: 2 / 1;
}
.h-\[calc\(100\%_+_1rem)\] {
    height: calc(100% + 1rem);
}
.h-\[calc\(100\%_\+_1rem\)\] {
    height: calc(100% + 1rem);
  }
/* -----------------------------------------------------------
コンバージョンボタン
----------------------------------------------------------- */
/* ボタンの光沢 */
.is-reflection a {
    overflow: hidden;
}
.is-reflection a:after {
    -moz-animation: is-reflection 4s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -ms-animation: is-reflection 4s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -o-animation: is-reflection 4s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -webkit-animation: is-reflection 4s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    animation: is-reflection 4s ease-in-out infinite;
    background-color: #fff;
    content: " ";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -180px;
    transform: rotate(45deg);
    width: 30px;
}
@keyframes is-reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes is-reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* ボタンをバウンドさせる */
.is-bounce {
    animation: bounce 4s infinite;
    -moz-animation: bounce 4s infinite;
    -webkit-animation: bounce 4s infinite;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
@-webkit-keyframes bounce {
    0%, 4%, 10%, 18%, 100% {-webkit-transform: translateY(0);}
    5% {-webkit-transform: translateY(-6px);}
    12% {-webkit-transform: translateY(-4px);}
}
@keyframes bounce {
    20%, 24%, 30%, 34%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
    25% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
    32% {-webkit-transform: translateY(-4px);transform: translateY(-4px);}
}