body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: start;
    height: 100vh;
    /* background-color: #f5f5f5; */
    background: linear-gradient(180deg, #dad885 0%, #9c9617 250px, #f5f5f5 250px, #f5f5f5 100%);
    /* background-attachment:fixed; */
}
.shadow-container {
    position: relative;
    display: inline-block;
    margin-top: 100px;
    padding-top: 25px; /* 上部の空きスペースを確保 */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); /* コンテナに影を適用 */
    border-radius: 10px;
    background-color: white;
    min-width: 360px;
    max-width: 800px;
    width:90%
}
.payment-confirmation {
    position: relative;
    /* width: 300px; */
    /* width: 300px; */
    padding: 20px;
    background-color: white;
    text-align: center;
    border-radius: 10px;
}
.payment-confirmation::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: white;
    background-image: url("img/icon.jpg");
    background-size: contain;
    background-position: center;
    border: solid 5px #fff;
}

.payment-confirmation h1 {
    color: #111;
    font-size: 24px;
    margin-bottom: 10px;
}
.payment-confirmation h2 {
    color: #555;
    font-size: 18px;
    margin-bottom: 15px;
}
.payment-confirmation p {
    color: #555;
    margin-bottom: 20px;
}

.payment-confirmation .time {
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
}

.payment-confirmation .amount {
    font-size: 30px;
    color: #111;
    margin-bottom: 20px;
    font-weight: bold;
}

.payment-confirmation .amount span{
    font-weight: normal;
    font-size: 18px;
}

.payment-confirmation .paid {
    /* left: 50%; */
    width: 100px;
    height: 20px;
    padding: 10px;
    border-radius: 25px;
    background-color: rgb(173, 173, 0);
    color: #fff;
    font-weight: bold;
    text-align: center;
    display: inline-block; 
}

.payment-confirmation .line {
    border-top: 1px solid lightgray;
    margin: 20px;
}

.payment-confirmation #content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.payment-confirmation #content.expanded {
    max-height: 1000px; /* 必要に応じて調整 */
}

.payment-confirmation .toggle-text {
    /* padding: 10px 20px; */
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}
.payment-confirmation .highlight {
    color: #2a8fe0; /* ハイライト部分の色（赤） */
    font-weight: bold;
}
.payment-confirmation #content.details {
    text-align: left;
    font-size: 14px;
    color: #777;
}

/* アニメーション定義 */
@keyframes move-background {
    from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }
  @-webkit-keyframes move-background {
    from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }
  
  @-moz-keyframes move-background {    
    from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }
  
      @-webkit-keyframes move-background {
    from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }
  .payment-confirmation #content.details {
    text-align: left;
    font-size: 14px;
    color: #777;
    background-color: #111;
}
.expandableImage {
    width: 100%; /* 親要素の幅に合わせる */
    position: relative;
    background-color: #5f5c8a;
}

.expandableImage img{
    /* width:500px; */
    width: 100%;
    height: auto;
    position: relative;
    /* text-align: center; */
    /* background-color: #111; */
    z-index: 2;
}

.expandableImage .text{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:10%;
    left: 90%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text2{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:13%;
    left: 82%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text3{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:13%;
    left: 77%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text4{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:40%;
    left: 72%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text5{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:10%;
    left: 20%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text6{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:23%;
    left: 18%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.05);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "Nico Moji";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text7{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:38%;
    left: 20%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text8{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:5%;
    left: 10%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.05);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "Nico Moji";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text9{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:40%;
    left: 8%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage .text10{
    writing-mode: vertical-rl;
    position: absolute;/*重ねたい子要素にabsolute*/
    top:40%;
    left: 1%;
    color: #fff;
    font-size: calc(min(90vw, 800px) * 0.03);
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    font-family: "M PLUS Rounded 1c";
    /* font-weight: bold; */
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    z-index: 4;
}

.expandableImage img.fart_front{
    /* width:10000px;
    height: 100%;
    background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
    background-size: 1000px 1000px;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 3;

    -moz-animation:move-background 150s linear infinite;
    -ms-animation:move-background 150s linear infinite;
    -o-animation:move-background 150s linear infinite;
    -webkit-animation:move-background 150s linear infinite;
    animation:move-background 150s linear infinite;
    animation: girl-animation 1.8s ease-in-out infinite alternate-reverse; */
    /* position: fixed; */
    top: 0%;
    left: 0%;
    position: absolute;
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* アスペクト比を保持 */
    /* animation: girl-animation 1.8s ease-in-out infinite alternate-reverse; */
    /* animation:move-frontfart 10s ease-in-out infinite alternate-reverse; */
    animation:move-frontfart 40s linear infinite;
    z-index: 3;
}

.expandableImage img.fart_front2{
    top: 0%;
    left: -100%;
    position: absolute;
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* アスペクト比を保持 */
    /* animation: girl-animation 1.8s ease-in-out infinite alternate-reverse; */
    /* animation:move-frontfart 10s ease-in-out infinite alternate-reverse; */
    animation:move-frontfart 40s linear infinite;
    z-index: 3;
}
.expandableImage img.fart_back{
    top: 0%;
    left: 0%;
    position: absolute;
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* アスペクト比を保持 */
    /* animation: girl-animation 1.8s ease-in-out infinite alternate-reverse; */
    /* animation:move-frontfart 10s ease-in-out infinite alternate-reverse; */
    animation:move-backfart 60s linear infinite;
    z-index: 1;
}
.expandableImage img.fart_back2{
    top: 0%;
    left: -100%;
    position: absolute;
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* アスペクト比を保持 */
    /* animation: girl-animation 1.8s ease-in-out infinite alternate-reverse; */
    /* animation:move-frontfart 10s ease-in-out infinite alternate-reverse; */
    animation:move-backfart 60s linear infinite;
    z-index:1;
}

/* @keyframesの用意 */
@keyframes girl-animation {
    0% {
      transform: translateY(-12px);
    }
    100% {
      transform: translateY(12px);
    }
  }

@keyframes move-frontfart {
    0% {
        /* transform-origin: bottom right 50%; */
        transform: translateX(0%);
    }
    100% {
        /* transform-origin: bottom right 50%; */
        transform: translateX(100%);

    }
}

@keyframes move-backfart {
    0% {
        /* transform-origin: bottom right 50%; */
        transform: translateX(100%);
    }
    100% {
        /* transform-origin: bottom right 50%; */
        transform: translateX(0%);

    }
}


.expandableImage .textanimation{
    font-weight: bold;
    text-shadow:
            3px 3px 3px #000, -3px -3px 3px #000,
           -3px 3px 3px #000,  3px -3px 3px #000;
    /* font-size: calc(min(90vw, 800px) * 0.03);
    font-family:"Times New Roman", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", serif; */
}
@keyframes showTextFromBottom{
0%{
    transform-origin: bottom left;
    /* transform: translateX( 100% ); */
    transform: rotate(90deg);

}
100%{
    /* transform: translateX( 0px ); */
    transform: rotate(0deg);
}
}
.expandableImage .textanimation span{
 animation: showText 3s backwards;
 display: inline-block;
}
.expandableImage .textanimation > span{
  overflow: hidden;
}
.expandableImage .textanimation > span > span{
  animation: showTextFromBottom 0.5s backwards;
}