@charset "utf-8";


/*--------------------------------------------
ベース
--------------------------------------------*/
html, body {
    height: 100%;
    margin: 0;
}

/*スマホ用ドット背景（safariのセーフティエリアまで表示させるため）*/
@media (max-width: 540px){
    html, body{
        background-color: #bbe8fa;
        background-image: radial-gradient(circle, #cdeef9 1.75px, transparent 1.75px), radial-gradient(circle, #cdeef9 1.75px, transparent 1.75px);
        background-position: 0 0, 4.75px 7.5px;
        background-size: 9.5px 15px;
    }
}

/*PC用ドット背景（fixed）*/
.bkDots{
    position: fixed;
    inset: 0;
    z-index: -100;
    background-color: #bbe8fa;
    background-image: radial-gradient(circle, #cdeef9 2.25px, transparent 2.25px), radial-gradient(circle, #cdeef9 2.25px, transparent 2.25px);
    background-position: 0 0, 5.75px 9.5px;
    background-size: 11.5px 19px;
}

#gogo {
    width: 100%;
    font-family: "Aoto Gothic Medium", "あおとゴシック M", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    text-align: left;
    font-feature-settings: "palt";
    color: #00305B;
    box-sizing: border-box;
    overflow-x: hidden;
}


/*フォント
------------------------------------*/
/*フォント種類*/
.fontDB{ 
    font-family: "Aoto Gothic DemiBold", "あおとゴシック DB"; 
    font-weight: 500;
}
.fontB{ 
    font-family: "Aoto Gothic Bold", "あおとゴシック B"; 
    font-weight: 700;
}

/*フォントサイズ*/
.font35{ font-size: 35px; }
.font28{ font-size: 28px; }
.font20{ font-size: 20px; }
.font14{ font-size: 14px; }
.font13{ font-size: 13px; }
.font12{ font-size: 12px; }

@media (max-width: 540px){
    .font35{ font-size: 30px; }
    .font20{ font-size: 18px; }
}

/*フォントカラー*/
.fontPink{ color: #EC7978; }
.fontBlue{ color: #0079C2; }
.fontGreen{ color: #45B035; }
.fontWhite{ color: #fff; }
.fontLightNavy{ color: #809DB7; }

/*マーカー*/
.fontMarker{ background: linear-gradient(transparent 30%, #FFF8A0 30%); }

/*中央揃え*/
.txtCenter{ text-align: center; }

/*行間*/
.line14{ line-height: 1.4; }

/*インデント*/
.txtIndent{
    text-indent: -1em;
    padding-left: 1em;
}

/*注釈*/
sup{ font-size: 0.6em; }


/* 画像
------------------------------------*/
img{ width: 100%; }


/* 背景
------------------------------------*/
.bkYellow{ background-color: #FFFCEB; }
.bkEmerald{ background-color: #E6FAFA; }
.bkBlue{ background-color: #E7F5FF; }
.bkGreen{ background-color: #E8FCE5; }
.bkPink{ background-color: #F9E5E5; }
.bkWhite{ background-color: #fff; }


/* リンク
------------------------------------*/
a:hover{
  opacity: 0.8;
}

.linkBtn{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #fff;
    border: #00305B 2px solid;
    font-size: 18px;
    text-align: center;
    border-radius: 50px;
    font-family: "Aoto Gothic DemiBold", "あおとゴシック DB"; 
    font-weight: 500;
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 1.4;
}

.linkBtnNavy{
    background-color: #00305B;
    background-image: radial-gradient(circle, #32597C 2.25px, transparent 2.25px), radial-gradient(circle, #32597C 2.25px, transparent 2.25px);
    background-position: 0 0, 6.25px 12.5px;
    background-size: 12.5px 25px;
}

.linkBtnGreen{
    background-color: #45B035;
    background-image: radial-gradient(circle, #6BC05E 2.25px, transparent 2.25px), radial-gradient(circle, #6BC05E 2.25px, transparent 2.25px);
    background-position: 0 0, 6.25px 12.5px;
    background-size: 12.5px 25px;
}

.linkBtnBlue{
    background-color: #0079C2;
    background-image: radial-gradient(circle, #3294CE 2.25px, transparent 2.25px), radial-gradient(circle, #3294CE 2.25px, transparent 2.25px);
    background-position: 0 0, 6.25px 12.5px;
    background-size: 12.5px 25px;
}

/*ショップロゴ*/
.imgShop{
    height: 45px;
    width: auto;
}



/*余白
-----------------------------------*/
.mb40{ margin-bottom: 40px; }
.mb30{ margin-bottom: 30px; }
.mb20{ margin-bottom: 20px; }
.mb15{ margin-bottom: 15px; }
.mb10{ margin-bottom: 10px; }



/*画面幅による表示・非表示
-----------------------------------*/
.hidden1000{ display: block; } 
.display1000{ display: none; }
.hidden540{ display: block; } 
.display540{ display: none; } 
.display400{ display: none; } 

@media (max-width: 1000px){ 
  .hidden1000{ display: none; } /*1000px以下は非表示*/
  .display1000{ display: block; } /*1000px以下は表示*/
}

@media (max-width: 540px){
  .hidden540{ display: none; } 
  .display540{ display: block; } 
}

@media (max-width: 400px){
  .display400{ display: block; } 
}




/*--------------------------------------------
PC固定
--------------------------------------------*/
/*55thロゴ
--------------------------------------------*/
.pcFix-55thLogo-area{
    position: fixed;
    width: calc((100vw - 540px) / 2);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.pcFix-55thLogo{
    display: block;
    width: 210px;
    margin: 0 auto;
}

@media (max-height: 800px){
  .pcFix-55thLogo{
    width: 180px;
  }
}


/*メニュー
--------------------------------------------*/
.menu{
    position: fixed;
    width: calc((100vw - 540px) / 2);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.menuInner{
    width: 100%;
    text-align: center;
}

.menu .pcFix-yashinomiLogo{
    display: block;
    width: 130px;
    margin: 0 auto 30px;
}

.menu ul{
    margin-top: 25px;
}

.menu ul li a{
    display: block;
    width: 180px;
    padding: 15px 20px;
    border-radius: 15px;
    border: #00305B 2px solid;
    text-align: center;
    margin: 0 auto;
    line-height: 1.4;
}

.menu ul li:nth-child(1), .menu ul li:nth-child(5), .menu ul li:nth-child(9){
    transform: translateX(-20px);
}

.menu ul li:nth-child(3), .menu ul li:nth-child(7), .menu ul li:nth-child(11){
    transform: translateX(20px);
}

.menu ul li a.flag{
    position: relative;
}

.menu ul li a.flag::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 31px;
    top: -30px;
    left: 10px;
    background-image: url(/themes/yashinomi/55th/images/menuFlag.svg);
    background-repeat: no-repeat;
}

.menu ul li img.road{
    display: block;
    width: 100px;
    margin: 0 auto;
}

/*非公開コンテンツのリンク　⚠️公開のタイミングでここも更新*/
.noLink{
    pointer-events: none;
}

.menu ul li .bkGreen{
    background-color: #96A294;
    position: relative;
}

.menu ul li .bkPink{
    background-color: #A29393;
    position: relative;
}

.menu ul li .bkGreen::after,
.menu ul li .bkPink::after{
    content: "";
    position: absolute;
    width: 60px;
    height: 28px;
    top: -15px;
    right: -10px;
    background-repeat: no-repeat;
    background-size: cover;
}

.menu ul li .bkGreen::after{
    background-image: url(/themes/yashinomi/55th/images/comingsoon-green.png);
}

.menu ul li .bkPink::after{
    background-image: url(/themes/yashinomi/55th/images/comingsoon-pink.png);
}


/*これ以下で周年ロゴを小さく*/
@media (max-width: 1200px){
    .pcFix-55thLogo{
        width: 180px;
    }
}

/*この間だけメニューのサイズを調整*/
@media (max-width: 1200px) and (min-width: 1001px){
    .menu ul li a {
        width: 130px;
        padding: 12px 12px;
    }
}


@media (max-width: 1000px){
    .menu{
        position: fixed;
        inset: 0;
        width: 100%;
        transform: translateY(-150%);
        transition: 0.4s;
        z-index: 150;
        background-image: url(/themes/yashinomi/55th/images/bk-sea.svg);
        background-repeat: no-repeat;
        background-size: cover;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
    }

    .menu.active{
        transform: translateY(0);
    }

    .menuInner{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-height: 800px){
    .menuPC{
    top: 0;
    transform: none;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .menuPC .menuInner{
    margin: 120px 0;
  }

    .menuInner{
        position: relative;
        margin: 30px 0 60px;
    }
}


/*ハンバーガーメニュー
--------------------------------------------*/
/* ハンバーガーボタン */
.menu-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #002b5c;
    cursor: pointer;
    z-index: 500;
}

.menu-btn span {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    background: #002b5c;
    transform: translateX(-50%);
    transition: 0.3s;
}

.menu-btn span:nth-child(1) { top: 16px; }
.menu-btn span:nth-child(2) { top: 24px; }
.menu-btn span:nth-child(3) { top: 32px; }


/* × に変形 */
.menu-btn.active span:nth-child(1) {
    top: 24px;
    transform: translateX(-50%) rotate(45deg);
 }

.menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.menu-btn.active span:nth-child(3) {
    top: 24px;
    transform: translateX(-50%) rotate(-45deg);
}




/*固定イラスト
--------------------------------------------*/
.pcFix-illust img{
    position: fixed;
}

.pcFix-cloud1{
    width: 55px;
    top: 100px;
    left: 13%;
}

.pcFix-cloud2{
    width: 60px;
    top: 160px;
    left: 13%;
}

.pcFix-cloud3{
    width: 55px;
    top: 30px;
    right: 13%;
}

.pcFix-cloud4{
    width: 55px;
    top: 140px;
    right: 13%;
}

.pcFix-kamomeLeft{
    width: 50px;
    top: 50px;
    left: 120px;
}

.pcFix-kamomeRight{
    width: 50px;
    top: 80px;
    right: 140px;
}

.pcFix-island{
    width: 175px;
    bottom: 70px;
    left: 60px;
}

.pcFix-wave1{
    width: 75px;
    bottom: 45px;
    left: 110px;
}

.pcFix-wave2{
    width: 65px;
    bottom: 58px;
    left: 110px;
}

.pcFix-truth{
    width: 55px;
    bottom: 40px;
    right: 70px;
}



/*--------------------------------------------
コンテンツ部分（共通）
--------------------------------------------*/
/*スクロール部分*/
#scroll{
    max-width: 540px;
    margin: 0 auto;
}

/*コンテナ*/
.container{
    width: 90%;
    margin: 0 auto;
}

/*コンテンツ背景*/
.contArea{
    padding: 60px 40px;
    border-radius: 40px;
    position: relative;
}

@media (max-width: 540px){
    .contArea{
        padding: 50px 30px;
    }
}

/*コンテンツ見出し*/
.contHead{
    text-align: center;
    line-height: 1.4;
}

.contHeadTop{
    display: block;
    text-align: center;
    line-height: 1.4;
}

/*道 画像*/
.imgRoad{
    display: block;
}

/*縦向き文字*/
.contEn{
    position: absolute;
    top: 25px;
    left: 40px;
    transform-origin: top left;
    transform: rotate(90deg);
}

/*区切り線*/
.borderBottom{
    border-bottom: #00305B 2px solid;
    margin-bottom: 50px;
    padding-bottom: 50px;
}

/*白ドット背景*/
.dotBk {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #f0f2f6 2.25px, transparent 2.25px), radial-gradient(circle, #f0f2f6 2.25px, transparent 2.25px);
    background-position: 0 0, 6.25px 12.5px;
    background-size: 12.5px 25px;
    padding: 30px;
    border-radius: 30px;
}



/*--------------------------------------------
コンテンツ
--------------------------------------------*/

/*mv
--------------------------------------------*/
.mvInner{
    position: relative;
}

.mvJack{
    position: absolute;
    width: 39%;
    bottom: 9%;
    left: 9%;
}

.mvJill{
    position: absolute;
    width: 32%;
    top: 37%;
    right: 10%;
}

.mv-55thLogo{
    position: absolute;
    width: 20%;
    top: 2%;
    left: 16%;
}

.mv-yashinomiLogo{
    position: absolute;
    width: 13%;
    top: 1.2%;
    left: 2.2%;
}

.mvShip{
    position: absolute;
    width: 18%;
    top: 26%;
    right: 8%;
}

.mvFish{
    position: absolute;
    width: 7%;
    top: 37%;
    right: 3%;
}




/*メッセージ
--------------------------------------------*/
#message{
    text-align: center;
    width: 90%;
    margin: 0 auto 30px;
}

#message .gogoLogo{
    display: inline-block;
    width: 180px;
}

#message .messageFlag{
    margin-top: 50px;
}


/*ヤシノミ洗剤とは
--------------------------------------------*/
#about .imgOsamu{
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(calc(-100% + 25px));
}


/*ナビゲーター
--------------------------------------------*/
#navigator .osamuLogo{
    display: block;
    width: 90%;
    margin: 0 auto 30px;
}

.navigatorFlower{
    position: absolute;
    width: 85px;
    top: 0;
    left: 20px;
    transform: translateY(calc(-100%));
}

@media (max-width: 540px){
    #navigator .osamuLogo{
        width: 100%;
    }

    .navigatorFlower{
        width: 20%;
    }
}


/*海の未来にGOGO！
--------------------------------------------*/
#sea .dotBk{
    text-align: center;
}

.blueBkHead{
    background-color: #0079C2;
    border-radius: 10px;
    width: 180px;
    padding: 5px 0;
    margin: 0 auto 15px;
}

#sea .imgOsamu1{
    position: absolute;
    top: 0;
    transform: translateY(calc(-100%));
    left: 60px;
    width: 140px;
}

#sea .imgOsamu2{
    position: absolute;
    top: -150px;
    left: 200px;
    width: 50px;
}

#sea .imgOsamu3{
    position: absolute;
    top: -80px;
    left: 200px;
    width: 50px;
}

#sea .imgOsamu4{
    position: absolute;
    top: 0;
    transform: translateY(calc(-100% + 40px));
    right: 30px;
    width: 190px;
}

@media (max-width: 540px){
    #sea .imgOsamu1{
        width: 100px;
        left: 30px;
    }

    #sea .imgOsamu2 {
        top: -110px;
        left: 100px;
        width: 40px;
    }

    #sea .imgOsamu3 {
        top: -70px;
        left: 120px;
        width: 40px;
    }

    #sea .imgOsamu4{
        width: 43%;
        right: 10px;
    }
}



/*森の未来にGOGO！
--------------------------------------------*/
#forest .imgOsamu1{
    position: absolute;
    top: 0;
    transform: translateY(calc(-100%));
    left: 30px;
    width: 165px;
}

#forest .imgOsamu2{
    position: absolute;
    top: -60px;
    width: 90px;
    transform: translateX(-100%);
}


#forest .imgOsamu3{
    position: absolute;
    top: 0;
    transform: translateY(calc(-100% + 35px));
    right: 60px;
    width: 165px;
}



@media (max-width: 540px){
    #forest .imgOsamu1{
        width: 125px;
    }

    #forest .imgOsamu2{
        width: 70px;
        top: -45px;
    }

    #forest .imgOsamu3{
        width: 38%;
        right: 20px;
    }
}



/*みんなの未来にGOGO！
--------------------------------------------*/
.silhouetteArea{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.speechBubble {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff7e6;
  margin-right: 20px;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent transparent #fff7e6;
  translate: 100% calc(-50% - 0.4px);
  transform: skew(0, 25deg);
  transform-origin: left;
}

.silhouetteImg{
    width: 110px;
}

#osamu .imgOsamu1{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(
        calc(-50% - 80px),
        calc(-100% + 35px)
    );
    width: 160px;
}

#osamu .imgOsamu2{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(
        calc(-50% + 90px),
        calc(-100% + 30px)
    );
    width: 170px;
}

@media (max-width: 540px){
    #osamu .imgOsamu1{
        width: 38%;
    }

    #osamu .imgOsamu2{
        width: 41%;
    }
}



/*カートをひくジル
--------------------------------------------*/
#shop .imgOsamu1{
    position: absolute;
    top: -140px;
    width: 210px;
    transform: translateX(100%);
}

@media (max-width: 540px){
    #shop .imgOsamu1{
        width: 180px;
        top: -110px;
    }
}


/*オサムコピーライト
--------------------------------------------*/
#copyright.contArea{
    padding: 30px;
}


/*フッター
--------------------------------------------*/
footer.contArea{
    padding: 30px;
}

footer .linkArea{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}




/*--------------------------------------------
アニメーション
--------------------------------------------*/

/*共通
--------------------------------------------*/
/*フェードイン*/
.animefadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animefadeIn.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/*傾きアニメーション*/
.animeOsamuTilt1{
    animation: animeOsamuTilt1 1s ease-in-out infinite alternate;
    transform-origin: center center;
    will-change: transform;
}

@keyframes animeOsamuTilt1 {
  0% {
    transform: rotate(-3deg);
  }
  5% {
    transform: rotate(-3deg);
  }
  95% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

.animeOsamuTilt2{
    animation: animeOsamuTilt2 1s ease-in-out infinite alternate;
    transform-origin: center center;
    will-change: transform;
}

@keyframes animeOsamuTilt2 {
  0% {
    transform: rotate(3deg);
  }
  5% {
    transform: rotate(3deg);
  }
  95% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}


/*mv
--------------------------------------------*/
/* 共通初期 */
.fadeStep {
  opacity: 0;
}

/* フェード用初期 */
.fadeStep.fade {
  transform: translateY(20px);
}

/* フェード表示 */
.fadeStep.fade.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ズーム用初期 */
.fadeStep.zoom {
  transform: scale(0.5);
}

/* ズーム表示 */
.fadeStep.zoom.is-visible {
    opacity: 1;
    animation: zoomPoyon 1.1s ease-out forwards;
}

@keyframes zoomPoyon {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.fadeStep img {
  opacity: 0;
}

.fadeStep.is-visible img {
  opacity: 1;
}


/*船 アニメーション　※未使用　保険で残す*/
.floatingship{
  animation: floatingship 5s ease-in-out infinite alternate-reverse;
}

@keyframes floatingship{
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(10%);
  }
}

/*魚 アニメーション　※未使用　保険で残す*/
.animeFish {
  animation: animeFish 1.5s ease-in-out infinite;
}

@keyframes animeFish {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }

  /* 跳ね上がり */
  25% {
    transform: translateX(20px) translateY(-50px) rotate(-12deg);
  }

  /* 落下 */
  45% {
    transform: translateX(35px) translateY(10px) rotate(8deg);
  }

  /* 着水後の揺れ */
  65% {
    transform: translateX(45px) translateY(-10px) rotate(-3deg);
  }

  100% {
    transform: translateX(60px) translateY(0) rotate(0deg);
  }
}






/*PC固定部分
--------------------------------------------*/
/*カモメ アニメーション*/
.floatingKamomeLeft{
  animation: floatingKamomeLeft 2.5s ease-in-out infinite alternate-reverse;
}

@keyframes floatingKamomeLeft{
  0% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(80%);
  }
}

.floatingKamomeRight{
  animation: floatingKamomeRight 2s ease-in-out infinite alternate-reverse;
}

@keyframes floatingKamomeRight{
  0% {
    transform: translateY(80%);
  }
  100% {
    transform: translateY(-80%);
  }
}


/*雲 アニメーション*/
.floatingCloud1{
  animation: floatingCloud1 8s ease-in-out infinite alternate-reverse;
}

@keyframes floatingCloud1{
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(200%);
  }
}

.floatingCloud2{
  animation: floatingCloud2 8s ease-in-out infinite alternate-reverse;
}

@keyframes floatingCloud2{
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(-200%);
  }
}


/*波 アニメーション*/
.floatingWave1{
  animation: floatingWave1 5s ease-in-out infinite alternate-reverse;
}

@keyframes floatingWave1{
  0% {
    transform: translateX(-40%);
  }
  100% {
    transform: translateX(40%);
  }
}

.floatingWave2{
  animation: floatingWave2 5s ease-in-out infinite alternate-reverse;
}

@keyframes floatingWave2{
  0% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(-40%);
  }
}


/*海の未来
--------------------------------------------*/
/*人魚ジル アニメーション*/
.floatingSeaJill{
  animation: floatingSeaJill 3s ease-in-out infinite alternate-reverse;
}

@keyframes floatingSeaJill{
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

/*魚 アニメーション*/
.animeFish-wrap1{
  animation: swimMove1 5s linear infinite alternate; /* 進行方向の移動（左右） */
}

.animeFish-wrap2{
  animation: swimMove2 5s linear infinite alternate; /* 進行方向の移動（左右） */
}

.animeFish{
  animation: swimBody 1s ease-in-out infinite; /* 体のくねり */
  will-change: transform;
}

@keyframes swimMove1 { /* 左右に泳ぐ1 */
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes swimMove2 { /* 左右に泳ぐ2 */
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes swimBody { /* 体をくねらせる */
  0% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(3deg);
  }
}



/*森の未来（ゾウ）
--------------------------------------------*/
#forest .imgOsamu2.is-active {
    animation: slide-in-right 2s ease-out forwards;
}

@keyframes slide-in-right {
  from {
    transform: translateX(-90%);
  }
  to {
    transform: translateX(10%);
  }
}


/*カートをひくジル
--------------------------------------------*/
#shop .imgOsamu1.is-active {
  animation: slide-in-left 3s ease-out forwards;
}

@keyframes slide-in-left {
  from {
    transform: translateX(90%);
  }
  to {
    transform: translateX(10%);
  }
}