@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}
body{
    background-color: #007AFF;
    position: relative;
    font-feature-settings: "palt";
}

.ong{
    position: absolute;
    top: 101vw;
    left: -47vw;
    font-size: 3.5vw;
    color: #F7CCDB;
    opacity: 0.5;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    transform: rotate(90deg);
}
/*ヘッダー*/
header {
    display: flex;
    align-items: center;
    padding: 1%;
    justify-content: space-between;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #007AFF;
    
}
h1{
    line-height: 0;
}
h1 a{
    font-size: 2vw;
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
    color: 	#F7CCDB;
    text-decoration: none;
   
}


nav {
    margin-left: auto;
}

nav ul {
    display: flex;
    list-style-type: none;
   
}

nav ul li {
    margin-left: 2vw;
}


nav ul li a {
     line-height: 0;
    font-size: 0.9vw;
    text-decoration: none;
    color:#F7CCDB;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}



/*メインビジュアル*/
.box{
    display: block;
    height: 55vw;
    background-image: url(./images/onlybliss.png);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    &::before {
        content: "BLISS ONG";
        color: #F7CCDB;
        font: 700 15vw "Poppins",sans-serif;
        display: grid;
        place-items: center;
        position: absolute;
        inset: 0;
        background-color: #007AFF;
        background-image: url(./images/blis_ong.JPG);
        background-size: cover;
        background-position: center;
        z-index: -1;
        height: 55vw;
    }
}
main{
    background-color: #0551DF;
    height: 110vw;
    z-index: 2;
}
.yes_section{
   
    width: 100%;
    display: flex;
   justify-content: space-between;
    align-items: center;
   
}

.yes_img{
    width: 18%;
    height: 20vw;
    transform: rotate(-21deg);
}
.yes_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.7vw solid #F7CCDB;
}
.yes_img_two{
    margin-right: 8vw;
    width: 13%;
    height: 10vw;
    transform: rotate(21deg);
}
.yes_img_two img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.5vw solid #F7CCDB;
}
.shelikes{
    width: 80%;
    height: 30vw;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.thanksjesus,
.impatus_area{
    width: 80%;
    height: 30vw;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.firstchurch{
    width: 40%;
    height: 60%;
    border: 1.3vw solid #F7CCDB ;
    transform: rotate(-10deg);
    box-shadow:
    0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076),
    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);
    position: relative;

}
.icecream{
    z-index: 100;
    position: absolute;
    top: 80%;
    left: 10%;
    width: 17vw;
    height: 15vw;
    border: 1.3vw solid #F7CCDB;
    transform: rotate(-20deg);
    box-shadow:
    0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076),
    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);
    
}
.icecream img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    filter:  brightness(100%) hue-rotate(-15deg);
}
.firstchurch img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
}
.takingapicture,
.brokenlegs{
    width: 40%;
    height: 60%;
    border: 1.3vw solid #F7CCDB ;
    transform: rotate(-5deg);
    box-shadow:
    0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076),
    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);
}

.brokenlegs{
    width: 40%;
    height: 60%;
    border: 1.3vw solid #F7CCDB ;
    transform: rotate(10deg);
    box-shadow:
    0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076),
    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);
}
.brokenlegs img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
}
.leg{
    position: absolute;
    top: 62%;
    left: 55%;
    width: 9vw;
    height: 13vw;
    border: 1.3vw solid #F7CCDB;
    transform: rotate(27deg);
    box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 0 5px 6.1px rgba(0, 0, 0, 0.076), 0 10.1px 11.4px rgba(0, 0, 0, 0.086), 0 19.2px 19.8px rgba(0, 0, 0, 0.092), 0 38.4px 34.8px rgba(0, 0, 0, 0.1), 0 101px 74px rgba(0, 0, 0, 0.13);

}
.leg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*object-position: center -23vw;*/
    filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
    
}
.takingapicture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center -23vw;
    filter: sepia(50%) contrast(150%) saturate(200%) brightness(200%) hue-rotate(-15deg);
    
}
.blissintro{
    width: 50%;
    color: #F7CCDB;
}
.blissintro h2{
    font-size: 2vw;
}
.blissintro p{
    font-size: 1.25vw;
}
.testimony{
    width: 60%;
   
}
.testimony h2{
    font-size: 2vw;
    margin-bottom: 1vw;
}
.impetus{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 11vw;
    position: relative;
    padding: 3% 0;
}
.impetus_words{
    position: absolute;
    top: 50%;
    left: 0%;
}
.impetus_image{
    position: absolute;
    top: 29%;
    left: 56%;
    width: 31%;
    height: 107%;
    transform: rotate(10deg);

}

.impetus_image2{
    position: absolute;
    top: 74%;
    left: 53%;
    width: 13%;
    height: 77%;
    transform: rotate(-20deg);

}


.impetus_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.7vw solid #f7ccdb;
}

.impetus_image2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.7vw solid #f7ccdb;
}
h2{
    margin-bottom: 1vw;
    font-size: 2vw;
}
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .scroll-infinity {
        margin: 3% 0;
    }
    .scroll-infinity__wrap {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--left {
      animation: infinity-scroll-left 40s infinite linear 0.5s both;/* 「both」とは、アニメーションが終了した後に、アニメーション開始前の状態と終了後の状態、両方を保持するということ */
    }
    .scroll-infinity__item {
      width: calc(100vw / 6);
      height: 10vw;
      margin-right: 1vw;
      border: 1vw solid #F7CCDB;
    }
    .scroll-infinity__item>img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(150%);
    }
/*フッター*/
footer {
    padding: 0.6% 0%;
    background-color: #F7CCDB;
}

footer p {
    text-align: center;
    font-size: 1vw;
    color: #0551DF;
}