/*ヘッダーフッター消したの*/
.l-header {
display: none;
}
/*全体的なこと*/
body {
min-width: 1200px;
width: 100%;
word-break: break-word;
letter-spacing: .1em;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.5;
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
.text_area {
margin: 20px 0;
}
.sp {
display: none;
}
header {
position: fixed;
z-index: 3;
top: 0;
width: 100%;
background-color: #fff;
padding: 5px;
align-items: center;
}
.logo img {
height: 40px;
}
footer {
text-align: center;
padding: 10px 0 120px;
background: linear-gradient(45deg, #a6e3f9, #ff9ad4);
}
.lp {
max-width: 480px;
margin: 0 auto;
border: 1px solid #000;
background: #fff;
}
.text_area p {
font-size: 1.5rem;
line-height: 2.5rem;
text-align: left;
}
a{
 display: block;
}
@media screen and (max-width:767px) {
/*全体的なこと*/
.pc {
display: none;
}
.sp {
display: block;
}
.lp {
width: 100%;
margin: 0 auto;
border: 0px solid #000;
}
body {
min-width: 100%;
}
}
/*背景*/
.lp-bg {
position: fixed;
width: 100%;
height: 100vh;
background: url(/lp/pet/img/lp-pet-bg.png) center top repeat-x;
background-size: auto 100vh;
animation: scroll-anim 90s linear infinite;
z-index: -1;
}
@keyframes scroll-anim {
100% {
background-position: 300% 0;
}
}
/*TOP画像*/
.lpimg {
width: 100%;
text-align: center;
height: auto;
margin-top: 50px;
}
.lpimg img{
width: 100%; 
}
/*ポイント*/
.point_bg{
position: relative;
margin: 0 auto;
padding: 20px 4% 20px 4%;
min-width: 100%;
width: 100%;
background-color: #ffe0e9;
}
.point{
width: 100%; 
text-align: center;
height: auto;
}
.point img{
width: 100%; 
}
h3.third_point {
font-weight: bold;
font-size: 2.1rem;
line-height: 3rem;
color: #FF861E;
text-align: left;
width: 85%;
}
.text_area {
margin: 20px 0;
}
.flame {
text-align: center;
background-color: #FFF;
position: relative;
padding: 30px 15px 10px 15px;
margin-top: 25px;
}
.point_no {
margin: 0 auto;
max-width: 15%;
height: 100%;
}
.point_img{
margin: 0 auto;
width: 100%;
}
.point-title{
display: flex;
}
/*資格*/
.shikaku {
margin-bottom: 20px;
}
.shikaku_title {
padding: 0.5em 1em;
margin: 2em 0 1em;
color: #2c2c2f;
background: #FFFFFF;
font-size: 2rem;
font-weight: bold;
}
.shikaku_p{
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.shikaku li{
list-style-type: disc; 
  list-style-position: inside; 
  padding-left: 15px; 
}
/*動画*/
.movie_bg{
position: relative;
margin: 0 auto;
padding: 20px 4% 20px 4%;
min-width: 100%;
width: 100%;
background-color: #f0f0f0;
}
.movie_title {
width: 100%;
text-align: center;
margin: 10px 0 20px 0;
}
.movie_title img {
width: 100%;
}
.movie_bg p{
font-weight: bold;
font-size: 2rem;
margin-bottom: 20px;
text-align: center;
}
iframe {
width: 100%;
height: 260px;
padding: 20px;
}
@media screen and (max-width:767px) {
iframe {
height: 250px;
padding: 20px 0px;
}
}
/*OC*/
.oc_bg{
position: relative;
margin: 0 auto;
padding: 20px 4% 30px 4%;
min-width: 100%;
width: 100%;
background-color: #FFDDEE;
}
.oc_title{
width: 100%;
ext-align: center;
margin: 10px 0 20px 0;
}
.oc_title img{
width: 100%; 
}
.thumb_cont_list.column_2 {
margin: 0 auto -20px;
}
.thumb_cont_list.column_2 > li {
margin-bottom: 24px;
}
.oc_bg img {
width: 100%;
}
/*ボタン*/
.btn_bg{
position: relative;
margin: 0 auto;
padding: 10px 4%;
}
.lp_btn {
display: block;
width: 90%;
margin: 0 auto;
}
.lp_btn img {
width: 100%;
margin: 0 auto;
padding: 10px;
}
/*フローティング*/
.floating-banner {
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
width: 480px;
}
.floating-button {
display: block;
width: 50%;
}
.floating-banner__image {
max-width: 100%;
}
@media only screen and (max-width: 767px) {
.floating-banner {
width: 100%;
}
}
/*ポップアップ*/
.pop1 {
width: 100px;
position: absolute;
top: 600px;
right: 0px ;
z-index: 2;
}
.pop2 {
width: 100px;
position: absolute;
top: 445px;
left: 0px;
z-index: 2;
}
.pop3 {
width: 100px;
position: absolute;
top: 625px;
right: 0px ;
z-index: 2;
}
@media screen and (max-width:767px) {
.pop1 {
top: 530px;
}
.pop2 {
top: 400px;
}
.pop3 {
top: 511px;
}
}
/*アニメーション*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fadeUpTrigger{
opacity: 0;
}