html,
body {
    scroll-behavior: smooth;
}

main {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
}

main img {
    width: 100%;
    height: auto;
    display: flex;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

main>article {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

#commitmentBox02 {
    position: relative;
}

#commitmentBox02 video {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0.5%;
    left: 0;
    margin: 0 auto;
    width: 93%;
    height: auto;
}

#commitmentBox03 {
    position: relative;
}

#commitmentBox03 video {
    position: absolute;
    top: 34%;
    right: auto;
    bottom: 42%;
    left: 8%;
    margin: 0 auto;
    width: 53%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
}

#faceline {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

video#video01 {
    position: absolute;
    top: 22%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 86%;
    margin: 0 auto;
    height: auto;
    display: flex;
}

video#video02 {
    position: absolute;
    top: 48%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 86%;
    margin: 0 auto;
    height: auto;
    display: flex;
}

img#baimg01 {
    position: absolute;
    top: 75%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 86%;
    margin: 0 auto;
    height: auto;
    display: flex;
}

details summary {
    list-style-type: none;
}

summary::-webkit-details-marker {
    display: none;
}
#sound{
width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-content:center;
  align-items:center;
  flex-wrap:nowrap;
position:relative;
}

#skincare{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-content:center;
  align-items:center;
  flex-wrap:nowrap;
  position:relative;
}

#skincare video{
    width: 96%;
  height:auto;
    margin: 0 auto;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0%;
    left: 0;
}

#sound video{
width: 93%;
    height: auto;
    margin: 0 auto;
    top: auto;
    right: 0;
    bottom: 4%;
    left: 0;
    position: absolute;
}

#bubble{
  width:100%;
  display:flex;
  flex-direction:colum;
  justify-content:center;
  align-content:center;
  align-items:center;
  flex-wrap:nowrap;
  position:relative;
}

#bubble video:first-of-type{
position: absolute;
    top: auto;
    right: auto;
    bottom: 15%;
    left: 24.5%;
  width:32%;
  margin:0 auto;
  height:auto;
}

#bubble video:last-of-type{
position: absolute;
    top: auto;
    right: 10%;
    bottom: 15%;
    left: auto;
  width:32%;
  margin:0 auto;
  height:auto;
}

#faqBox {
    height: auto;
    min-height: 100%;
    background-color: #f2e9cc;
}

#faqBox_inner {
    width: 96%;
    margin: 0 auto 2%;
}

#faqBox_inner details {
    margin-bottom: 2%;
}


#slideBox {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

#slideBox_inner {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

/*slick*/
/* スライドの動き等速 */
.slider {
    width: 100%;
}

/*slick*/

/*cvエリア*/
.cvBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

.cvBox button,
.cvBox button:link,
.cvBox button:visited,
.cvBox button:hover {
    width: 96%;
    margin: 0 auto;
    display: flex;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 12%;
    left: 0;
    cursor: pointer;
    background: none;
    border: none;
}

.anim-box.poyopoyo {
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
}

@keyframes poyopoyo {

    0%,
    40%,
    60%,
    80% {
        transform: scale(1.0);
    }

    50%,
    70% {
        transform: scale(0.95);
    }
}

.cvBox button img {
    display: flex;
    height: auto;
    width: 100%;
}

.cvBox button.cvNml,
.cvBox button.cvNml:link,
.cvBox button.cvNml:visited,
.cvBox button.cvNml:hover {
    width: 25.6%;
    margin: 0 auto;
    display: flex;
    position: absolute;
    top: auto;
    right: 2%;
    bottom: 16%;
    left: auto;
    cursor: pointer;
}

.cvBox a.cvNml img {
    display: flex;
    height: auto;
    width: 100%;
}

.fadeIn {
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.is-show {
    opacity: 1;
}

.float {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    opacity: 1;
}

.float a,
.float a:link,
.float a:visited,
.float a:hover {
    display: flex;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.float a img {
    width: 100%;
    display: flex;
    height: auto;
}

/*cvエリア*/