body, main, section, div, footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    color: #333333;
}
body{
    overflow-x: hidden;
}
p{
    font-size: 16px;
    line-height: 1.5;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
header{
    width: 100%;
    height: 22px;
    padding-top: 32px;
    max-width: 874px;
    position: absolute;
    z-index: 10;
    top: 0;
}
section{
    padding: 40px 0;
    position: relative;
}
h2{
    display: inline-block; /* 見出しの幅に合わせる場合 */
    width: 100%;
    margin-bottom: 40px;
}
.h2text, .footerLogoShoulder{
    display: inline-block;
    background-image: linear-gradient(125deg, #FD9021, #F93030, #F7638D, #9805CD);
    background-clip: text;
    color: transparent;
    width: 100%;
    margin-bottom: 12px;
}
.line-container{
    display: flex;
    align-items: center;
    gap: 0;
    flex-direction: row;
}
.line-short{
    flex-shrink: 0;
    width: 71px;
    height: 2px;
    background-image: linear-gradient(-40deg, #F7638D, #F93030, #FFC219);
}
.line-slash{
    flex-shrink: 0;
    width: 32px;
    height: 2px;
    background-image: linear-gradient(125deg, #FFC219, #F93030, #F7638D, #9805CD);
    transform: rotate(45deg);
    margin: 0;
}
.line-long{
    flex-grow: 1;
    height: 2px;
    background-image: linear-gradient(-70deg, #9805CD, #F7638D, #F93030, #FFC219);
}
h3{
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 4px;
}

/*-----------スクロールアクション用-----------*/
.fadeIn_up{
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease;
    transform: translateY(80px);
}
.is-activeFadeIn_up{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fadeIn_right{
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease;
    transform: translateX(-100px);
}
.is-activeFadeIn_right{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.fadeIn_left{
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease;
    transform: translateX(100px);
}
.is-activeFadeIn_left{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.cutIn_right{
    visibility: hidden;
    transition: all 0.4s;
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
}
.is-activeCut_right{
    visibility: visible;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.cutIn_left{
    visibility: hidden;
    transition: all 0.4s;
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.is-activeCut_left{
    visibility: visible;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.spread{
    visibility: hidden;
    transition: all 0.4s;
    clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
}
.is-activeSpread{
    visibility: visible;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.line{
    position: relative;
    z-index: 1;
    display: inline-block;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; /* Safari用 */
}
.line::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 100%;
    background-color: #FFDD55;
    z-index: -1;
    transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.line.is-active::after{
    width: 100%;
}

/*-------------------------opening-------------------------*/
#opening{
    content: '';
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: #ffffff;
    transition: opacity 1s 1s ease, visibility 1s 1s;
    z-index: 11;
}
.layer{
    position: absolute;
    top: 0;
    left: 0;
    /* content: ''; */
    width: 150%;
    height: 100%;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    -webkit-clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    transform: translateX(100%);
}
.layer1, .layer3{
    background-color: #ABF1E7;
}
.layer2, .layer4{
    background-color: #FCFFDC;
}
#opening.loaded .layer {
    animation: moveLeft 1s ease-out forwards;
}
#opening.loaded .layer1 { animation-delay: 0s; }
#opening.loaded .layer2 { animation-delay: 0.1s; }
#opening.loaded .layer3 { animation-delay: 0.2s; }
#opening.loaded .layer4 { animation-delay: 0.3s; }

@keyframes moveLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-110%); }
}
/* Safari向けのプレフィックス */
@-webkit-keyframes moveLeft {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-110%); }
}
#opening.loaded{
    opacity: 0;
    visibility: hidden;
    /* display: none; */
}




/*-------------------------fv-------------------------*/
#fv{
    padding: 10px 0 33px;
    position: relative;
    width: 100%;
    min-height: 800px; /* 最小の高さを確保したい場合 */
    display: flex;
}
.titleInner{
    width: 100%;
    max-width: 581px;
    height: fit-content;
    position: relative;
    z-index: 4;
    top: 73px;
}
.sectionInner, .thanksInner{
    width: 100%;
    max-width: 1080px;
    height: fit-content;
    padding: 0 95px;
}
.fvBg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.fvBgOverlay, .fvBgimg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.fvBgOverlay{
    content: '';
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
}

.fvBgimg{
    overflow: hidden;
    content: '';
    background-image: url('../img/fvBg-pc.jpg');
    background-size: cover;
    background-position: center;
}
.titleInnerContent{
    align-items: end;
}
.titleInnerContentNote{
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    display: block;
    margin-top: 6px;
}
.cta{
    margin-top: 25px;
}
.ctaShoulder, .cta a{
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 15px;
}
#fv .ctaShoulder, #fv .cta a{
    color: #ffffff;
}
.cta a, #submit-btn.cta{
    padding: 16px 70px;
    background-image: linear-gradient(-40deg, #9805CD, #F7638D, #F93030, #FFC219);
    border-radius: 99999px;
    color: #ffffff;
}
.cta a:hover, #submit-btn.cta:hover{
    background-image: linear-gradient(-40deg, #F84A60, #F93030, #FFC219);
}
.ctaNote{
    display: block;
    height: auto;
    font-size: 12px;
    margin-bottom: 10px;
}

/*-------------------------cliant-------------------------*/
.slide1 .slick-track{
    display: flex !important;
    flex-direction: row;
    height: 80px;
    gap: 40px;
    align-items: center;
    justify-content: center;
    height: 80px;
}
/* 中の画像を小さく収める */
.slideItem img {
    width: auto;
    max-width: 100%; /* 親要素を超えない */
    max-height: 60px; /* ロゴが大きすぎないように制限（ここでサイズ調整！） */
    object-fit: contain;
}

/* シームレスな動きを滑らかにするおまじない（カクつき防止） */
.slick-track {
    transition-timing-function: linear !important;
}

/*-------------------------sns-------------------------*/
#sns{
    padding: 40px 0 0;
}
.snsInner{
    position: relative;
    z-index: 2;
}
.snsBg{
    position: absolute;
    content: '';
    background-color: #6DA1FB;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    border-radius: 40px 40px 0 0;
}
.snsTitle{
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}
.imgArea{
    padding: 24px 0 0;
    position: relative;
}
.snsWrap{
    position: absolute;
    z-index: 2;
    align-items: unset;
    justify-content: center;
    bottom: 0;
}
.snsItemWrap{
    position: relative;
    max-height: 440px;
    flex-wrap: wrap;
    max-width: 1068px;
    align-items: unset;
    margin: 0 auto;
    justify-content: center;
}
.snsItem{
    position: relative;
    top: 0;
    left: 0;
    max-width: 440px;
}
.snsItem:nth-child(1){
    width: 28.5%;
    left: 3vw;
    top: -30px;
}
.snsItem:nth-child(2){
    width: 28.3%;
    left: 4%;
    top: 0px;
}
.snsItem:nth-child(3){
    width: 33%;
    bottom: 50px;
    left: 20%;
}

.imgareaBgimg{
    position: relative;
    width: 375px;
}

/*-------------------------reason-------------------------*/
.sectionItemInner{
    z-index: 1;
}
.reasonItemWrapAll{
    z-index: 1;
}
.reasonItemWrap:nth-of-type(1){
    align-items: flex-start;
}
.reasonItemWrap:nth-of-type(2){
    align-items: flex-end;
}
.reasonItem{
    width: fit-content;
    padding: 18px 32px;
    background-color: #E1F8FA;
    border-radius: 16px;
    filter: drop-shadow(6px 6px 0 #FFDD55);
    margin-bottom: 16px;
    align-items: flex-start;
}
.reasonBg{
    position: absolute;
    width: 47.2%;
}
#reason .reasonBg:nth-of-type(2){
    right: 0;
    bottom: 42%;
}
#reason .reasonBg:nth-of-type(3){
    bottom: -30px;
    left: 0;
}

/*-------------------------reason-------------------------*/
#story{
    margin-top: 70px;
}
#story .sectionInner{
    background-color: #FFF6D0;
    padding: 55px 95px;
    border-radius: 40px 40px 0 0;
}
.lead{
    margin-bottom: 45px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
}
.successWrap{
    flex-direction: row;
    gap: 25px;
}
.successItemTitle{
    flex-direction: column;
}
.successItemTitle::before{
    content: '01';
    font-size: 40px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff;
}
.successItem:nth-of-type(2) .successItemTitle::before{
    content: '02';
}
.successItem:nth-of-type(3) .successItemTitle::before{
    content: '03';
}
.successItem{
    top: 0px;
}

/*-------------------------works-------------------------*/
#works{
    margin-bottom: 40px;
}
.leadTitle{
    display: block;
    width: 100%;
    margin-bottom: 14px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: center;
}
#works .lead, #price.lead{
    text-align: center;
}
.unmuteButton{
    width: 100%;
    height: 32px;
    margin-bottom: 30px;
    align-items: end;
}
.slide2{
    max-height: 550px;
}
.slide2 .slideItem {
    transform: scale(0.8); /* 前後の動画は少し小さく */
    transition: transform 0.8s ease; /* 拡大・縮小を滑らかに */
    opacity: 0.5; /* 前後の動画を少し薄くすると真ん中が際立ちます */
    padding: 0!important;
}

/* 真ん中に来た時のスタイル */
.slideItem.slick-center {
    transform: scale(1.1); /* 1.1倍に拡大 */
    opacity: 1;
}

.slideItem video {
    width: 100%;
    height: auto;
    display: block;
}
.slide-dots{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48px;
}
.slide-dots li{
    margin: 0 12px;
}
.slide-dots li button {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
}
.slide-dots li button::before{
    display: block;
    content: '';
    width: 18px;
    height: 18px;
    padding: 0;
    background-color: #FFEEF3;
    border: 2px solid #F7638D;
    border-radius: 99999px;
}
.slide-dots li.slick-active button::before{
    width: 22px;
    height: 22px;
    background-color: #F7638D;
}
/*-------------------------price-------------------------*/
#price{
    background-color: #FFEEF3;
    border-radius: 40px 40px 0 0;
}
.leadCatch, .leadCatch .sub{
    margin-bottom: 24px;
}
.leadCatch .sub{
    font-size: 24px;
    line-height: 28px;
    font-weight: 800;
}
.leadCatch .main{
    flex-direction: row;
    width: fit-content;
    color: #FF0000;
    font-weight: 900;
    letter-spacing: 3px;
    font-size: 32px;
    line-height: 40px;
    align-items: baseline;
}
.leadCatch .main span{
    font-size: 80px;
    padding-top: 12px;
}
.leadCatch .main span span{
    font-size: 48px;
    display: inline-block;
    padding-bottom: 5px;
}
#price .lead{
    text-align: center;
    max-width: 848px;
}

/*-------------------------recommend-------------------------*/
#recommend{
    background-color: #4E8DFA;
}
#recommend .sectionInner h2 .h2text{
    background-image: none;
    color: #ffffff;
}
#recommend .sectionInner h2 .line-container .line-short, 
#recommend .sectionInner h2 .line-container .line-slash, 
#recommend .sectionInner h2 .line-container .line-long {
    background-image: none;
    background-color: #ffffff;
}
.recommendItemWrap{
    gap: 24px;
}
.recommendItem{
    display: block;
    width: 100%;
    align-items: baseline;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    background-color: #ffffff;
    border-radius: 99999px;
    padding: 12px 2rem 15px;
    text-align: center;
    letter-spacing: -0.01rem;
}
.recommendItem span{
    font-size: 28px;
}

/*-------------------------contact-------------------------*/
#contact{
    padding: 64px 0;
}
.formTitle{
    font-size: 32px;
    line-height: 1.4;
    font-weight: 800;
}
#contact-form{
    margin-top: 48px;
    width: 100%;
    max-width: 736px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#contact-form div{
    align-items: flex-start;
    width: 100%;
    margin-bottom: 24px;
}
#contact-form div label{
    width: 100%;
}
#contact-form div label span{
    color: red;
    padding-bottom: 4px;
    display: inline-block;
}
#contact-form div label .note{
    color: #333333;
    font-size: 13px;
    line-height: 1.4;
    padding-bottom: 4px;
    display: inline-block;
}
#contact-form div label input, 
#contact-form div:nth-of-type(1) .name-flex-container .name-item input,
#contact-form div label textarea{
    width: 100%;
    height: fit-content;
    border: 1px solid #BDBDBD;
    border-radius: 4px;
    padding: 1rem;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 5%;
    margin-top: 4px;
}
#contact-form div:nth-of-type(1) .name-flex-container .name-item{
    width: calc((100% - 16px) / 2)!important;
}

#contact-form div:nth-of-type(1) label input:nth-last-of-type(2){
    margin-right: 12px;
}
#contact-form div:nth-of-type(6){
    align-items: center;
}
#contact-form div:nth-of-type(6) p{
    margin: 0 auto 16px;
}
#contact-form div:nth-of-type(6) label{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
#contact-form div:nth-of-type(6) label input{
    width: fit-content;
    margin-right: 6px;
}
.agrText{
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
    margin-top: 2px;
    display: inline-block;
    color: #333333 !important;
}
#submit-btn.disabled{
    background-image: none;
    background-color: #e0e0e0;
}
.name-flex-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start; /* エラーが出ても上が揃う */
    margin-bottom: 0 !important;
}

.name-item {
    flex: 1;
    display: flex;
    flex-direction: column; /* 上から ラベル -> 入力欄 -> エラー の順に並ぶ */
    margin-bottom: 0 !important;
}

/* jQueryが生成するエラーラベルのスタイル */
label.error {
    color: #ff0000;
    font-size: 0.8em;
    margin-top: 5px;
    /* これが効くことで、入力欄の下に綺麗に収まります */
}
.sub-label{
    display: none;
}
.privacyLink{
    border-bottom: 2px solid #dddddd;
}

/*-------------------------footer-------------------------*/
footer{
    background-color: #E8E8E8;
    border-radius: 40px 40px 0 0;
    padding: 40px 0 16px;
}
.footerWrapper{
    flex-direction: row;
    max-width: 880px;
    align-items: flex-start;
    padding-bottom: 40px;
}
.footerLogo{
    width: 120px;
    margin-right: 56px;
}
.footerLogoShoulder{
    margin-bottom: 16px;
    align-items: flex-start;
}
.footerDesc{
    align-items: flex-start;
}
.footerDesc dl{
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #BDBDBD;
}
.footerDesc dl dt{
    width: 120px;
}
.footerDesc dl dd{
    width: calc(100% - 120px);
}
.copyright{
    font-size: 12px;
    line-height: 1.4;
}

/*-------------------------thanksPage-------------------------*/
.thanksInner{
    padding: 80px 0 15px;
}
.thanksInner h2{
    margin-bottom: 0;
}
.thanksInner h2 .h2text{
    font-size: 36px;
    line-height: 1.5;
    margin-top: 32px;
    text-align: center;
    font-weight: 800;
}
.h2eng{
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
}
.thanksInner .lead{
    margin: 32px auto;
    text-align: center;
}
.thanksInner .cta{
    margin-bottom: 60px;
}
.toTop{
    margin-top: 44px;
    font-size: 20px;
    font-weight: 600;
}
#sirLp-thanks footer{
    background-color: #ffffff;
}




@media screen and (max-width: 1024px){
    .snsItem:nth-child(3){
        width: 31%;
        left: 19.5%;
    }
    .thanksInner{
        padding: 80px 60px 15px;
    }
}
@media screen and (max-width: 900px){
    header{
        padding: 32px 32px 0;
    }
    .slide1 .slick-track{
        gap: 30px;
    }
    .snsInner, .sectionInner{
        padding: 0 30px;
    }
    .snsItemWrap{
        max-height: 300px;
    }
    .snsItem:nth-child(1){
        width: 28%;
        left: 7vw;
        top: 0px;
    }
    .snsItem:nth-child(2){
        width: 27%;
        left: 8%;
        top: 10px;
    }
    .snsItem:nth-child(3){
        width: 30%;
        left: 16%;
    }
    .imgareaBgimg{
        width: 30%;
    }
    .footerWrapper{
        padding: 0 60px 40px;
    }

}

@media screen and (max-width: 480px){
    p{
        font-size: 14px;
        line-height: 20px;
    }
    .sp{
        display: block;
    }
    .pc{
    display: none;
    }
    
    header{
        display: none;
    }
    section{
        padding: 35px 0;
    }
    #fv{
        min-height: 645px;
        padding: 0;
        justify-content: center;
    }
    .titleInner{
        top: 0;
        padding: 0 15px;
    }
    #fv .ctaShoulder, #fv .cta a{
        font-size: 18px;
    }
    .ctaShoulder{
        font-size: 18px;
        line-height: 1.2;
    }
    .cta a, #submit-btn.cta{
        padding: 16px 30px;
        width: 100%;
        text-align: center;
    }
    #sns {
        padding: 24px 0 0;
    }
    .snsInner, .sectionInner{
        padding: 0 16px;
    }
    .snsTitle{
        font-size: 24px;
    }
    .imgArea{
        flex-direction: column-reverse;
    }
    .snsWrap{
        position: relative;
        height: min-content !important;
    }
    .snsItemWrap{
        max-height: inherit;
        height: fit-content;
    }
    .snsItem{
        max-height: 130px;
    }
    .snsItem:nth-child(1){
        width: 62.3%;
        left: inherit;
        align-self: flex-start;
        top: -6px;
    }
    .snsItem:nth-child(2){
        width: 62.3%;
        left: inherit;
        top: -14px;
        align-self: flex-end;
        height: fit-content;
    }
    .snsItem:nth-child(3){
        width: 70.9%;
        left: inherit;
        bottom: inherit;
        top: -30px;
        align-self: flex-start;
    }
    .imgareaBgimg{
        width: 81.558%;
    }

    h3{
        font-size: 24px;
        letter-spacing: -0.05em;
    }
    #story{
        margin-top: 0;
        padding: 0;
    }
    #story .sectionInner{
        padding: 35px 16px 0;
    }
    .reasonItem{
        padding: 8px 16px;
    }
    .reasonItemWrapAll .reasonItemWrap:nth-of-type(1) .reasonItem:nth-of-type(1),
    .reasonItemWrapAll .reasonItemWrap:nth-of-type(1) .reasonItem:nth-of-type(3){
        max-width: 302px;
    }
    .reasonItemWrapAll .reasonItemWrap:nth-of-type(1) .reasonItem:nth-of-type(2){
        max-width: 366px;
    }
    .reasonItemWrapAll .reasonItemWrap:nth-of-type(1) .reasonItem:nth-of-type(2){
        max-width: 366px;
    }
    .reasonItemWrapAll .reasonItemWrap:nth-of-type(2) .reasonItem:nth-of-type(1){
        max-width: 308px;
    }
    .reasonItemWrapAll .reasonItemWrap:nth-of-type(2) .reasonItem:nth-of-type(2){
        max-width: 254px;
    }
    .reasonItemWrapAll .reasonItemWrap:nth-of-type(2) .reasonItem:nth-of-type(3){
        max-width: 280px;
    }
    .reasonBg{
        display: none;
    }
    .lead{
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 16px;
    }
    #story .cta{
        display: none;
    }
    .successWrap {
        padding: 0;
        position: relative;
        width: 280px;
        margin: 0 auto;
        /* transitionをかけることで、720pxへの変化がスムーズになります */
        transition: height 0.5s ease;
        overflow: hidden;
        /* min-height: 405px; */
        height: auto;
        flex-direction: column;
    }

    .successItem {
        position: relative;
        width: 100%;
        object-fit: cover;
        object-position: top;
        height: auto;
        overflow: hidden;
    }
    .successWrap .successItem:nth-of-type(3){
        margin-bottom: 40px;
    }
    .slide-dots{
        margin-top: 15px;
    }
    
    .leadTitle{
        font-size: 24px;
        line-height: 28px;
        text-align: justify;
    }

    .recommendItem{
        border-radius: 16px;
        padding: 12px 1rem;
    }
    #works .lead, #price.lead, #price .lead{
        text-align: left;
    }
    .footerWrapper{
        flex-direction: column;
        padding: 0 16px 40px;
    }
    .footerLogo{
        margin: 0 0 24px 0;
    }
    .footerDesc{
        font-size: 16px;
        line-height: 34px;
    }
    .footerDesc dl{
        width: 100%;
    }
    .footerDesc dl dt{
        width: 100px;
        margin-right: 20px;
    }
    .footerDesc dl dd{
        width: calc(100% - 80px);
    }

    .thanksInner{
        padding: 60px 30px 15px;
    }
}