.top-hero-wrap {
    font-family: "Noto Serif JP", serif;
    line-height: 1.5;
    font-size: clamp(15px, 1.04vw, 20px);
    overflow: hidden;
}

.top-hero-wrap__row {
    display: flex;
    gap: 9%;
    background: url(../img/top-hero-bg.jpg) left top / auto no-repeat;

    @media screen and (min-width: 2230px) {
        background-size: 100%;
    }

    @media screen and (max-width: 1680px) {
        gap: 8%;
    }

    @media screen and (max-width: 1280px) {
        gap: 4%;
    }

    @media screen and (max-width: 1000px) {
        flex-direction: column;
    }

    @media screen and (max-width: 480px) {
        background: url(../img/top-hero-bg_sp.png) center top / auto no-repeat;
    }

    .top-hero-wrap__copy {
        flex: 0 0 15.6%;
        padding: 3.1% 0 8.3%;
        background-color: #ea5718;
        writing-mode: vertical-rl;
        display: flex;
        align-items: center;

        @media screen and (max-width: 1680px) {
            padding-right: 10px;
        }

        @media screen and (max-width: 1000px) {
            writing-mode: horizontal-tb;
            display: block;
            text-align: center;
            padding: 10px 0;
        }
        
        .top-hero-wrap__copy-inner {
            position: relative;
            padding-left: 85px;

            @media screen and (max-width: 1000px) {
                padding-left: 0;
                padding-right: 0;
            }
        }

        h2 {
            font-size: clamp(22px, 2.6vw, 50px);
            color: #fff;

            @media screen and (max-width: 1000px) {
                font-size: clamp(22px, 3.6vw, 36px);
            }
        }
        p {
            font-size: clamp(21px, 1.82vw, 35px);
            background-color: #fff;
            padding: 15px 10px 30px;
            border-radius: 100vmax;
            color: #ea5718;
            position: absolute;
            bottom: 0;
            left: 0;

            @media screen and (max-width: 1280px) {
                left: 10px;
            }

            @media screen and (max-width: 1000px) {
                position: static;
                padding: 0;
                background-color: transparent;
                color: #fdeb6c;
                font-size: clamp(21px, 3.2vw, 32px);
            }
        }
    }

    .top-hero-wrap__main-tit-box {
        padding: 20px 3.8%;
        text-align: center;
        position: relative;
        max-width: 1350px;
        margin-top: 15px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 8%;
            aspect-ratio: 2 / 1.4;
            background-color: #ea5718;
            z-index: 1;

            @media screen and (max-width: 480px) {
                aspect-ratio: 1 / 1;
            }
        }

        &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 8%;
            aspect-ratio: 2 / 1.4;
            background-color: #ea5718;
            z-index: 1;

            @media screen and (max-width: 480px) {
                aspect-ratio: 1 / 1;
            }
        }

        .top-hero-wrap__main-tit {
            background-color: #fff;
            padding: 18px 32px;
            position: relative;
            z-index: 2;

            @media screen and (max-width: 480px) {
                padding: 10px;
            }

            h3 {
                font-size: clamp(19px, 3.22vw, 40px);
                border-bottom: 1px solid #ea5718;
                padding-bottom: 10px;
            }
            p {
                font-size: clamp(16px, 2.01vw, 25px);
                margin-top: 10px;
            }
        }
    }

    .top-hero-wrap__main-read {
        text-align: center;
        line-height: 1.75;

        @media screen and (max-width: 728px) {
            padding: 0 10px;
            margin-top: 10px;
        }

        @media screen and (max-width: 560px) {
            text-align: left;
        }

        p {
            @media screen and (max-width: 560px) {
                display: inline;
            }
        }
    }

    .top-hero-wrap__main-row {
        display: flex;
        position: relative;
        margin-top: 40px;
        gap: 1.7%;

        @media screen and (max-width: 1000px) {
            padding: 0 10px;
            flex-direction: column;
            gap: 20px;
        }

        .top-hero-wrap__main-img {
            border: 2px solid #ea5718;
            padding: 20px;
            background-color: #fff;
            flex: 0 1 44.2%;

            @media screen and (max-width: 1000px) {
                border-radius: 10px;
            }

            img {
            width: 100%;
            }

            p {
                text-align: center;
                margin-top: 10px;
            }
        }

        .top-hero-wrap__main-movie {
            padding: 20px;
            border: 2px solid #ea5718;
            background-color: #fff;
            flex: 0 1 27.3%;

            @media screen and (max-width: 1000px) {
                border-radius: 10px;
            }

            video {
                width: 100%;
            }
        }

        .top-hero-wrap__main-comment {
            flex: 0 1 28.5%;
            position: relative;

            @media screen and (max-width: 1280px) {
                padding-right: 10px;
            }

            @media screen and (max-width: 1000px) {
                padding-right: 0;
                margin-top: 20px;
            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: -10px;
                background: url(../img/top-hero-hand-icon.png) center / 100% no-repeat;
                width: 73px;
                aspect-ratio: 1 / 1.3;

                @media screen and (max-width: 1680px) {
                    width: 64px;
                }

                @media screen and (max-width: 1280px) {
                    width: 56px;
                }
                
                @media screen and (max-width: 1000px) {
                    top: -30px;
                    left: 20px;
                    width: 40px;
                }

                @media screen and (max-width: 480px) {
                    left: 10px;
                }
            }

            .top-hero-wrap__main-comment-inner {
            padding: 13.88% 8.33% 8.33% 13.88%;
            width: fit-content;
            position: relative;
            top: 50px;

            /* triangle dimension */
            --a: 90deg; /* angle */
            --h: 1em; /* height */
            --p: 50%; /* triangle position (0%:top 100%:bottom) */
            --b: 1px; /* border width */

            @media screen and (max-width: 1000px) {
                --p: 20%;
            }
            
            clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
              0 max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)),
              calc(-1*var(--h)) var(--p),
              0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)));
            border-image: fill 0//0 var(--h)
              conic-gradient(#ea5718 0 0); /* the border color */

            @media screen and (max-width: 1280px) {
                padding: 12% 7% 7% 12%;
            }

            @media screen and (max-width: 1000px) {
                clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
                  min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 0,
                  var(--p) calc(-1*var(--h)),
                  max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)) 0);
                border-image: fill 0//var(--h) 0
                  conic-gradient(#ffffff 0 0); /* the border color */

                padding: 30px 10px 20px;
                top: 0;
                width: 100%;
            }

            &::before {
                content: "";
                position: absolute;
                z-index: -1;
                inset: 0 var(--b);
                clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
                  0 max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)),
                  calc(-1*var(--h) - var(--b)*(1 - 1/sin(var(--a)/2))) var(--p),
                  0 min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)));
                border-image: fill 0/var(--b) 0/0 var(--h)
                  conic-gradient(#ffffff 0 0); /* the background color */

                  @media screen and (max-width: 1000px) {
                    clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
                      min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 0,
                      var(--p) calc(-1*var(--h) - var(--b)*(1 - 1/sin(var(--a)/2))),
                      max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 0);
                    border-image: fill 0/0 var(--b)/var(--h) 0
                      conic-gradient(#fce6dd 0 0); /* the background color */
                  }
                }
            }

            p > br {
                @media screen and (max-width: 1052px) {
                    display: none;
                }
            }

            a.top-hero-wrap__btn-pc {
                display: block;
                text-align: center;
                margin-top: 75px;

                img {
                    width: 72.8%;

                    @media screen and (max-width: 1680px) {
                        width: 65%;
                    }
                }

                @media screen and (max-width: 1000px) {
                    display: none;
                }
            }
        }
    }
}

a.top-hero-wrap__contact {
    display: block;
    margin: 50px auto 0;
    width: fit-content;

    @media screen and (max-width: 480px) {
        padding: 0 10px;
    }

    img {
        max-width: 100%;
    }
}

.top-hero-wrap__btn-sp {
    display: none;
    text-align: center;
    margin: 50px auto 0;

    @media screen and (max-width: 1000px) {
        display: block;
        padding-bottom: 70px;
        background: url(../img/top-hero-bg_sp.png) center -130% / auto no-repeat;
    }
}