/*---------------------------------------------
	ヒーローセクション
---------------------------------------------*/
.hero-section{
    width: 100%;
    max-height: 680px;
}
.hero-section .hero-bg{
    max-height: 680px;
    background-color: var(--color-bg-gray);
    position: relative;
}
.hero-bg .swiper-slide{
    max-height: 680px;
    position: relative;
}
.hero-bg .swiper-slide:before{
    content: "";
    display: block;
    width: 100%;
    height: 80%;
    background-image: linear-gradient(to top, rgba(0,0,0,0.5) 0, transparent 80%);
    background-blend-mode: color-burn;
    position: absolute;
    bottom: 0;
    z-index: 5;
}
.hero-bg .swiper-slide img {
    width: 100%;
    max-height: 680px;
    margin: 0;
    object-fit: cover;
}
.hero-section .hero-text-box{
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 0 30px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 10;
}
.hero-section .hero-text{
    width: auto;
    color: var(--color-white);
    margin-bottom: 15px;
    font-size: 50px;
    font-weight: 700;
}
/* 各行：内容幅にフィット＋1行固定（画面幅で折れ崩れしない） */
.hero-section .hero-text .hero-line{
    display: table;
    position: relative;
    isolation: isolate;
    white-space: nowrap;
    line-height: 1.45;
}
/* 文字後ろに左から伸びる手書き風マーカー（文字高の約40%） */
.hero-section .hero-text .hero-line::before{
    content: "";
    position: absolute;
    left: -0.1em;
    bottom: 0.08em;
    width: 102%;
    height: 0.6em;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%230084e0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23005dd7%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27crayon%27%20x%3D%27-12%25%27%20y%3D%27-80%25%27%20width%3D%27124%25%27%20height%3D%27260%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.018%200.22%27%20numOctaves%3D%274%27%20seed%3D%277%27%20result%3D%27n%27%2F%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20in2%3D%27n%27%20scale%3D%279%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%20result%3D%27rough%27%2F%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%200.6%27%20numOctaves%3D%272%27%20seed%3D%273%27%20result%3D%27tex%27%2F%3E%3CfeColorMatrix%20in%3D%27tex%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.7%200.32%27%20result%3D%27texA%27%2F%3E%3CfeComposite%20in%3D%27rough%27%20in2%3D%27texA%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2C19%20C45%2C11%20120%2C15%20175%2C12%20C235%2C9%20278%2C14%20298%2C11%20C301%2C16%20299%2C25%20295%2C29%20C238%2C33%20150%2C27%2088%2C30%20C52%2C32%2024%2C29%206%2C32%20C0%2C27%200%2C23%202%2C19%20Z%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23crayon%29%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    /* 形を歪めず左→右に出すため clip-path で表示 */
    clip-path: inset(0 100% 0 0);
    animation: heroBarReveal 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
/* 手書き感：行ごとに微妙な傾き */
.hero-section .hero-text .hero-line:nth-child(1)::before{ animation-delay: 0.25s; transform: rotate(-0.8deg); }
.hero-section .hero-text .hero-line:nth-child(2)::before{ animation-delay: 0.5s;  transform: rotate(0.6deg); }
.hero-section .hero-text .hero-line:nth-child(3)::before{ animation-delay: 0.75s; transform: rotate(-0.4deg); }
@keyframes heroBarReveal{
    from{ clip-path: inset(0 100% 0 0); }
    to{   clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){
    .hero-section .hero-text .hero-line::before{ animation: none; clip-path: inset(0 0 0 0); }
}
.hero-section .swiper-pagination{
    text-align: left;
}
.hero-section .swiper-pagination .swiper-pagination-bullet{
    width: 15px;
    height: 5px;
    background-color: var(--color-border);
    border-radius: 10px;
    opacity: 1;
    transition: all .5s ease;
}
.hero-section .swiper-pagination .swiper-pagination-bullet-active{
    width: 60px;
    background-color: var(--color-orange);
}

.hero-section .swiper-slide-active .swiper-img,
.hero-section .swiper-slide-duplicate-active .swiper-img,
.hero-section .swiper-slide-prev .swiper-img {
  animation: zoomUp 7s linear 0s normal both;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}


@media screen and ( max-width: 810px ){
    .hero-section{
        max-height: 450px;
    }
    .hero-section .hero-bg{
        max-height: 450px;
    }
    .hero-bg .swiper-slide{
        max-height: 450px;
    }
    .hero-bg .swiper-slide:before{
        height: 40%;
    }
    .hero-bg .swiper-slide img {
        max-height: 450px;
    }
    .hero-section .hero-text-box{
        padding: 0 2% 3%;
        bottom: 10px;
    }
    .hero-section .hero-text{
        width: auto;
        margin-bottom: 10px;
        font-size: 30px;
    }
    .hero-section .swiper-pagination{
        text-align: left;
        left: 20px;
    }
}
@media screen and ( max-width: 480px ){
    .hero-section,
    .hero-section .hero-bg,
    .hero-bg .swiper-slide,
    .hero-bg .swiper-slide img {
        max-height: 450px;
    }
    .hero-bg .swiper-slide:before{
        height: 35%;
    }
    .hero-section .hero-text-box{
        padding: 0 2% 5%;
        bottom: 10px;
    }
    .hero-section .hero-text{
        width: auto;
        font-size: clamp(20px, 6.2vw, 26px);
    }
    .hero-section .swiper-pagination{
        left: 10px;
        bottom: 5px;
    }
}

/*---------------------------------------------
	共通
---------------------------------------------*/
.bg-gradation{
    background-image: url(../../_images/top/bg-dot.webp), linear-gradient(135deg, #e1f0f4 0, #f1f3f5 20%);
    background-repeat: no-repeat;
    background-position: 20% 22%;
    /* clip はスクロールコンテナを作らないため、内側 .works-grid の横タッチスクロールを妨げない
       （hidden だと iOS で入れ子の横スクロールが飲み込まれる）。非対応ブラウザは hidden にフォールバック */
    overflow-x: hidden;
    overflow-x: clip;
}

@media screen and ( max-width: 810px ){
    .bg-gradation{
        background-position: center 30%;
    }
}
@media screen and ( max-width: 480px ){
    .bg-gradation{
        background-position: center 25%;
        background-size: 600px auto, auto;
    }
}



/*---------------------------------------------
	キャッチ
---------------------------------------------*/
.catch-section{
    padding: 50px 0;
}
.catch-section .catch-title{
    color: var(--color-primary);
    margin-bottom: 50px;
    font-size: 50px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.05em;
}
.catch-section .catch-title .catch-sub{
    display: block;
    width: fit-content;
    margin: auto;
    font-size: 28px;
    font-weight: 500;
}
.catch-section .catch-title .sp-br{ display: none; } /* SPのみ改行（PCは非表示） */
.catch-section .catch-inner{
    display: grid;
    grid-template-columns: 1fr 350px minmax(0, 930px) 1fr;
    align-items: center;
}
/*左側*/
.catch-section .catch-left{
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    width: 350px;
    padding-right: 20px;
    border-right: 1px solid var(--color-border);
}
.catch-section .catch-left .catch-point{
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.5em;
}
.catch-section .catch-left .catch-point .small{
    display: block;
    font-size: 16px;
    line-height: 1.3em;
}
.catch-section .catch-left .catch-point .large{
    font-size: 54px;
    line-height: 1.5em;
}

/*右側*/
.catch-section .catch-right{
    grid-column: 3 / -1;
    position: relative;
}
.catch-section .catch-right .swiper-slide{
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.catch-section .catch-right .swiper-slide a{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.catch-section .catch-right .swiper-slide a:hover img{
    opacity: 0.85;
}
.catch-section .catch-right img{
    width: 120px;
    max-width: 100%;
    height: auto;
    margin-bottom: 2px;
    border: 2px solid var(--color-white);
    border-radius: 5px;
}
.catch-section .catch-right p{
    width: 120px;
    max-width: 100%;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
    text-align: center;
}

.catch-section .catch-right:before{
    content: "";
    display: block;
    width: 50px;
    height: 100%;
    background-image: linear-gradient(to right, #f1f3f5 20%, transparent 100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

/* スライドの動き等速*/
.catch-section .catch-right .swiper-wrapper {
  transition-timing-function: linear;
}

@media screen and ( max-width: 810px ){
    .catch-section{
        padding: 40px 0;
    }
    .catch-section .catch-title{
        margin-bottom: 30px;
        font-size: 40px;
    }
    .catch-section .catch-title .catch-sub{
        font-size: 25px;
    }
    .catch-section .catch-title .sp-br{ display: inline; } /* SPで「エンタメグッズ製作所／にお任せ！」を改行 */
    .catch-section .catch-inner{
        display: block;
        margin: 0;
    }
    /*左側*/
    .catch-section .catch-left{
        display: block;
        width: 100%;
        margin: 0 0 15px;
        padding: 0 20px;
        border: none;
    }
    .catch-section .catch-left .catch-point{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-size: 20px;
    }
    .catch-section .catch-left .catch-point .small{
        font-weight: 500;
        text-align: right;
    }
    .catch-section .catch-left .catch-point .large{
        display: inline-block;
        font-size: 40px;
    }

    /*右側*/
    .catch-section .catch-right{
        display: block;
    }
    .catch-section .catch-right img{
        width: 100%;
        max-width: 120px;
    }
    
    .catch-section .catch-right:before{
        display: none;
    }
}
@media screen and ( max-width: 480px ){
    .catch-section{
        padding: 40px 0;
    }
    .catch-section .catch-title{
        margin-bottom: 30px;
        font-size: 30px;
    }
    .catch-section .catch-title .catch-sub{
        font-size: 17px;
    }

    /*左側*/
    .catch-section .catch-left .catch-point{
        font-size: 16px;
    }
    .catch-section .catch-left .catch-point .small{
        font-size: 14px;
    }
    .catch-section .catch-left .catch-point .large{
        font-size: 40px;
    }

    /*右側*/
    .catch-section .catch-right{
        display: block;
    }
    .catch-section .catch-right img{
        width: 100%;
        max-width: 120px;
    }
    
    .catch-section .catch-right:before{
        display: none;
    }
}


/* ===================================================
   製作実績
=================================================== */
.works-section{
    padding: 50px 0;
}
.works-section .works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1280px;
    margin: auto;
}
.works-section .works-grid > li {
    padding: 16px 40px 20px;
    position: relative;
    z-index: 10;   /* 上に重なる装飾要素がタッチを奪い横スクロールできない問題の対策（カードを前面へ） */
}
.works-section .works-grid > li:not(:last-child){
    border-right: 1px solid var(--color-gray);
}
.works-section .works-grid > li .work-job{
    display: inline-block;
    color: var(--color-blue);
    margin-bottom: 8px;
    padding: 3px 10px;
    font-size: 14px;
    border: 1px solid var(--color-accent);
    border-radius: 5px;
}
.works-section .works-grid > li .work-title {
    color: var(--color-primary);
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}
.works-section .works-grid > li .work-desc  {
    color: var(--color-text-light);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.7;
}
.works-section .works-grid > li .btn-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 80%;
    background-color: var(--color-accent);
    color: var(--color-white);
    margin: auto;
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 30px;
    transition: all .3s ease;
    overflow: hidden;
    position: relative;
}
.works-section .works-grid > li .btn-detail:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-color: var(--color-white);
    border-radius: 50%;
    position: absolute;
    right: 5px;
}
.works-section .works-grid > li .btn-detail:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url(../../_images/common/icon-arrow.webp) no-repeat center;
    background-size: 100% auto;
    filter: brightness(0) saturate(100%) invert(73%) sepia(57%) saturate(1747%) hue-rotate(163deg) brightness(101%) contrast(89%);
    transition: transform 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    position: absolute;
    right: 12px;
}

/* 1. ボタンホバー時に矢印を右側へ消し去る */
.btn-detail:hover::after {
  transform: translateX(20px);
  animation: arrow-return 0.5s forwards;
}
@keyframes arrow-return {
  0% {
    transform: translateX(0);
    opacity: 1; /* 最初は見えている */
  }
  30% {
    transform: translateX(20px);
    opacity: 0; /* ここで完全に透明にする */
  }
  50% {
    transform: translateX(-20px); /* テキストの後ろにワープ */
    opacity: 0; /* まだ透明のまま */
  }
  70% {
    transform: translateX(-20px);
    opacity: 1; /* ここで透明度を戻し、再登場の準備をする */
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media screen and ( max-width: 810px ){
    .works-section{
        padding: 40px 0;
    }
    .works-section .works-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: 0 20px 10px;
        overflow-x: auto;
        overflow-y: hidden;   /* 純粋な横スクローラーにする（oy:autoの副作用回避） */
        -webkit-overflow-scrolling: touch;
    }
    .works-section .works-grid > li {
        flex: 0 0 235px;
        min-width: 235px;
        padding: 10px 15px 10px;
    }
    .works-section .works-grid > li .work-title {
        font-size: 18px;
    }
    .works-section .works-grid > li .btn-detail {
        width: 95%;
        padding-right: 30px;
        font-size: 15px;
    }
}
@media screen and ( max-width: 480px ){
}


/* ===================================================
   選ばれる理由
=================================================== */
.reasons-section {
    background-image: linear-gradient(170deg, transparent 70%, #fffaef 100%);
    padding: 80px 0 100px;
    position: relative;
}
.reasons-section .section-title{
    position: relative;
    z-index: 50;
}

.reasons-section .inner-container {
    max-width: 1280px;
    margin: auto;
}
.reasons-section:before {
    content: "";
    /* 表示したい画像の設定 */
    background-image: url('../../_images/top/reason-img.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all .4s ease-out;
    /* JS側で `--scroll-y` という変数を書き換えて動かします */
    transform: translate(-50%,-50%) scale(var(--scroll-scale, 1));
    will-change: transform; /* アニメーションを滑らかにする設定 */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 85%;
    max-width: 90vw;
    z-index: 1;
}

.reasons-section .reasons-list {
    display: flex;
    gap: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.reasons-section .reasons-list > li {
    background-color: #eaebf2;
    padding: 20px 20px 10%;
    border-radius: var(--radius-lg);
    transition: border-color .2s;
}
.reasons-section .reasons-list .reason-title {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
.reasons-section .reasons-list .reason-desc  {
    color: var(--color-text-mid);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
/* 選ばれる理由：挿絵アイコン（カード下部・サイズ統一で全カード等しく表示） */
.reasons-section .reasons-list > li.reason-schedule,
.reasons-section .reasons-list > li.reason-staff,
.reasons-section .reasons-list > li.reason-cooperation,
.reasons-section .reasons-list > li.reason-lineup{
    padding-bottom: 190px;
    background-repeat: no-repeat;
    background-position: center bottom 24px;
    background-size: 230px auto;
}
.reasons-section .reasons-list > li.reason-schedule{ background-image: url(../../_images/strength/schedule-icon.webp); background-position: center calc(100% + 30px);}
.reasons-section .reasons-list > li.reason-staff{ background-image: url(../../_images/strength/staff-icon.webp); background-position: center calc(100% + 55px);}
.reasons-section .reasons-list > li.reason-cooperation{ background-image: url(../../_images/strength/cooperation-icon.webp); background-position: center 100%;}
.reasons-section .reasons-list > li.reason-lineup{ background-image: url(../../_images/strength/lineup-icon.webp); background-position: center calc(100% + 30px);}

@media screen and ( max-width: 810px ){
    .reasons-section {
        padding: 50px 0 80px;
    }

    .reasons-section:before {
        width: 95%;
        height: 110%;
        max-width: 100vw;
        z-index: 1;
    }

    .reasons-section .reasons-list {
        overflow-x: auto;
        padding: 0 20px 10px;
    }
    .reasons-section .reasons-list > li {
        min-width: 250px;
        padding: 20px 3% 10%;
    }
    .reasons-section .reasons-list .reason-title {
        font-size: 22px;
    }
    .reasons-section .reasons-list .reason-desc  {
        font-size: 14px;
    }

    .reasons-section .reasons-list > li.reason-schedule,
    .reasons-section .reasons-list > li.reason-staff,
    .reasons-section .reasons-list > li.reason-cooperation,
    .reasons-section .reasons-list > li.reason-lineup{
        padding-bottom: 180px;
        background-size: 220px auto;
    }
}
@media screen and ( max-width: 480px ){
    .reasons-section:before {
        background-image: url('../../_images/top/reason-img-sp.webp');
        width: 120%;
        height: 150%;
        max-width: 120vw;
    }

    .reasons-section .reasons-list {
        overflow-x: auto;
        padding: 0 20px 10px;
    }
    .reasons-section .reasons-list > li {
        min-width: 250px;
        padding: 20px 3% 10%;
    }
    .reasons-section .reasons-list .reason-title {
        font-size: 22px;
    }
    .reasons-section .reasons-list .reason-desc  {
        font-size: 14px;
    }

    .reasons-section .reasons-list > li.reason-schedule,
    .reasons-section .reasons-list > li.reason-staff,
    .reasons-section .reasons-list > li.reason-cooperation,
    .reasons-section .reasons-list > li.reason-lineup{
        padding-bottom: 160px;
        background-size: 200px auto;
    }
}


/* ===================================================
   制作の流れ
=================================================== */
.flow-section {
    background-color: #eaebf2;
    padding: 80px 0 100px;
}
.flow-inner{
    display: grid;
    grid-template-columns: 1fr minmax(0, 1280px) 1fr;
    align-items: center;
}

.flow-section .swiper-wrapper{
    counter-reset: step;
}

/**/
.flow-section .flow-main{
    grid-column: 2 / -1;
    background-color: var(--color-white);
    padding: 60px 0 60px 100px;
    border-radius: 20px 0 0 20px;
    box-shadow: var(--shadow-sm);
}

.flow-section .flow-main .swiper-slide{
    background-color: var(--color-white);
}

.flow-section .flow-img{
    margin-bottom: 10px;
    position: relative;
}
.flow-section .flow-img img{
    width: 100%;
    max-width: 540px;
    height: auto;
    max-height: 340px;
}

.flow-section .step-title{
    background-color: var(--color-white);
    color: var(--color-primary);
    width: 90%;
    padding: 10px 10px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 0 20px 0 0;
    position: absolute;
    bottom: 0;
    z-index: 5;
}
.flow-section .step-title:before{
    content: counter(step,decimal-leading-zero)".";
    counter-increment: step;
    margin-right: 5px;
}

.flow-section .flow-main p{
    font-size: 14px;
    line-height: 1.8em;
}

.flow-section .swiper{
    padding-right: 30px;
    padding-bottom: 60px;
}

.flow-section .flow-slide-pager{
    display: flex;
    align-items: center;
    width: 80%;
    height: 55px;
    position: absolute;
    bottom: 0;
}

/*プログレスバー*/
.flow-section .swiper-pagination-progressbar {
    width: calc(100% - 140px);
    height: 1px;
    background: #e0e0e0;
    bottom: 25px;
    top: auto;
}
.flow-section .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
    background-color: var(--color-accent);
    height: 3px;
}

/*前後矢印*/
.flow-section .swiper-button-prev,
.flow-section .swiper-button-next{
    width: 54px;
    height: 54px;
    background-color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    transition: all .3s ease;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
}
.flow-section .swiper-button-prev{
    right: 65px;
}
.flow-section .swiper-button-next{
    right: 0;
}
.flow-section .swiper-button-prev:after,
.flow-section .swiper-button-next:after{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: none;
    background: url(../../_images/common/icon-arrow.webp);
    background-size: 100% auto;
    filter: brightness(0) saturate(100%) invert(15%) sepia(56%) saturate(1741%) hue-rotate(176deg) brightness(93%) contrast(96%);
}
.flow-section .swiper-button-prev:after{
    transform: scaleX(-1);
}

.flow-section .swiper-button-prev:hover,
.flow-section .swiper-button-next:hover{
    background-color: var(--color-primary);
}
.flow-section .swiper-button-prev:hover:after,
.flow-section .swiper-button-next:hover:after{
    filter: brightness(0) saturate(100%) invert(94%) sepia(94%) saturate(23%) hue-rotate(8deg) brightness(107%) contrast(106%);
}


@media screen and ( max-width: 810px ){
    .flow-section {
        padding: 80px 0 100px;
    }
    .flow-inner{
        grid-template-columns: 1fr minmax(0, 100%) 1fr;
    }

    /**/
    .flow-section .flow-main{
        background-color: transparent;
        padding: 0;
        margin-left: 20px;
        box-shadow: none;
    }
    /* SP：カード高さを揃える */
    .flow-section .flow-main .swiper-wrapper{ align-items: stretch; }
    .flow-section .flow-main .swiper-slide{ height: auto; }
    .flow-section .swiper{
        padding-right: 20px;
        padding-bottom: 60px;
    }

    .flow-section .step-title{
        font-size: 18px;
    }

    .flow-section .flow-main p{
        padding: 0 10px 10px;
    }

    .flow-section .flow-slide-pager{
        width: 90%;
        height: 55px;
    }

    /*プログレスバー*/
    .flow-section .swiper-pagination-progressbar {
        width: calc(100% - 120px);
        bottom: 20px;
    }

    /*前後矢印*/
    .flow-section .swiper-button-prev,
    .flow-section .swiper-button-next{
        width: 45px;
        height: 45px;
    }
    .flow-section .swiper-button-prev{
        right: 55px;
    }
    .flow-section .swiper-button-prev:after,
    .flow-section .swiper-button-next:after{
        font-size: 18px;
    }
}
@media screen and ( max-width: 480px ){
}



/* ===================================================
   グッズを探す
=================================================== */
.search-section {
    background: #f4f7fb;
    position: relative;
    overflow: hidden;
}

/* 背景スクロールテキスト */
.search-marquee-bg {
  width: 100%;
  height: 220px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}
.search-marquee-inner {
  display: inline-flex;
  height: 100%;
  white-space: nowrap;
  animation: relatedBgScroll 60s linear infinite;
  will-change: transform;
  align-items: center;
}
.search-marquee-content {
  display: flex;
  flex-shrink: 0;
}
.search-marquee-content span {
  color: rgba(14, 165, 233, .08);
  padding: 0 32px;
  font-size: 150px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  user-select: none;
  line-height: 1;
}
@keyframes relatedBgScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* タイトルを背景の上に確実に乗せる */
.explore-section .inner-container { position: relative; z-index: 1; }

/**/
.search-section > .inner-container{
    max-width: 1280px;
    margin: auto;
    padding: 100px 0 50px;
}

.search-section .trend-title{
    color: var(--color-primary);
    margin: 10px 20px;
    font-size: 28px;
    font-weight: 900;
}

@media screen and ( max-width: 810px ){
    /* 背景スクロールテキスト */
    .search-marquee-bg {
        height: 160px;
    }
    .search-marquee-content span {
        padding: 0 28px;
        font-size: 110px;
    }
    
    /**/
    .search-section > .inner-container{
        padding: 70px 0 50px;
    }

    .search-section .trend-title{
        margin: 10px 20px 0;
        font-size: 25px;
    }

}
@media screen and ( max-width: 480px ){
    /* 背景スクロールテキスト */
    .search-marquee-bg {
        height: 120px;
    }
    .search-marquee-content span {
        padding: 0 28px;
        font-size: 80px;
    }
    
    /**/
    .search-section > .inner-container{
        padding: 30px 0 50px;
    }

    .search-section .trend-title{
        font-size: 20px;
    }

}


/* ====================
   商品カルーセル（共通）
==================== */
.carousel-wrap {
	position: relative;
	overflow: hidden;
}
.carousel-wrap .items-carousel{
	padding: 20px 20px 40px;
}

.carousel-wrap .items-carousel img{
    max-height: 325px;
}

/**/
.items-carousel .swiper-button-prev{
	left: 5px;
}
.items-carousel .swiper-button-next{
	right: 5px;
}
/* トレンドカルーセルの左右ボタンを画像の上下中央へ（カード全高の50%だと
   商品名・品番・ロットのテキスト帯を含むため下寄りに見える問題の対策） */
.items-carousel.related .swiper-button-prev,
.items-carousel.related .swiper-button-next{
	top: 170px;
	margin-top: 0;
	transform: translateY(-50%);
}
@media screen and ( max-width: 810px ){
	.items-carousel.related .swiper-button-prev,
	.items-carousel.related .swiper-button-next{
		top: 140px;
	}
}

/*--最近見た--*/
.recent-section{
    padding: 60px 0;
}
.recent-section .inner-container{
    max-width: 1280px;
    margin: auto;
}
.recent-section .inner-container .section-title{
    margin-bottom: 20px;
    font-size: 28px;
}


/* ===================================================
   シーンセクション
=================================================== */
.scene-section {
    background: #263d5e;
    padding: 50px 0;
}
.scene-section .section-title{
    color: var(--color-white);
    font-size: 28px;
    text-align: left;
}
.scene-section > .inner-container{
    max-width: 1280px;
    margin: auto;
}
.scene-section ul.scene-list{
    display: flex;
    gap: 25px;
}
.scene-section ul.scene-list > li{
    width: calc((100% - 75px) / 4);
    overflow: hidden;
    transition: all .3s ease;
    position: relative;
}
.scene-section ul.scene-list > li a{
    display: block;
    min-height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: overlay;
    padding: 20px;
    border: 1px solid #838383;
    border-radius: 30px;
    transition: all .2s ease;
    overflow: hidden;
    position: relative;
}
.scene-section ul.scene-list > li a:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.scene-section ul.scene-list > li .scene-name{
    color: var(--color-white);
    font-size: 28px;
    font-weight: 700;
    position: absolute;
    left: 20px;
    bottom: 15px;
    z-index: 5;
}

/*hover*/
.scene-section ul.scene-list > li:hover{
    transform: translate(0, -5px);
}

@media screen and ( max-width: 810px ){
    .scene-section {
        padding: 30px 0;
    }
    .scene-section .section-title{
        font-size: 25px;
    }
    .scene-section > .inner-container{
        margin: 0 20px;
    }
    .scene-section ul.scene-list{
        flex-wrap: wrap;
        gap: 20px;
    }
    .scene-section ul.scene-list > li{
        width: calc((100% - 20px) / 2);
    }
    .scene-section ul.scene-list > li a{
        min-height: 160px;
        padding: 20px;
    }
    .scene-section ul.scene-list > li .scene-name{
        font-size: 26px;
    }
}
@media screen and ( max-width: 480px ){
    .scene-section .section-title{
        padding: 0;
        font-size: 20px;
    }
    .scene-section ul.scene-list{
        gap: 15px;
    }
    .scene-section ul.scene-list > li{
        width: calc((100% - 15px) / 2);
    }
    .scene-section ul.scene-list > li a{
        min-height: 120px;
        padding: 5px;
    }
    .scene-section ul.scene-list > li .scene-name{
        font-size: 20px;
        left: 10px;
    }
}

/* ===================================================
   アイテムカテゴリ
=================================================== */
.category-section{
    background-color: #e5edf4;
    padding: 70px 0;
}
.category-section .section-title{
    font-size: 28px;
    text-align: left;
}
.category-section > .inner-container{
    max-width: 1280px;
    margin: auto;
}
.category-section > .inner-container .category-list{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}
.category-section > .inner-container .category-list > li{
    width: calc((100% - 75px) / 4);
}
.category-section > .inner-container .category-list > li a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    min-height: 70px;
    background-color: var(--color-white);
    color: var(--color-primary);
    padding: 5px 20px;
    font-size: 16px;
    font-weight: 800;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: all .3s ease;
    position: relative;
}
.category-section > .inner-container .category-list > li a:before{
    content: "";
    flex-shrink: 0;
    display: block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

.category-list > li.category-tshirt a:before{background-image: url(../../_images/common/icon-category-tshirt.webp);}
.category-list > li.category-parka a:before{background-image: url(../../_images/common/icon-category-parka.webp);}
.category-list > li.category-acrylic a:before{background-image: url(../../_images/common/icon-category-acrylic.webp);}
.category-list > li.category-keyholder a:before{background-image: url(../../_images/common/icon-category-keyholder.webp);}
.category-list > li.category-badge a:before{background-image: url(../../_images/common/icon-category-badge.webp);}
.category-list > li.category-sticker a:before{background-image: url(../../_images/common/icon-category-sticker.webp);}
.category-list > li.category-cap a:before{background-image: url(../../_images/common/icon-category-cap.webp);}
.category-list > li.category-bag a:before{background-image: url(../../_images/common/icon-category-bag.webp);}
.category-list > li.category-towel a:before{background-image: url(../../_images/common/icon-category-towel.webp);}
.category-list > li.category-tumbler a:before{background-image: url(../../_images/common/icon-category-tumbler.webp);}
.category-list > li.category-cheering a:before{background-image: url(../../_images/common/icon-category-cheering.webp);}
.category-list > li.category-other a:before{background-image: url(../../_images/common/icon-category-other.webp);}

.category-section > .inner-container .category-list > li a:hover{
    border: 1px solid var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

@media screen and ( max-width: 810px ){
    .category-section{
        padding: 40px 0;
    }
    .category-section .section-title{
        font-size: 25px;
    }
    .category-section > .inner-container{
        margin: 0 20px;
    }
    .category-section > .inner-container .category-list{
        gap: 20px;
    }
    .category-section > .inner-container .category-list > li{
        width: calc((100% - 20px) / 2);
    }
}
@media screen and ( max-width: 480px ){
    .category-section{
        padding: 30px 0;
    }
    .category-section > .inner-container .category-list{
        gap: 10px 10px;
    }
    .category-section > .inner-container .category-list > li{
        width: calc((100% - 10px) / 2);
    }
    .category-section > .inner-container .category-list > li a{
        gap: 8px;
        min-height: 55px;
        padding: 5px 5px 5px 8px;
        font-size: 14px;
        border-radius: 15px;
    }
    .category-section > .inner-container .category-list > li a:before{
        width: 30px;
        height: 30px;
    }
    .category-section > .inner-container .category-list > li.category-other a{
        letter-spacing: -0.1em;
    }

}



/* ===================================================
   下部エリア
=================================================== */
.under-content{
    background-color: #f7f7f9;
    padding: 100px 0 50px;
}
.under-content > section{
    max-width: 1280px;
    margin: 0 auto 50px;
}
.under-content > section > .inner-container{
    margin-left: 200px;
}

/*伸びる見出し
.stretch-title-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 36px;
    position: relative;
}
.stretch-title-wrap .stretch-title {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 28px;
    font-weight: 900;
    white-space: nowrap;
    position: relative;
}
.stretch-title-wrap .stretch-title + small{
    display: block;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    position: absolute;
    left: 0;
    bottom: -20px;
}
.stretch-title-wrap .stretch-line {
    display: block;
    height: 1px;
    background-color: #b9d3ec;
    flex: 1;
    min-width: 0;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.stretch-title-wrap .stretch-line.show {
    transform: scaleX(1);
}*/


@media screen and ( max-width: 810px ){
    .under-content{
        padding: 50px 0 50px;
    }
    .under-content > section{
        margin: 0 0 50px;
    }
    .under-content > section > .inner-container{
        margin: 0 20px;
    }

    /*伸びる見出し
    .stretch-title-wrap {
        gap: 20px;
        margin-left: 20px;
    }
    .stretch-title-wrap .stretch-title {
        font-size: 26px;
    }*/
}
@media screen and ( max-width: 480px ){
}


/* ====================
   ピックアップ特集
==================== */
.pickup-section .pickup-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 30px;
}

.pickup-section .pickup-list > li:nth-of-type(1) { grid-area: 1 / 1 / 2 / 4; }
.pickup-section .pickup-list > li:nth-of-type(2) { grid-area: 1 / 4 / 2 / 7; }
.pickup-section .pickup-list > li:nth-of-type(3) { grid-area: 2 / 1 / 3 / 3; }
.pickup-section .pickup-list > li:nth-of-type(4) { grid-area: 2 / 3 / 3 / 5; }
.pickup-section .pickup-list > li:nth-of-type(5) { grid-area: 2 / 5 / 3 / 7; } 

.pickup-section .pickup-list img{
    width: 100%;
    height: auto;
    max-height: 390px;
}
.pickup-section .pickup-list > li p{
    font-size: 18px;
}

@media screen and ( max-width: 810px ){
    .pickup-section .pickup-list {
        grid-column-gap: 30px;
        grid-row-gap: 20px;
    }

    .pickup-section .pickup-list > li p{
        font-size: 16px;
    }
}
@media screen and ( max-width: 480px ){
    .pickup-section .pickup-list {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 20px;
        grid-row-gap: 30px;
    }

    .pickup-section .pickup-list > li:nth-of-type(1) { grid-area: 1 / 1 / 2 / 3; }
    .pickup-section .pickup-list > li:nth-of-type(2) { grid-area: 2 / 1 / 3 / 2; }
    .pickup-section .pickup-list > li:nth-of-type(3) { grid-area: 2 / 2 / 3 / 3; }
    .pickup-section .pickup-list > li:nth-of-type(4) { grid-area: 3 / 1 / 4 / 2; }
    .pickup-section .pickup-list > li:nth-of-type(5) { grid-area: 3 / 2 / 4 / 3; } 

    .pickup-section .pickup-list > li p{
        font-size: 16px;
    }
}

/* ====================
   お知らせ
==================== */
.news-section .news-list{
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 300px;
    padding-right: 60px;
    overflow-y: auto;
}
.news-section .news-list > li{
    display: flex;
    gap: 20px;
    padding: 0 0 15px;
    border-bottom: 1px solid #c9d7e5;
}

@media screen and ( max-width: 810px ){
    .news-section .news-list{
        padding-right: 2%;
    }
}

/* ====================
   よくある質問
==================== */
.faq-section .faq-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 60px;
}
.faq-section .faq-list > div{
    background-color: var(--color-white);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,.02);
}
.faq-section .faq-list dt{
    color: var(--color-primary);
    font-size: 20px;
    position: relative;
}
.faq-section .faq-list dd{
    max-height: 0;
    padding: 0 40px 0 90px;
    font-size: 16px;
    line-height: 1.8em;
    transition: all .3s ease;
    overflow: hidden;
    position: relative;
}

.faq-section .faq-list dt:before,
.faq-section .faq-list dd:before{
    display: block;
    width: fit-content;
    height: fit-content;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1em;
    position: absolute;
    left: 40px;
}
.faq-section .faq-list dt:before{
    content: "Q.";
    color: var(--color-blue);
    font-size: 26px;
    transform: translateY(-50%);
    top: 50%;
}
.faq-section .faq-list dd:before{
    content: "A.";
    color: var(--color-primary);
    font-size: 20px;
    top: 5px;
}
/**/
.faq-section .faq-list dt label{
    display: block;
    padding: 30px 60px 30px 90px;
    position: relative;
}
.faq-section .faq-list dt label:before,
.faq-section .faq-list dt label:after{
    content: "";
    display: block;
    width: 19px;
    height: 3px;
    background-color: #0084e0;
    transition: all .3s ease;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
}
.faq-section .faq-list dt label:after{
    transform: rotate(90deg);
    top: calc(50% + -2px);
}


/**/
.faq-section .faq-list dt:has(input:checked) label:after{
    transform: rotate(180deg);
    opacity: 0;
}

.faq-section .faq-list dt:has(input:checked) + dd{
    padding-bottom: 30px;
    max-height: 2000px; /* JS(common.js)がscrollHeightで正確に上書き。JS無効時のフォールバック */
}

.faq-section .faq-list + p{
    display: block;
    width: fit-content;
    margin: 20px 60px 0 auto;
    font-size: 14px;
}
.faq-section .faq-list + p a{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #4e6b82;
}
.faq-section .faq-list + p a:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url(../../_images/common/icon-arrow.webp) no-repeat right;
    background-size: 100% auto;
    filter: brightness(0) saturate(100%) invert(35%) sepia(50%) saturate(298%) hue-rotate(164deg) brightness(99%) contrast(89%);
    transition: all .3s ease;
}
.faq-section .faq-list + p a:hover:after{
    transform: translateX(5px);
}

/*----*/
.faq-section .guide-list{
    display: flex;
    gap: 30px;
    margin: 50px auto 0;
    padding-right: 60px;
}
.faq-section .guide-list > li{
    width: calc((100% - 90px) / 4);
    display: flex; /* カード高さを揃える（PC/SP共通） */
}
.faq-section .guide-list > li a{
    display: block;
    width: 100%; /* li内で高さ・幅いっぱいに広げて揃える */
    background-color: var(--color-white);
    padding: 100px 15px 15px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    transition: all .3s ease;
    position: relative;
}
.faq-section .guide-list > li a:before{
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background-color: var(--color-bg-bgray);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all .3s ease;
    position: absolute;
    top: 20px;
    left: 50%;
}

.faq-section .guide-list > li a:hover{
    border: 1px solid var(--color-accent);
    transform: translateY(-5px);
}
.faq-section .guide-list > li a:hover:before{
    background-color: #9be6fd;
}

.faq-section .guide-list > li .guide-title{
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
}
.faq-section .guide-list > li p{
    color: var(--color-text-light);
    font-size: 14px;
}

/**/
.faq-section .guide-list > li.howto a:before{ background-image: url(../../_images/common/icon-guide.webp);}
.faq-section .guide-list > li.strength a:before{ background-image: url(../../_images/common/icon-strength.webp);}
.faq-section .guide-list > li.send a:before{ background-image: url(../../_images/common/icon-print.webp);}
.faq-section .guide-list > li.upload a:before{ background-image: url(../../_images/common/icon-upload.webp);}
.faq-section .guide-list > li.template a:before{ background-image: url(../../_images/common/icon-template.webp);}


@media screen and ( max-width: 810px ){
    .faq-section .faq-list{
        padding-right: 0;
    }
    .faq-section .faq-list dt{
        font-size: 18px;
    }
    .faq-section .faq-list dd{
        padding: 0 30px 0 60px;
        font-size: 16px;
    }
    .faq-section .faq-list dt:before,
    .faq-section .faq-list dd:before{
        left: 20px;
    }
    .faq-section .faq-list dt:before{
        font-size: 24px;
    }
    .faq-section .faq-list dd:before{
        font-size: 20px;
    }

    .faq-section .faq-list dt label{
        padding: 25px 50px 25px 60px;
    }


    /**/
    .faq-section .faq-list + p{
        font-size: 15px;
        margin: 10px 0 0 auto;
    }
    .faq-section .faq-list + p a{
        color: var(--color-text-mid);
    }

    /*----*/
    .faq-section .guide-list{
        flex-wrap: wrap;
        gap: 20px;
        padding: 0;
    }
    .faq-section .guide-list > li{
        width: calc((100% - 20px) / 2);
    }
    .faq-section .guide-list > li a{
        padding: 100px 10px 15px;
    }

    .faq-section .guide-list > li .guide-title{
        font-size: 15px;
    }
    .faq-section .guide-list > li p{
        font-size: 14px;
    }

}
@media screen and ( max-width: 480px ){
    .faq-section .faq-list dt{
        font-size: 16px;
    }
    .faq-section .faq-list dd{
        padding: 0 30px 0 60px;
        font-size: 16px;
    }
    /**/
    .faq-section .faq-list dt:before,
    .faq-section .faq-list dd:before{
        left: 20px;
    }
    .faq-section .faq-list dt:before{
        font-size: 20px;
        top: 30px;
    }
    .faq-section .faq-list dd:before{
        font-size: 20px;
    }

    /**/
    .faq-section .faq-list dt label{
        padding: 20px 50px 20px 55px;
    }
    
    .faq-section .faq-list dt label:before,
    .faq-section .faq-list dt label:after{
        width: 16px;
        height: 2px;
        transform: translateY(-50%);
        position: absolute;
        top: 32px;
        right: 20px;
    }
    .faq-section .faq-list dt label:after{
        transform: rotate(90deg);
        top: 31px;
    }

    
    /*----*/
    .faq-section .guide-list{
        gap: 15px;
    }
    .faq-section .guide-list > li{
        width: calc((100% - 15px) / 2);
    }

    .faq-section .guide-list > li .guide-title{
        font-size: 14px;
    }
    .faq-section .guide-list > li p{
        font-size: 13px;
    }
}

/* ===================================================
   フッター
=================================================== */
footer{
    margin-top: 50px;
}