@charset "UTF-8";
/* CSS Document */
/*reset*/
.u-margin__bottom--100 {
    margin-bottom: 0px;
}
.u-margin__top--60 {
    margin-top: 0px;
}
.p-page_content {
    padding-right: 0px;
    padding-left: 0px;
}
.p-page_content__inner {
    width: 100%;
    margin: 0 auto;
    max-width: none;
}

/* 共通スタイル設定 */
.scroll-container {
  scroll-behavior: smooth;
  overflow-y: scroll;
}
#container .common-w {
    width: 92%;
    margin: 0 auto;
    max-width: 768px;
}
#container img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
#container header .top-img a img {
    opacity: 1.0;
    transition: 0.3s;
}
#container header .top-img a img:hover {
    opacity: 0.5;
}
#container .button a img {
    filter: saturate(1);
    transition: filter 0.3s ease;
}
#container .button a img:hover {
     filter: saturate(1.5);
}

/*header ---------------------------*/
#container header {
    background-color:#b5b5ae;
    background-image: url("../img/pc/header-top-bg.jpg");
    background-repeat: repeat-x;
    background-size: contain;
} 
#container header .top {
    max-width: 1080px;
    margin: 0 auto ;
    width:100%;
    position: relative;
}
#container header .top .top-img {
    max-width: 970px;
    max-height:940px;
    
    max-width: 970px;
    max-height:920px;
    overflow-y: hidden;
    margin: 0 auto;
    width: 100%;
}
#container header .top .heart {
    position: absolute;
    z-index: 3;
    width: 30%;
    max-width: 250px;
    right:5px;
    top:0;
    opacity: 0;   
    animation: fadeUp 0.8s ease 0.5s forwards;
}
#container header .top .title {
    position: absolute;
    z-index: 3;
    left:0;
    bottom:0;
    width: 100%;
    opacity: 0;   
    animation: fadeUp 0.8s ease 1.0s forwards;
}
#container header .top .title img {
    width: 88%;
    max-width: 600px;
}
@media screen and (min-width: 980px) {
    #container header .top .top-img {
    }
}
#container header .header-button {
    position: absolute;
    z-index: 4;
    bottom:0;
    width:100%;
    transform: translate(0%, 50%);
    opacity: 0; 
    animation: fadeUp 0.8s ease 1.5s forwards;
}
#container header .header-button img {
    position: relative;
    max-width:550px;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    animation:bound_header .85s cubic-bezier(.215,.61,.355,1) infinite alternate
}
#container .read {
    opacity: 0;   
    animation: fadeUp 0.8s ease 1.0s forwards;
}
/*section-01 ---------------------------*/
#container .section-01 {
    background-image: linear-gradient(0deg, #dbe3e6, #e5dbcf);
}
#container .section-01 ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
#container .section-01 li {
    width: 48%;
}
#container .section-01 .users-voice {
    padding-bottom: 20px;

}
/*section-02 ---------------------------*/
#container .section-02 {
    background-color: #faf5ef;
}
/*section-03 ---------------------------*/
#container .section-03 {
    margin: 0 auto;
    background-color: #ffffff;

} 
/*section-04 ---------------------------*/
#container .section-04 .common-w {

}
#container .section-04 .footer-title {
    margin: 0 auto;
    background-image: url("../img/pc/footer-img.jpg");
    background-size: cover;
    background-position: center;
    background-color: #e5dbcf
}
@media screen and (min-width: 1340px) {
    #container .section-04 .footer-title {
        background-size: contain;
    }
}
#container .section-04 .footer-items {
    background-image: linear-gradient(0deg, #dbe3e6, #e5dbcf);
    padding-bottom: 15px;
}
#container .section-04 .footer-items .items {
    position: relative;
}
#container .section-04 .footer-items .items .items-title {
    position: absolute;
    z-index: 4;
    top:0;
    width:100%;
    transform: translate(0%, -51.5%);
}
#container .section-04 .footer-items .button {
    max-width:480px;
    margin: 0 auto;
    padding-bottom: 20px;
    -webkit-animation:bound_footer .45s cubic-bezier(.215,.61,.355,1) infinite alternate;
    animation:bound_footer .45s cubic-bezier(.215,.61,.355,1) infinite alternate
}
/*animation ---------------------------*/
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px); 
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bound_header {
    0% {
        -webkit-transform:translateY(60%);
        transform:translateY(60%)
    }
    to {
        -webkit-transform:translateY(49%);
        transform:translateY(49%)
    }
}
@keyframes bound_footer {
    0% {
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    to {
        -webkit-transform:translateY(-15px);
        transform:translateY(-15px)
    }
}