@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
a {
    cursor: pointer;
}

.eng {
    font-family: "Montserrat", sans-serif;
}

.eng02{
  font-family: "Poppins", sans-serif;
}


.mincho{  
    font-family: "Montserrat", sans-serif;
}

.sp-only {
    display: none;
}

body {
  font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    overflow-x: clip;
    color: #323840;
    font-weight: 400;
    position: relative;
}

html {
    color: #323840;
  font-family: "Noto Sans JP", sans-serif;
}

.w-1220{
    width: 100%;
    margin: auto;
    max-width: 1220px;
}


.w-1000 {
    width: 100%;
    margin: auto;
    max-width: 1000px;
}



@media screen and (max-width:1220px) {
.w-1220,
.w-1000 {
        padding-left: 20px;
        padding-right: 20px;
}
}




header.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #EBEEF2;
    z-index: 99999;
}


.l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px 14px;
    background: #fff;
}


nav.l-header__nav {
    display: flex;
    align-items: center;
    gap: 10px;
}


.lang-select {
    position: relative;
}


.lang-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: #57626F;
    border: none;
    border-radius: 100px;
    border: 1px solid #57626F;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

a.btn-partner{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #57626F;
    color: #fff;
    border: none;
    border-radius: 100px;
    border: 1px solid #57626F;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    transition: .25s;

}

a.btn-partner:hover{
    background: #1a1a1a;
    color: #fff;
    transition: .25s;

}

.lang-trigger:hover {
    background: #1a1a1a;
    color: #fff;
}

.lang-trigger img {
    width: 16px;
    height: 16px;
}

.lang-arrow {
    transition: transform 0.2s;
    display: none;
}

.lang-trigger[aria-expanded="true"] .lang-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #EBEEF2;
    border-radius: 10px;
    overflow: hidden;
    min-width: 80px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
}

.lang-dropdown.is-open {
    display: block;
}

.lang-option {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}

.lang-option:hover {
    background: #f5f5f5;
    color: #111;
}

.lang-option.is-active {
    color: #111;
    font-weight: 600;
}



















.fv__inner {
    padding-top: 12vw;
    padding-bottom: 18vw;
    position: relative;
    z-index: 2;
    overflow-x: hidden;
    background-color: transparent;
}
.fv.has-ticker .fv__inner {
    padding-bottom: 180px !important;
}
@media screen and (max-width: 768px) {
    .fv.has-ticker .fv__inner {
        padding-bottom: 80px !important;
    }
}

.fv__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%; /* 左右に少し広げておく */
    width: 120%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    /* ここで大きく円を描く */
    border-bottom-left-radius: 50% 100px;
    border-bottom-right-radius: 50% 100px;
}

.fv__visual {
    position: absolute;
    right: -16vw;
    top: -23vw;
    width: 75vw;
    height: 75vw;
}

.fv__visual-mask{
    border-radius: 100000000000000000px;
    overflow: hidden;
    width: 75vw;
    height: 75vw;
    position: relative;
    z-index: 2;
}

h2.fv__copy {
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: .05em;
    width: 31.8vw;
}

h2.fv__copy img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.fv__copy01{
    font-size: 3.75vw;
    display: block;
    letter-spacing: .05em;
}
.fv__copy02{
    font-size: 3.75vw;
    letter-spacing: .05em;
    display: block;
}
.fv__copy03{
    display: block;
    letter-spacing: .05em;
    font-size: 5.69vw;
}

.fv__copy02 span{
    color: #FF4596;
}


/* === Logo Ticker === */
.fv__logo-ticker {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    margin-top: 10vw;
}
@media screen and (max-width: 768px) {
    .fv__logo-ticker {
        margin-top: 62px;
    }
}
.fv__logo-row {
    width: 100%;
}
.fv__logo-row .slick-track {
    display: flex !important;
    align-items: center;
}
.fv__logo-row .slick-slide {
    margin: 0 3px;
}
.fv__logo-item {
    width: 165px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px) {
    .fv__logo-item {
        width: 110px !important;
        height: 40px !important;
    }
}
.fv__logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

section.problem {
    background: url(../images/common/bg-dots.webp);
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
    margin-top: -72px;

}


.problem__clouds {
    width: 100%;
    max-width: 750px;
    margin: auto;
    margin-bottom: 10px;
}

.problem__clouds img {
    width: 100%;
    object-fit: contain;
    display: block;
}

.fv__apps {
    display: flex;
    gap: 20px;
    padding-left: 14px;
    padding-top: 16px;
}

.fv__apps a{
    display: block;
    width: max-content;
    transition: .25s;
    height: 2.78vw;
}

.fv__apps a img{
    display: block;
    width: 100%;
    height: 2.78vw;
    object-fit: contain;
}

.fv__apps a:hover {
    transform: translateY(-2.5px);
    transition: .25s;
}
section.solution {
    position: relative;
    padding-top: 100px;
    margin-top: -72px;
    z-index: 2;
}
section.solution::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    border-top-left-radius: 50% 100px;
    border-top-right-radius: 50% 100px;
}
h3.solution__title {
    font-size: 37px;
    text-align: center;
    width: max-content;
    margin: 0 auto 20px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 40px;
    position: relative;
}

h3.solution__title::before{
    content: "";
    background-image: url(../images/frontpage/ttl-before.webp);
    width: 32px;
    height: 67px;
    display: block;
    position: absolute;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    transform: translateY(-50%);
}

h3.solution__title::after {
    content: "";
    background-image: url(../images/frontpage/ttl-before.webp);
    width: 32px;
    height: 67px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    /* translateY と scaleX を半角スペースで繋げて書く */
    transform: translateY(-50%) scaleX(-1);
}

h3.solution__title span.deco-lr{
    font-size: 50px;
    text-align: center;
    color: #FF3D8A;
}

p.solution__lead {
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .05em;
}

.solution__visual{
    width: 100%;
    margin-top: 40px;
}
.solution__visual picture,
.solution__visual picture img{
    width: 100%;
    display: block;
}
h3.problem__title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    letter-spacing: .05em;
    gap: 6px;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 20px;
}
span.highlight {
    padding: 5px 12px 7px 0;
    background: #FF3D8A;
    color: #fff;
    border-radius: 10px;
    display: block;
    width: max-content;
    font-size: 36px;
}

p.problem__lead {
    font-size: 24px;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    color: #7C8C9F;
    margin-bottom: 4px;
}

p.problem__footer-copy {
    font-size: 24px;
    text-align: center;
    line-height: 1.6;
    font-weight: 700;
    color: #444D57;
}
/* ================================================= 
   NEWS SECTION
================================================== */
section.news {
    position: relative;
    padding-bottom: 80px;
    padding-top: 150px;
    overflow: hidden;
}

.news__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

h3.news__title.eng {
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
}

/* もっと見るボタン */
a.news__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    text-decoration: none;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 19.5px;
    font-weight: 500;
    line-height: 1;
    transition: opacity 0.3s;
}

a.news__more::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
}

a.news__more:hover {
    opacity: 0.7;
}

/* スライダーコンテナ（右側突き出しの肝） */
.news__slider-container {
    /* 右側だけ画面端(100vw)まで広げる計算 */
    margin-right: calc(50% - 50vw);
    width: auto;
}

/* Slickの枠外表示設定 */
.news__slider .slick-list {
    overflow: visible !important; /* インナーの右側を越えてスライドを見せる */
}

.news__item {
    padding-right: 24px; /* アイテム間の余白 */
    width: 394px; /* デザイン上のカード幅に固定（JSでvariableWidth: true推奨） */
}

.news__img {
    aspect-ratio: 394 / 222;
}
.news__img img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.news__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.news__date.eng {
    font-size: 14px;
    color: #667085;
}

.news__label {
    font-size: 12px;
    padding: 2px 12px;
    border-radius: 100px;
    color: #fff;
}

.label--campaign { background-color: #f23d8b; }
.label--info { background-color: #f23d8b; }

.news__text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
}

/* --- Slick Dots (ドットのデザイン) --- */
.slick-dots {
    position: relative;
    bottom: 0;
    margin-top: 40px;
    /* 突き出した分を戻してインナー内で中央揃えにする */
    margin-right: calc(50vw - 50%); 
    display: flex !important;
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
}

.slick-dots li {
    margin: 0;
    width: 8px !important;
    height: 8px !important;
}

.slick-dots li button {
    width: 8px !important;
    height: 8px !important;
    padding: 0;
    background: #EBEEF2 !important;
    border-radius: 50%;
    border: none;
    font-size: 0;
    cursor: pointer;
}

.slick-dots li button:before {
    display: none;
}

.slick-dots li.slick-active button {
    background: #475467 !important;
}

span.news__date.eng02 {
    color: #57626F;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}


.news__label {
    font-size: 12px;
    padding: 1px 10px;
    border-radius: 100px;
    color: #fff;
    line-height: 1.8;
}.news__text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
}


/* レスポンシブ対応：画面幅が狭い時に突き出しを解除する場合 */
@media (max-width: 767px) {
    .news__slider-container {
        margin-right: 0;
    }
    .news__slider .slick-list {
        overflow: hidden !important;
    }
    .news__item {
        width: 85vw; /* スマホでは画面幅いっぱいに近く */
    }
}


/* ============================
   Campaign Section
   ============================ */
.campaign__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

h3.campaign__title.eng {
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
}

a.campaign__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    text-decoration: none;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 19.5px;
    font-weight: 500;
    line-height: 1;
    transition: opacity 0.3s;
}

a.campaign__more::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
}

a.campaign__more:hover {
    opacity: 0.7;
}

.campaign__slider-container {
    margin-right: calc(50% - 50vw);
    width: auto;
}

.campaign__slider .slick-list {
    overflow: visible !important;
}

.campaign__item {
    padding-right: 24px;
    width: 394px;
}

.campaign__img {
    aspect-ratio: 394 / 222;
}
.campaign__img img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.campaign__text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
    margin-top: 16px;
}

section.campaign {
    position: relative;
    padding-bottom: 80px;
    overflow: hidden;
}

.campaign__dots-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

@media (max-width: 767px) {
    .campaign__slider-container {
        margin-right: 0;
    }
    .campaign__slider .slick-list {
        overflow: hidden !important;
    }
    .campaign__item {
        width: 85vw;
    }
    .campaign__header {
        margin-bottom: 16px;
    }
    .campaign__text {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.8;
        color: #333;
    }
}


/* ============================
   Campaign Single Page
   ============================ */
.single-campaign .l-main {
    position: relative;
}

.single-campaign .l-main::before{
content: "";
display: block;
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
left: 0;
top: 0;
    background: url(../images/common/bg-dots.webp);
}

/* --- 2カラムレイアウト --- */
.camp-layout {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-top: 64px;
}
.camp-layout__side {
    width: 50%;
    position: sticky;
    top: 120px;
    flex-shrink: 0;
}
.camp-layout__side-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    height: 100vh;
    top: 0;
    position: fixed;
    left: 0;
    width: 50%;
    background: #fff;
}
.camp-layout__side-inner::after {
    content: "";
    width: 190px;
    height: 100%;
    background-image: url(../images/common/pc-nav-before.webp);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    right: -148px;
    display: block;
    top: 0;
    position: absolute;
    z-index: 2;
    transform: scaleX(-1);
}
.camp-layout__logos {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 60px;
    margin-top: 80px;
}
.camp-layout__x {
    width: 32px;
    height: 32px;
}
.camp-layout__collab-logo {
    width: 50%;
    max-width: 250px;
}
.camp-layout__collab-logo img {
    width: 100%;
    display: block;
    object-fit: contain;
}
.camp-layout__cs-logo {
    width: 50%;
    max-width: 250px;
}
.camp-layout__cs-logo img {
    width: 100%;
    display: block;
    object-fit: contain;
}
.camp-layout__catch {
    font-size: 14px;
    color: #323840;
    text-align: center;
    background: #eaeef2;
    border-radius: 100px;
    padding: 8px 22px;
    margin: 0 0 24px;
    font-weight: 700;
    line-height: 1.6;
    position: relative;
}
.camp-layout__catch::before {
    content: "";
    display: block;
    width: 34px;
    height: 16px;
    background-image: url(../images/common/after-comment.webp);
    position: absolute;
    left: 50%;
    bottom: -14px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateX(-50%);
}
.camp-layout__catch span {
    color: #FF4596;
    font-weight: 700;
}
.camp-layout__apps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.camp-layout__apps a img {
    height: 48px;
    width: auto;
}
.camp-layout__btn {
    display: block;
    text-align: center;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 100px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 69, 150, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.camp-layout__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 69, 150, 0.6);
    opacity: 0.85;
}
.camp-layout__main {
    width: 50%;
    flex-shrink: 0;
}

@media screen and (max-width: 768px) {
    .camp-layout {
        display: block;
        padding-top: 0;
    }
    .camp-layout__side {
        display: none;
    }
    .camp-layout__main {
        width: 100%;
    }
    .p-campaign-single {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.p-campaign-single {
    max-width: 390px;
    margin: 0 0 0 auto;
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.1));
    background: #fff;
}

/* --- Hero --- */
.camp-hero {
    padding-top: 0;
    text-align: center;
}
.camp-hero__image {
    border-radius: 0;
    margin-bottom: 0;
    position: relative;
}
.camp-hero__image > img {
    width: 100%;
    display: block;
}
.camp-hero__image-overlay {
    position: absolute;
    bottom: 0;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 40px);
    background: #fff;
    padding: 16px;
    border-radius: 20px;
    justify-content: center;
    transform: translateY(50%);
}
.camp-hero__x {
    width: 14px;
    height: 14px;
}
.camp-hero__body {
    padding: 60px 20px 80px;
    background: url(../images/common/bg-dots.webp);
}
.camp-hero__logo {
    width: 50%;
    max-width: 110px;
}
.camp-hero__logo img {
    width: 100%;
    display: block;
    object-fit: contain;
    object-position: center right;
}
.camp-hero__header-logo {
    width: 50%;
    max-width: 110px;
}
.camp-hero__header-logo img {
    width: 100%;
    display: block;
    object-fit: contain;
    object-position: center left;
}
.camp-hero__title-image {
    margin: 0 auto 16px;
}
.camp-hero__title-image img {
    width: 100%;
}
.camp-hero__title {
    font-weight: 900;
    line-height: 1.4;
    color: #FF4596;
    margin-bottom: 12px;
}
.camp-hero__title--large {
    font-size: 32px;
}
.camp-hero__title--medium {
    font-size: 24px;
}
.camp-hero__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}
.camp-hero__period {
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 3px solid #fff;
    padding: 18px 20px 12px;
    margin-bottom: 24px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border-radius: 8px;
    justify-content: center;
}
.camp-hero__period-badge {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
    color: #697787;
    background: #fff;
    padding: 5px 12px;
    white-space: nowrap;
    line-height: 16px;
    border-radius: 1000000000000px;
}
.camp-hero__period-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FF4596;
    margin-right: 2px;
}
.camp-hero__period-day {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #FF4596;
}
.camp-hero__period-sep {
    font-size: 16px;
    color: #FF4596;
    margin: 0 10px;
}
.camp-hero__cta {
    margin-bottom: 0;
}
.camp-btn-cta {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    padding: 20px 18px;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
}
.camp-btn-cta:hover {
    opacity: 0.85;
}

/* --- Description --- */
.camp-desc {
    padding: 36px 20px 0;
    background: #fff;
    border-radius: 20px;
    margin-top: -20px;
}
.camp-desc__inner {
    text-align: center;
}
.camp-desc__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #FF4596;
    margin-bottom: 10px;
}
.camp-desc__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #697787;
    margin-bottom: 24px;
    line-height: 1.3;
}
.camp-desc__image {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.camp-desc__image img {
    width: 100%;
    display: block;
}
.camp-desc__body {
    text-align: left;
    font-size: 14px;
    line-height: 1.9;
    color: #323840;
}

/* --- Points --- */
.camp-points {
    padding: 40px 20px 56px;
    position: relative;
    background: #fff;
    z-index: 2;
    margin-bottom: -20px;
    border-radius: 0 0 20px 20px;
}
.camp-points__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.camp-points__item {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
}
.camp-points__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.camp-points__icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #FF4596;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camp-points__icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    object-position: center center;
}
.camp-points__title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.camp-points__desc {
    font-size: 14px;
    line-height: 1.6;
    color: #667085;
}

/* --- Benefits --- */
.camp-benefits {
    background: url(../images/common/bg-dots.webp);
    border-radius: 0;
    padding: 64px 24px 100px;
    text-align: center;
    margin-bottom: 0;
}
.camp-benefits__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin-bottom: 10px;
}
.camp-benefits__subtitle {
    font-size: 18px;
    color: #697787;
    margin-bottom: 32px;
    line-height: 1.5;
    font-weight: 700;
}
.camp-benefits__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}
.camp-benefits__card {
    position: relative;
}
.camp-benefits__card:nth-child(1)::after,
.camp-benefits__card:nth-child(2)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -32px;
    transform: translateX(-50%);
    width: 4px;
    height: 32px;
    background: rgba(255, 69, 150, 0.6);
}
.camp-benefits__card {
    background: #fff;
    border: 2px solid #FF4596;
    border-radius: 14px;
    padding: 24px 16px 20px;
    text-align: left;
    position: relative;
}
.camp-benefits__badge {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #FF4596;
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}
.camp-benefits__card-title {
    font-size: 18px;
    font-weight: 700;
    color: #FF4596;
    margin-bottom: 8px;
    line-height: 24px;
    text-align: center;
}
.camp-benefits__card-desc {
    font-size: 14px;
    line-height: 22px;
    color: #444D57;
}
.camp-benefits__note {
    font-size: 12px;
    line-height: 1.6;
    color: #667085;
    text-align: left;
    margin-bottom: 24px;
}
.camp-benefits__cta {
    margin-top: 24px;
}

/* --- Free Zone --- */
.camp-free {
    padding: 32px 20px 56px;
    text-align: center;
    border-radius: 20px 20px 20px 20px;
    background: #fff;
    margin-top: -20px;
    z-index: 2;
    position: relative;
}
.camp-free__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #FF4596;
    margin-bottom: 8px;
}
.camp-free__subtitle {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 24px;
}
.camp-free__image {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.camp-free__image img {
    width: 100%;
    display: block;
}
.camp-free__body {
    text-align: left;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}

/* --- Notice --- */
.camp-notice {
    padding: 56px 20px 120px;
    background: #EBEEF2;
    text-align: center;
    margin-top: -20px;
}
.camp-notice__title {
    font-size: 16px;
    font-weight: 700;
    color: #FF4596;
    margin-bottom: 17px;
    line-height: 1.9;
}
.camp-notice__body {
    text-align: left;
    font-size: 12px;
    line-height: 1.7;
    color: #323840;
}

/* --- Campaign Single SP --- */
@media screen and (max-width: 768px) {
    .camp-hero {
        padding-top: 65px;
    }
    .camp-hero__title--large {
        font-size: 26px;
    }
    .camp-hero__title--medium {
        font-size: 20px;
    }
    .camp-btn-cta {
        font-size: 18px;
        padding: 16px;
    }
    .camp-desc__title {
        font-size: 20px;
    }
    .camp-benefits {
        padding: 32px 16px;
    }
    .camp-benefits__title {
        font-size: 20px;
    }
    .camp-free__title {
        font-size: 20px;
    }
}


section.how-to {
    padding-top: 180px;
    padding-bottom: 160px;
    margin-top: -50px;
        background: url(../images/common/bg-dots.webp);
}

.how-to__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 40px;
}
h3.how-to__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

p.how-to__subtitle {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #BBC3CD;
}

.how-to__steps {
    display: flex;
    justify-content: space-between;
    gap: 35px;
    position: relative;
}

.how-to__arrow {
    display: none;
}

.how-to__item{
    width: calc((100% - 70px) / 3);
    background: #fff;
    border-radius: 5px;
    position: relative;
}

.how-to__item:nth-child(1)::after,
.how-to__item:nth-child(3)::after {
    content: "";
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    width: 20px;
    height: 20px;
    background: url(../images/howto/arrows-step.svg) center / contain no-repeat;
}

.how-to__item .card__header {
    text-align: center;
    padding: 6px;
    background: #697787;
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 700;
    letter-spacing: .05em;
    border-radius: 5px 5px 0 0;
}

.how-to__item .card__body {
    padding: 20px 0px 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    justify-content: space-between;
}
.how-to__item h4.card__title {
    padding-bottom: 12px;
    margin-bottom: 12px;
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
    font-size: 20px;
    color: #FF4596;
    letter-spacing: .05em;
    border-bottom: 1px dashed #BBC3CD;
}

.how-to__item p.card__desc {
    line-height: 1.6;
    letter-spacing: .02em;
    margin-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
}
.how-to__item .card__ui-images,
.how-to__item .card__ui-images img,
.how-to__item .card__finish-visual,
.how-to__item .card__finish-visual img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.how-to__footer {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    max-width: 100%;
}

a.btn-detail{
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    min-width: 212px;
    padding: 16px;
    text-align: center;
    display: block;
    max-width: 100%;
    background-color: #7C8C9F;
    color: #fff;
    line-height: 1.2;
    font-size: 16px;
    border-radius: 10000000000000px;
    transition: .25s;
}

a.btn-detail:hover{
    background-color: #FF4596;
    transition: .25s;
}



.cta__inner {
    max-width: 880px;
    margin: auto;
}

section.cta {
    padding-top: 100px;
    padding-bottom: 100px;
    border-radius: 60px;
    margin-top: -60px;
    background: #fff;
    position: relative;
    z-index: 2;
}

h2.cta__copy {
    font-size: 124.71px;
    font-weight: 700;
    color: #FF4596;
    line-height: 1;
}

.cta__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cta__action {
    max-width: 340px;
width: 38%;
}

.cta__apps {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.cta__apps a:first-of-type{
    width: 45%;
    transition: .25s;
}

.cta__apps a:last-of-type{
    width: 49%;
    transition: .25s;
}

.cta__apps a:hover{
    transform: translateY(-2.5px);
    transition: .25s;
}
.cta__apps a:first-of-type img,
.cta__apps a:last-of-type img{
    width: 100%;
}


.cta__notes {
    font-size: 14px;
    line-height: 1.6;
}

/* ボタンの親要素（位置調整用） */
.cta__btn-wrap {
    text-align: center; /* 中央揃えにする場合 */
    margin-bottom: 24px;
    margin-top: 24px;   /* 必要に応じて余白を調整 */
}

/* ボタン本体のスタイル */
.btn-web-cta {
    display: inline-block;
    padding: 15px 80px; /* 上下左右の余白（Figmaの値に合わせて調整してください） */
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #ffffff; /* 文字色：白 */
    font-size: 18px; /* フォントサイズ（適宜調整） */
    font-weight: 500; /* 太字 */
    text-decoration: none; /* 下線を消す */
    border-radius: 100px; /* 完全に丸い角 */
    position: relative; /* 擬似要素（光）の基準位置にする */
    overflow: hidden; /* 擬似要素がボタンからはみ出さないようにする */
    box-shadow: 0 4px 15px rgba(255, 69, 150, 0.4); /* 柔らかいピンクの影（必要に応じて） */
    transition: transform 0.2s, box-shadow 0.2s; /* ホバー時のアニメーション用 */
}


/* ホバー（マウスを乗せた時）のエフェクト */
.btn-web-cta:hover {
    transform: translateY(-2px); /* 少し上に浮く */
    box-shadow: 0 6px 20px rgba(255, 69, 150, 0.6); /* 影を強くする */
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    opacity: 0.85;
}



section.useful{
    padding-top: 240px;
    padding-bottom: 180px;
    margin-top: -60px;
}

.bg-wrap-dots{

    background: url(../images/common/bg-dots.webp);
}

.useful__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 40px;
}

h3.useful__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

p.useful__subtitle{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #BBC3CD;
}
.fv__btn-wrap {
    margin-top: 18px;
}
.fv__btn-wrap a.btn-web {
    display: inline-block;
    /* padding: 15px 80px -> 15/1440=1.04vw, 80/1440=5.55vw */
    padding: 1.04vw 5.55vw;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #ffffff;
    /* font-size: 16px -> 16/1440=1.11vw */
    font-size: 1.11vw;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6.94vw; /* 100px相当。十分大きな値をvwで指定 */
    position: relative;
    overflow: hidden;
    /* box-shadowも連動させる場合（ぼかし幅などをvwに） */
    box-shadow: 0 0.27vw 1.04vw rgba(255, 69, 150, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fv__btn-wrap a.btn-web:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 69, 150, 0.6);
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    opacity: 0.85;
}

.fv__logo-sub {
    /* 1440pxで252pxになる比率を維持 */
    width: 17.5vw;
    height: auto; /* アスペクト比を維持 */
}

/* 任意：画像そのものも親の幅いっぱいに設定 */
.fv__logo-sub img {
    width: 100%;
    height: auto;
    display: block;
}


.fv__content.w-1220 {
    width: 100%;
    margin: auto;
    max-width: 100%;
    position: relative;
    z-index: 3;
    /* 左側に110px相当の余白（1440px基準） */
    margin-left: 7.64vw;
}



/* 中身を縦に並べて動かす */
.fv__grid-scroll-inner {
    display: flex;
    flex-direction: column; /* 縦並び */
    animation: vertical-scroll 100s linear infinite; /* 20秒で1周 */
}

.fv__grid-scroll-inner img {
    width: 100%;
    height: auto;
    display: block;
}

/* 縦スクロールのアニメーション */
@keyframes vertical-scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%); /* 2セットあるうちの半分まで行ったら0に戻る */
    }
}


/* 中央のメイン画像（不動） */
.fv__visual-mask {
    border-radius: 50%;
    overflow: hidden;
    width: 75vw;
    height: 75vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* 一番上 */
}

/* 内側の波紋（最大 +100px まで広がる） */
.fv__visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75vw;
    height: 75vw;
    border-radius: 50%;
    background: linear-gradient(to right, #FF8DBF, #FFA5CF);
    z-index: 1;
    will-change: transform, opacity;
    transform: translate(-50%, -50%) scale(1);
    animation: ripple-wave 4s ease-out 0s infinite;
}

.fv__visual::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75vw;
    height: 75vw;
    border-radius: 50%;
    background: linear-gradient(to right, #FFB8D4, #FFD1E3);
    z-index: 0;
    will-change: transform, opacity;
    transform: translate(-50%, -50%) scale(1);
    animation: ripple-wave 4s ease-out -2.2s infinite;
}

@keyframes ripple-wave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 0;
    }
}


section.features {
    padding-top: 130px;
    padding-bottom: 230px;
    background: url(../images/common/bg-pc-feature.webp);
    background-size: cover;
    background-position: center center;
    position: relative;

    /* 1枚目の画像のような湾曲（上下が膨らんだ形）を作る */
    /* 楕円（ellipse）を使って、横幅100%・高さ110%くらいの円で切り抜くイメージ */
    clip-path: ellipse(120% 50% at 50% 50%);
    
    /* もし上下の白い部分との境界線をハッキリさせたい場合は、少し数値を調整します */
    /* ellipse(横の半径 縦の半径 at 中心x 中心y) */
}

/* スマホでは湾曲を解除、または緩やかにする場合 */
@media screen and (max-width: 768px) {
  section.features {
    padding-top: 100px;
    padding-bottom: 100px;
    clip-path: ellipse(120% 50% at 50% 50%);
    clip-path: ellipse(180% 50% at 50% 50%);
}
}


.features__header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 85px;
}

h3.features__title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

p.features__subtitle {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.features__grid {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.features__item{
    width: calc(100% / 3);
    position: relative;
    background-color: #fff;
    border-radius: 5px;
}

.features__badge strong{
    display: block;
    width: 44px;
    height: 44px;
    background-color: #FF4596;
    border-radius: 10000000px;
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.features__badge span{
    line-height: 2.2;
    display: block;
    width: max-content;
    font-size:14px;
}

.features__badge {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    font-weight: 700;
}

.card__top {
        background: url(../images/common/bg-dots.webp);
    padding: 33px 20px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px 5px 0 0;
}

p.card__heading{
    line-height: 1.6;
    font-size: 24px;
    text-align: center;
    font-weight: 700;
}
p.card__heading span{
    color: #FF4596;
}

.card__icon img,
.card__icon picture img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}







/* グリッド全体の設定 */
section.useful .useful__grid {
    display: flex;
    flex-wrap: wrap; /* スマホで折り返す用 */
    gap: 20px; /* カード間の余白 */
    margin-top: 40px;
}

/* カード1枚の設定 */
section.useful .useful__card {
    flex: 1;
    min-width: 300px; /* スマホ時の最小幅 */
    background: #fff;
    border-radius: 15px; /* デザインに合わせた角丸 */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 軽い影 */
    transition: transform 0.3s;
}

section.useful .useful__card:hover {
    transform: translateY(-5px);
}

section.useful .useful__card a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 画像部分 */
section.useful .card__img img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキスト部分のコンテナ */
section.useful .card__body {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 高さを統一するために伸ばす */
    position: relative;
}

/* 日付とラベル */
section.useful .card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
section.useful .card__date {
    font-size: 14px;
    color: #888;
}
section.useful .card__label {
    background: #FF4596;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 1px 10px;
    border-radius: 20px;
    line-height: 1.8;
    letter-spacing: .05em;
}
section.useful .card__text {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    letter-spacing: .07em;
    font-weight: bold;
    transition: .25s;
    margin-bottom: 4px;
    line-height: 1.4;
}

section.useful a:hover .card__text{
    transition: .25s;
    color: #FF4596;
}
/* 右下の矢印ボタン */
section.useful .card__btn {
    margin-top: auto; /* これで一番下に押し下げる */
    align-self: flex-end; /* これで右側に寄せる */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: relative;
}

/* 右下の矢印ボタン */
section.useful .card__btn img{
    object-fit: contain;
    width: 35px;
    height: 35px;
}

/* 下部「一覧を見る」ボタン */
section.useful .useful__footer {
    margin-top: 40px;
    text-align: right;
}

section.useful .btn-archive {
    display: inline-block;
    padding: 16px 20px;
    background: #7E8C9A;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    min-width: 250px;
    text-align: center;
}


section.useful .btn-archive:hover{
    background-color: #FF4596;
    transition: .25s;
}

/* 画像の親コンテナ */
section.useful .card__img {
    /* 比率を指定 (幅 / 高さ) */
    aspect-ratio: 300 / 175;
    
    /* 古いブラウザ対応（もし必要なら） */
    /* width: 100%; */
    /* height: auto; */
    
    /* はみ出した画像を隠す（角丸用） */
    overflow: hidden; 
    
    /* 親要素（articleなど）に角丸がある場合、ここにも継承させる */
    border-radius: 15px 15px 0 0; /* 上側だけ角丸にする例 */
}

/* コンテナ内にある実際の画像 */
section.useful .card__img img {
    width: 100%;
    height: 100%;
    
    /* * 最も重要：画像を比率を保ったまま、
     * コンテナ全体を覆うように拡大縮小（トリミング）する 
     */
    object-fit: cover;
    
    /* 画像の中心を基準にする */
    object-position: center; 
    
    /* 余計な余白を消す */
    display: block; 
}

.outline__inner.w-1000 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.outline__inner.w-1000 .outline__header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 16px;
    gap: 4px;
    margin-bottom: 40px;
}

h3.outline__title{
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

p.outline__subtitle{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #BBC3CD;
}

.outline__box {
    width: calc(100% - 244px);
    max-width: 620px;
    padding: 32px;
    background-color: #fff;
    border-radius: 8px;
}

.outline__row dt span {
    display: flex;
    text-align: center;
    width: max-content;
    width: 120px;
    background: #BBC3CD;
    color: #323840;
    line-height: 1;
    padding: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 1040px;
}

.outline__row {
    display: flex;
    gap: 12px;
    align-items: center;
}

dl.outline__list{
    display: flex;
    gap: 12px;
    font-weight: 500;
    flex-direction: column;
    margin-bottom: 20px;
}
p.outline__note {
    font-size: 16px;
    color: #697787;
    line-height: 1.6;
}

section.outline {
    padding-bottom: 220px;
}





section.support .support__header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #fff;
    margin-bottom: 40px;
}

section.support h3.support__title{
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

section.support p.support__subtitle{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

section.support {
    background: #7C8C9F;
    transition: .25s;
    padding-top: 80px;
    padding-bottom: 40px;
    margin-top: -40px;
    position: relative;
    z-index: 2;
    border-radius: 40px 40px 0 0;
}
section.support:hover{
    background-color: #323840;
    transition: .25s;
}
.support__circle {
    max-width: 500px;
    width: 100%;
    margin: auto;
    transition: transform .25s;
}

section.support:hover .support__circle {
    transform: scale(1.05);
}

.support__circle img{
    width: 100%;
    margin: auto;
}

section.support .support__inner {
    position: relative;
}

.support__btn {
    position: absolute;
    right: 92px;
    bottom: 40px;
    width: 72px;
    height: 72px;
}

.support__btn img {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
    .support__btn {
        width: 40px;
        height: 40px;
        right: 20px;
        bottom: 0;
    }
}

footer.l-footer{
    padding: 60px 20px 80px;
    border-radius: 40px 40px 0 0;
    margin-top: -40px;
    position: relative;
    z-index: 3;
    background-color: #FF4596;
}

.l-footer__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

nav.l-footer__nav ul {
    display: flex;
    gap: 20px;
    color: #fff;
    margin-top: 80px;
}

.l-footer__sns {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.l-footer__bottom{
    background-color: #444D57;
    color: #fff;
    padding: 12px;
    text-align: center;
    font-size: 10px;
}

.lang-trigger:hover img {
    /* 黒い画像を白く変えるフィルター */
    filter: brightness(0) invert(1);
}


.p-under-page__header {
    padding-top: 180px;
    padding-bottom: 80px;
        background: url(../images/common/under-page-bg-pc.webp);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
}

h2.p-under-page__title{
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    display: flex;
    flex-direction: column;
}
h2.p-under-page__title small{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    width: 100%;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    color: #FF4596;
}


.p-news-archive__inner.w-1220{
    margin-top: 100px;
    padding-bottom: 160px;
}

.p-news-archive__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 32px;
}

article.p-news-card{
    width: calc((100% - 64px) / 3);
}
.p-news-card__img {
    display: block;
    width: 100%;
    /* 比率を指定 (幅 / 高さ) */
    aspect-ratio: 358 / 200;
    
    /* 角丸の設定 */
    border-radius: 6px;
    
    /* はみ出た画像を隠す */
    overflow: hidden;
    position: relative;
}

.p-news-card__img::before{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
    content: "";
    background-color: #f23d8b;
    opacity: 0;
    transition: .25s;
    z-index: 3;
}

a:hover .p-news-card__img::before{
    opacity: .6;
    transition: .25s;
}

/* 中にある実際の画像への設定 */
.p-news-card__img img {
    width: 100%;
    height: 100%;
    /* 比率を保ったまま、枠いっぱいに広げてトリミング */
    object-fit: cover;
    transition: .25s;
    /* 画像の中心を基準に配置 */
    object-position: center;
}

a:hover .p-news-card__img img{
    transform: scale(1.1);
    transition: .25s;
}
time.p-news-card__date {
    font-size: 14px;
    color: #57626F;
}


.news__date.eng {
    font-size: 14px;
    color: #667085;
}

.p-news-card__meta span.p-news-card__label{
    font-size: 12px;
    padding: 2px 12px;
    border-radius: 100px;
    color: #fff;
    line-height: 1.8;
}

span.p-news-card__label.label--news { background-color: #f23d8b; }
span.p-news-card__label.label--news { background-color: #f23d8b; }

h3.p-news-card__title{
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
    transition: .25s;
    margin-top: 6px;
}
a:hover h3.p-news-card__title{
    color: #f23d8b;
    transition: .25s;
}
.p-news-card__body{
    margin-top: 12px;
}

.p-news-card__meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.p-news-archive__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 32px;
}

section.p-news-archive ul.filter-list {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 8px;
}
section.p-news-archive ul.filter-list li a{
    display: flex;
    align-items: center;
    width: max-content;
    padding: 4px 18px;
    border-radius: 10000000px;
    border: 1px solid #FF4596;
    background-color: #fff;
    color: #FF4596;
    transition: .25s;
    line-height: 1.8;
    letter-spacing: .05em;
}

section.p-news-archive ul.filter-list li a:hover{
    background-color: #FF4596;
    color: #fff;
    transition: .25s;
}
section.p-news-archive ul.filter-list li.is-active a{
        background-color: #FF4596;
    color: #fff;
    transition: .25s;
}


article.p-news-detail {
    padding-top: 120px;
    padding-bottom: 160px;
}

.p-news-detail__inner.w-1220 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.p-news-detail__content {
    max-width: 780px;
    background: #fff;
    padding: 40px 22px;
}

.p-news-detail__meta {
    display: flex;
    gap: 10px;
    align-items: center;
}
time.p-news-card__date {
    font-size: 14px;
    color: #57626F;
}
.p-news-detail__content span.p-news-card__label{
    font-size: 12px;
    padding: 2px 12px;
    border-radius: 100px;
    color: #fff;
    line-height: 1.8;
}

h1.p-news-detail__title {
    margin-top: 5px;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 22px;
}
.p-news-detail__content img.attachment-post-thumbnail {
    max-width: 100%;
    width: max-content;
    height: auto;
    display: block;
    object-fit: contain;
    margin: auto;
    margin-bottom: 22px;
}

.p-news-detail__content h3{
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 10px;
}

.p-news-detail__content p{
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .05em;
}








/* 目次全体のコンテナ */
.p-toc {
    border: 1px solid #ff5a9e; /* ピンクの枠線 */
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 30px;
    margin-top: 40px;
    background-color: #fffafb; /* 薄いピンクの背景 */
}

/* タイトル部分（アコーディオンのヘッダー） */
.p-toc__title {
    background-color: #ff5a9e; /* ピンク背景 */
    color: #fff;
    padding: 12px 20px;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* デフォルトの矢印を消す（Chrome/Safari） */
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 矢印アイコンの自作 */
.p-toc__title::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

/* 開いている時の矢印の向き */
.p-toc[open] .p-toc__title::after {
    transform: rotate(-135deg);
}

/* リスト部分 */
.p-toc__content {
    padding: 20px;
}

.p-toc__list {
    list-style: none; /* 序数はPHP側で入れているのでnone */
    padding: 0;
    margin: 0;
}

.p-toc__list li {
    margin-bottom: 10px;
}

.p-toc__list li:last-child {
    margin-bottom: 0;
}

.p-toc__list a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    display: block;
    transition: opacity 0.2s;
}

.p-toc__list a:hover {
    opacity: 0.7;
}

.p-news-detail__content h2 {
    padding: 4px 0px 4px 20px;
    font-size: 20px;
    line-height: 1.5;
    margin-top: 50px;
    margin-bottom: 14px;
    font-weight: 700;
    position: relative;
}
.p-news-detail__content p{
    margin-bottom: 14px;
}
.p-news-detail__content a{
    color: #FF4596;
}
/* 左端の太さ5pxのあしらい（共通） */
.p-news-detail__content h2::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 100%; /* または 38px など固定値 */
    background-color: #FF4596;
}

/* 2回目以降に出現するh2の上にボーダーを引く */
/* 目次の直後（1個目）を除外するため、隣接セレクタや否定疑似クラスを活用します */
.p-news-detail__content h2:not(:first-of-type)::before {
    content: "";
    position: absolute;
    top: -25px; /* margin-topと同じ分だけ上に配置 */
    left: 0;
    right: 0;
    height: 0.8px;
    background-color: #FF4596;
}

.p-news-detail__bottom-banner{
    margin-top: 64px;
    position: relative;
}
.p-news-detail__bottom-banner::before {
    content: "";
    position: absolute;
    top: -25px; /* margin-topと同じ分だけ上に配置 */
    left: 0;
    right: 0;
    height: 0.8px;
    background-color: #FF4596;
}



/* サイドバー全体 */
.p-news-detail__side {
    width: 302px; /* カンプのサイズ */
}

/* サイドバータイトル（三本線アイコン付き） */
.side-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 24px;
    color: #57626F;
}

.side-title div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.side-title span {
    display: block;
    width: 14px;
    height: 1.5px;
    background-color: #57626F;
}

/* 個別の記事カード */
.side-item {
    display: block;
    text-decoration: none;
    color: #333;
    margin-bottom: 32px;
}

.side-item:last-child {
    margin-bottom: 0;
}

.side-item__img {
    width: 100%;
    aspect-ratio: 16 / 9; /* カンプの画像比率に合わせる */
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 12px;
}

.side-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.side-item:hover .side-item__img img {
    transform: scale(1.05);
}

/* 日付とラベルの行 */
.side-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.side-item__date {
    font-size: 14px;
    color: #888;
}

/* ラベル共通（既存のCSSがあれば流用） */
.side-item__label {
    font-size: 12px;
    color: #fff;
    background: #FF4596; /* デフォルト色 */
    padding: 2px 10px;
    border-radius: 10000000px;
    line-height: 1.8;
}

/* 記事タイトル */
.side-item__title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    /* 2行で省略する場合 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.banner-inner {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #FF4596;
    border-radius: 30px;
    gap: 32px;
    justify-content: center;
    padding: 30px 20px;
}

.banner-inner__cta__content h2 {
    font-size: 72px;
}
.banner-inner__cta__action {
    max-width: 280px;
}

.banner-inner__cta__apps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.banner-inner__cta__apps a img{
    display: block;
    width: 100%;
    object-fit: contain;
    height: auto;
}

.banner-inner__cta__apps a:first-of-type{
    width: 45%;
}

.banner-inner__cta__apps a:last-of-type{
    width: 49%;
    
}
.p-news-detail__content a.btn-web-cta {

    color: #fff;
    padding: 13px;
    width: 100%;
    text-align: center;
    line-height: 1.2;
    font-size: 14px;
    font-weight: 500;
}

.banner-inner__cta__content h2 {
    font-size: 72px;
    padding: 0;
    line-height: 1;
    margin: 0;
}

.banner-inner__cta__content h2::before ,
.banner-inner__cta__content h2::after {
    display: none;
}


.banner-inner__cta__notes {
    margin-top: 10px;
    font-size: 12px;
}
.banner-inner__cta__notes p{
    margin: 0;
    font-size: 10px;
    line-height: 1.1;
    color: #697787;
    display: block;
}

.p-toc__content a{
    color: #323840;
}

.p-toc__content a:hover{
    text-decoration: underline;
}



:root {
    --main-pink: #FF4596;
    --light-pink: #FFE4EE;
}

.faq-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: sans-serif;
}

.faq-item {
    margin-bottom: 16px;
    border: 1px solid var(--light-pink);
    border-radius: 15px;
    overflow: hidden;
}

/* 質問エリア (engクラス) */
.faq-question.eng {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background-color: var(--light-pink);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    text-align: left;
}
.q-icon {
    background-color: var(--main-pink);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-size: 13px;
}
.q-text {
    flex-grow: 1;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.arrow-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--main-pink);
    border-bottom: 2px solid var(--main-pink);
    transform: rotate(45deg);
    transition: transform 0.3s;
    margin-left: 10px;
}

/* 開いている時の状態 */
.faq-question.is-active .arrow-icon {
    transform: rotate(-135deg);
}

/* 回答エリア */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #fff;
}

.answer-content {
    padding: 15px 30px;
    color: #444;
    line-height: 1.7;
    font-size:16px;
    border-top: 1px solid #fff;
}
.faq-category-title {
    color: var(--main-pink);
    font-size: 24px;
    margin: 68px 0 16px;
    font-weight: 700;
    line-height: 1;
}
section.p-faq-archive {
    margin-bottom: 160px;
}




/* --- 追加：初期状態の制御 --- */
.p-form-content {
    display: none; /* 最初は両方隠す */
}

.p-form-content.is-active {
    display: block !important; /* activeクラスがついた方だけ表示 */
}

/* --- 追加：タブボタンのスタイル（念のため） --- */
.c-tab-btn {
    cursor: pointer;
    /* 他のスタイルは既存のままでOK */
}

:root {
    --main-pink: #FF4596;
    --light-pink: #FFE4EE;
    --border-color: #E0E0E0;
}

.p-contact-form {
    max-width: 600px;
    margin: 0 auto;
    font-family: sans-serif;
}

.p-form-item {
    margin-bottom: 25px;
}

.p-form-item label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #333;
}

/* 必須タグ */
.c-tag--required {
    background-color: var(--main-pink);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 任意タグ */
.c-tag--optional {
    background-color: #9e9e9e;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 入力欄共通 */
.wpcf7-form-control:not([type="submit"]) {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 1rem;
}

/* セレクトボックスの矢印対応（必要に応じて） */
select.wpcf7-form-control {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* 注釈テキスト */
.c-form-note {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.6;
    margin-top: 10px;
}

.u-underline {
    text-decoration: underline;
}

/* 送信ボタン（グラデーション） */
.p-form-submit {
    text-align: center;
    margin-top: 40px;
}

.wpcf7-submit {
    width: 280px;
    max-width: 100%;
    padding: 18px;
    border: none;
    border-radius: 50px;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: opacity 0.3s;
}

.wpcf7-submit:hover {
    opacity: 0.8;
}

/* === 確認画面（インライン） === */
.confirm-screen {
    display: none;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}
.confirm-screen__lead {
    font-size: 14px;
    color: #697787;
    text-align: center;
    line-height: 1.8;
    margin-bottom: 32px;
}
.confirm-screen__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.confirm-row {
    padding-bottom: 16px;
}
.confirm-row dt {
    font-size: 13px;
    font-weight: 700;
    color: #697787;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.confirm-row dd {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}
.confirm-screen__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.confirm-screen__back {
    padding: 16px;
    border: none;
    border-radius: 100px;
    background: #57626F;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
}
.confirm-screen__back:hover {
    opacity: 0.7;
}
.confirm-screen__submit {
    padding: 16px;
    border: none;
    border-radius: 100px;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
}
.confirm-screen__submit:hover {
    opacity: 0.85;
}

/* === Thanks Page === */
.p-thanks {
    text-align: center;
}
.p-thanks .p-under-page__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.p-thanks__title {
    font-size: 48px;
    font-weight: 700;
    color: #FF4596;
    line-height: 1.2;
    margin-bottom: 24px;
}
.p-thanks__message {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.8;
}
.p-thanks__inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 60px 20px 120px;
}
.p-thanks__btn {
    max-width: 280px;
    margin: 0 auto;
}
.p-thanks__link {
    display: block;
    padding: 16px;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 100px;
    text-align: center;
    transition: opacity 0.2s;
}
.p-thanks__link:hover {
    opacity: 0.85;
}
@media screen and (max-width: 768px) {
    .p-thanks .p-under-page__header {
        padding-top: 110px;
        padding-bottom: 64px;
        background: url(../images/common/under-page-bg-sp.webp) center bottom / cover no-repeat;
    }
    .p-thanks__title {
        font-size: 48px;
    }
    .p-thanks__message {
        font-size: 18px;
    }
    .p-thanks__inner {
        padding: 40px 20px 80px;
    }
}

/* エラーメッセージの装飾（CF7デフォルト） */
.wpcf7-not-valid-tip {
    color: var(--main-pink);
    font-size: 0.8rem;
    margin-top: 5px;
}
.p-contact-archive{
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFF8FA 27%, #FFF4F8 100%);
}


.p-faq-contact {
    padding: 80px 0 180px;
}
.p-form-switcher {
    max-width: 600px;
    margin: 0 auto 40px;
    font-family: sans-serif;
    padding: 7px;
    background: #fff;
    border: 1px solid #F5D3DE;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.p-form-switcher button.c-tab-btn{
    display: block;
    width: calc((100% - 4px) / 2);
  display: block;
    padding: 7px  16px;
    line-height: 2;
    text-align: center;
    border-radius: 6px;

}
.p-form-switcher button.c-tab-btn.is-active{
  background-color: #FF4596;
  color: #fff;
}

.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: absolute;
    display: none !important;
}

.sp{
    display: none;
}

@media screen and (max-width:768px) {
.sp{
    display: block;
}
}

.p-privacy-archive__content{
    margin-top: 80px;
    padding-bottom: 180px;
}


.p-privacy-archive__content p{
    line-height: 1.8;
    font-size: 16px;
    letter-spacing: .05em;
    color: #323840;
}

.p-privacy-archive__content h2{
    line-height: 1.5;
    font-size: 16px;
    letter-spacing: .05em;
    margin-bottom: 12px;
    margin-top: 18px;
    font-weight: 700;
}

.p-privacy-archive__content h3{
    line-height: 1.5;
    font-size: 14px;
    letter-spacing: .05em;
    font-weight: 700;
}

.p-privacy-archive__content .wrap-privacy p{
    line-height: 1.7;

    letter-spacing: .08em;
    font-size: 12px;
    margin-bottom: 18px;
}

ul.p-toc__list{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

ul.p-toc__sub-list {
    padding-left: 24px;
    font-size: 14px;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

section.p-privacy-archive .p-under-page__header {
    padding-top: 130px;
    padding-bottom: 130px;
    background: url(../images/common/under-page-bg-pc.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}



.p-privacy-archive table {
    width: 100%;
    border-collapse: collapse; /* 枠線を一本にする */
    margin: 20px 0;
    font-size: 14px; /* 画像のような少し小さめのフォントサイズ */
    line-height: 1.8;
    color: #333;
    border-top: 1px solid #ccc; /* 一番上の線 */
}

.p-privacy-archive table tr {
    border-bottom: 1px solid #ccc; /* 各行の下線 */
}

.p-privacy-archive table th {
    width: 140px; /* 左側の幅を固定（画像に合わせる） */
    padding: 20px;
    text-align: left;
    vertical-align: middle;
    font-weight: normal; /* 画像では太字ではないのでnormal */
}

.p-privacy-archive table td {
    padding: 20px;
    vertical-align: middle;
    background-color: #fff;
}

/* スマホ表示の時の調整（幅が狭い場合） */
@media screen and (max-width: 600px) {
    .p-privacy-archive table th {
        width: 100px; /* スマホでは少し狭くする */
        padding: 15px 10px;
        font-size: 13px;
    }
    .p-privacy-archive table td {
        padding: 15px 10px;
        font-size: 13px;
    }
}

/* 共通テーブルスタイル（既存のものを踏襲） */
.p-privacy-archive table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    border-top: 1px solid #ccc;
}

.p-privacy-archive table tr {
    border-bottom: 1px solid #ccc;
}
/* --- 1. 基本設定（ここからズレを直します） --- */
.p-privacy-archive table.table02,
.p-privacy-archive table.table03 {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin: 20px 0;
    /* display: block; などの指定はここでは不要です（テーブルの挙動を壊すため） */
}

/* --- 2. セルの指定（画像通り左寄せ・白背景） --- */
.p-privacy-archive table.table02 th,
.p-privacy-archive table.table02 td,
.p-privacy-archive table.table03 th,
.p-privacy-archive table.table03 td {
    padding: 15px 10px;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    font-weight: normal;
    border-bottom: 1px solid #ccc; /* 下線のみ */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* 1列目（等級）の幅を確保 */
.p-privacy-archive table.table02 th:first-child,
.p-privacy-archive table.table03 th:first-child {
    width: 80px; /* 画像のバランスに合わせて少し狭めています */
}

/* --- 3. スマホ・ハミ出し対策（正解はこれ） --- */
@media screen and (max-width: 600px) {
    /* テーブルの親要素、またはテーブル自体を囲うdivにこれを当てるのが一般的ですが、
       直接当てる場合は以下のみにしてください */
    .p-privacy-archive table.table02,
    .p-privacy-archive table.table03 {
        display: block;      /* ここでのみblockを許可 */
        overflow-x: auto;    /* 横スクロールを出す */
        -webkit-overflow-scrolling: touch;
    }
}

/* --- 4. 注釈と見出し --- */
.table-note {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin: 10px 0 30px;

}

.table-caption {
    font-size: 14px;
    font-weight: normal;
    margin: 40px 0 10px;
}
    section.p-privacy-archive .p-toc__list a{
        line-height: 1.5;
    }

@media screen and (max-width:768px){
    section.p-privacy-archive .p-under-page__header {
    padding-top: 100px;
    padding-bottom: 74px;
    background: url(../images/common/under-page-bg-pc.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}
h2.p-under-page__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}
.p-privacy-archive__content {
    margin-top: 32px;
    padding-bottom: 120px;
}
    section.p-privacy-archive .p-toc__title {
    padding: 10px 14px 6px;

    line-height: 1.5;
}
    section.p-privacy-archive .p-toc {
    margin-bottom: 30px;
    margin-top: 14px;
}
    section.p-privacy-archive .p-toc__content {
    padding: 15px 20px;
}

.lang-select {
    display: none;
}
a.btn-partner{
    display: none;
}
.l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    background: #fff;
}
}


/* アーカイブページ全体のレイアウト設定 */
.p-useful-archive {
    padding: 0px 0 0px;
}

.p-useful-archive__inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
}

/* カテゴリフィルター（既存踏襲） */
.p-useful-archive__filter {
    margin-bottom: 40px;
}

.filter-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
}

.filter-list li a {
    display: block;
    padding: 8px 24px;
    border: 1px solid #ddd;
    border-radius: 30px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.3s;
}

.filter-list li.is-active a,
.filter-list li a:hover {
    background: #FF4596;
    border-color: #FF4596;
    color: #fff;
}

/* グリッド全体の設定（Gridを使うと高さが自動で揃いやすくなります） */
.useful__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC時は3カラム */
    gap: 40px 20px; /* 縦 40px / 横 20px */
}

/* カード1枚の設定 */
.useful__card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    height: 100%;
}

.useful__card:hover {
    transform: translateY(-5px);
}

.useful__card a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 画像部分 */
.useful__card .card__img {
    aspect-ratio: 300 / 175;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}

.useful__card .card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* テキスト部分のコンテナ */
.useful__card .card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

/* 日付とラベル */
.useful__card .card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.useful__card .card__date {
    font-size: 14px;
    color: #888;
}

.useful__card .card__label {
    background: #FF4596;
    color: #fff;
    font-size: 11px; /* 少し小さめに調整 */
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 1.5;
    letter-spacing: .05em;
}

.card__text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    letter-spacing: .05em;
    font-weight: bold;
    transition: .25s;
    margin-bottom: 15px;
    /* 3行以上になる場合に「...」で省略したいなら以下を追加（任意） */
    /* display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; */
}

.useful__card a:hover .card__text {
    color: #FF4596;
}

/* 右下の矢印ボタン */
.card__btn {
    margin-top: auto;
    align-self: flex-end;
    width: 30px;
    height: 30px;
}

.card__btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ページネーション（アーカイブ専用） */
.p-news-archive__pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.p-news-archive__pagination .page-numbers {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: .3s;
}

.p-news-archive__pagination .page-numbers.current,
.p-news-archive__pagination .page-numbers:hover {
    background: #FF4596;
    color: #fff;
    border-color: #FF4596;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
    .useful__grid {
        grid-template-columns: repeat(2, 1fr); /* タブレットは2カラム */
    }
}

@media screen and (max-width: 640px) {
    .useful__grid {
        grid-template-columns: 1fr; /* スマホは1カラム */
        gap: 30px;
    }
}

.p-useful-archive__inner.w-1220 {
    padding-top: 100px;
    padding-bottom: 180px;
}


/* 全体レイアウト */
.p-howto-archive__inner {
    padding-bottom: 100px;
}

.p-howto-archive__lead {
    text-align: left;
    line-height: 1.8;
    margin-bottom: 50px;
    font-size: 16px;
 
    color: #323840;
}

.p-howto-archive__contents {
    padding-top: 80px;
    padding-bottom: 180px;
}

/* タブボタンのデザイン */
.p-howto-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 60px;
}

.p-howto-tabs input[type="radio"] {
    display: none;
}

.tab-item {
    cursor: pointer;
    width: 260px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 40px;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3;
    transition: all 0.3s ease;
    border: 2px solid #FF4596;
    position: relative;
}

/* 吹き出しの三角 */
.tab-item::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FF4596;
    opacity: 0;
}

/* 未選択：白背景ピンク枠 */
.tab-item {
    background: transparent;
    color: #FF4596;
}

/* 選択時：ピンク背景白文字 */
#tab_official:checked ~ .official,
#tab_mydesign:checked ~ .mydesign {
    background: #FF4596;
    color: #fff;
}

#tab_official:checked ~ .official::after,
#tab_mydesign:checked ~ .mydesign::after {
    opacity: 1;
}

/* コンテンツ表示切り替え */
.tab-content {
    display: none;
    width: 100%;
    margin-top: 40px;
}

#tab_official:checked ~ #content_official,
#tab_mydesign:checked ~ #content_mydesign {
    display: block;
}
.p-howto-archive__lead{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* ステップカード */
.step-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.step-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 0;
}

.step-label {
    background: #6D7C8D;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.1em;
}

.step-card.finish .step-label {
    background: #7E8C9A;
}

.step-body {
    display: flex;
    align-items: flex-start;
    padding: 0px 0 0 0px;
    gap: 30px;
}

.step-text {
width: 50%;
padding-left: 40px;
}
.step-text h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 14px;
    color: #333;
    border-bottom: 1px dashed #BBC3CD;
    padding-bottom: 16px;
    line-height: 1.5;
    margin-top: 40px;
}

.step-text p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
}

.step-img {
   width: 50%;
}

.step-img img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* ステップ間の矢印 */
.step-arrow {
    width: 24px;
    height: 24px;
}

/* 入稿規定ボックス */
.regulation-box {
    max-width: 600px;
    margin: 0 auto 50px;
    background: #FFE6F0;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
}

.regulation-title {
    color: #FF4596;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
}

.regulation-box p {
    font-size: 14px;
    margin-bottom: 15px;
}

.regulation-list {
    background: #fff;
    display: inline-block;
    text-align: left;
    padding: 20px 40px;
    border-radius: 10px;
    list-style: disc;
    font-size: 14px;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .step-body {
        flex-direction: column;
        padding: 20px;
    }
    .step-img {
        flex: 0 0 auto;
        width: 100%;
    }
    .tab-item {
        width: 45%;
        font-size: 14px;
    }
}



/* 2と3の間の不要な矢印を消すための設定 */
.common-steps .step-arrow:last-child {
    display: none;
}

/* タブの矢印制御：non-active（チェックされていない方）は隠す */
.tab-item::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #FF4596;
    display: none; /* デフォルト非表示 */
}

/* 選択されている時だけ表示 */
#tab_official:checked + .official::after,
#tab_mydesign:checked + .mydesign::after {
    display: block;
}

/* カード内の注釈などの微調整 */
.step-text small {
    display: block;
    font-size: 12px;
    margin-top: 10px;
    color: #888;
}

/* 審査完了後のfinishラベルの色を調整（画像に合わせて） */
.step-card.finish .step-label {
    background: #7E8C9A;
}


section.cta.cta-how-to{
    border-radius: 60px 60px 0 0;
}













/* ── ハンバーガーボタン ── */
.menu-trigger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 1001;
}

.menu-trigger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    transform-origin: center;
}

/* 開いた状態 → × */
.menu-trigger.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.menu-trigger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.menu-trigger.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ── オーバーレイ ── */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: #5202256b;
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── ドロワー本体 ── */
.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 610px;
    max-width: 100vw;
    height: 100dvh;
    background: #fff;
    z-index: 999;
    transform: translateX(calc(100% + 149px));
    transition: .7s;
    opacity: 0;
}
.nav-drawer::before {
    content: "";
    width: 149px;
    height: 100%;
    object-fit: contain;
    background-image: url(../images/common/pc-nav-before.webp);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    left: -148px;
    display: block;
    top: 0;
    position: absolute;
    z-index: 2;
}
.nav-drawer__scroll {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 140px;
    padding-bottom: 60px;
    padding-right: 90px;
    gap: 28px;
}
.nav-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    transition: .7s;
}
@media screen and (max-width:768px){
    
/* ── ドロワーヘッダー ── */
.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 20px;
    border-bottom: 1px solid #EBEEF2;
}

.nav-drawer::before {display: none;
}
.nav-drawer.is-open{
    left: 0;
    right: 0;
}
.nav-overlay {
    position: fixed;
    inset: 0;
    background: #5202256b;
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    width: 100vw;
    height: 100svh;
}
section.solution::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    clip-path: ellipse(120% 100% at 50% 100%);
}
section.solution {
    overflow-x: hidden;
}
}
.nav-drawer__logo {
    height: 36px;
    width: auto;
}
.nav-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #1a1a1a;
    padding: 4px;
    display: flex;
    align-items: center;
}

/* ── ナビリスト ── */
.nav-drawer__nav {
    padding: 8px 0;
}
.nav-drawer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-drawer__nav li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #BBC3CD;
    text-decoration: none;
    transition: background 0.15s;
}
.nav-drawer__nav li:last-of-type a{
    border-bottom: 0px solid #BBC3CD;

}
.nav-en {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #BBC3CD;
    letter-spacing: 0.05em;
    transition: .25s;
}
li:hover .nav-en{
    color: #FF4596;
    transition: .25s;
}
.nav-ja {
    font-size: 14px;
    color: #444D57;
}

li:hover .nav-ja {
    color: #FF4596;
    transition: .25s;
}
/* ── フッター部分 ── */
.nav-drawer__footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;

}
.nav-drawer__catch {
    font-size: 14px;
    color: #323840;
    text-align: center;
    background: #eaeef2;
    border-radius: 100px;
    padding: 8px 22px;
    margin: 0;
    font-weight: 700;
    line-height: 1.6;
    position: relative;
}

.nav-drawer__catch::before{
    content: "";
    display: block;
    width: 34px;
    height: 16px;
    background-image: url(../images/common/after-comment.webp);
    position: absolute;
    left: 50%;
    bottom: -14px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateX(-50%);
}

.nav-drawer__apps a img{
display: block;
width: 100%;
object-fit: contain;
}

.nav-drawer__apps__wrap{
    padding: 32px 20px 22px;
    background-color: #ff459641;
    border-radius: 10px;
}
.nav-drawer__catch span{
    color:#FF4596;
}
.nav-drawer__apps {
    display: flex;
    gap: 10px;
    max-width: 280px;
    margin: auto;
    margin-bottom: 11px;
}
.nav-drawer__sns__wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}
.app-btn img {
    height: 40px;
    width: auto;
}
.btn-web-primary {
    display: block;
    text-align: center;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 16px;
    border-radius: 100px;
    text-decoration: none;
    transition: opacity 0.2s;
    max-width: 294px;
    margin: auto;
}
.btn-web-primary:hover {
    opacity: 0.85;
}
.btn-partner-outline {
    display: block;
    text-align: center;
    border: 1.5px solid #1a1a1a;
    color: #1a1a1a;
    font-size: 14px;
    padding: 14px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.15s;
}
.btn-partner-outline:hover {
    background: #f5f5f5;
}
.nav-drawer__sns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: #323840;
    margin-top: 12px;
}

.nav-drawer__sns span{
    display: flex;
    align-items: center;
    gap: 8px;

}

.nav-drawer__sns span img{
    display: block;
   width: 9px;
   height: 9px;
}

/* ── SP対応（767px以下） ── */
@media (max-width: 767px) {
    .nav-drawer {
        width: 100vw;
    }
    .nav-drawer__head {
        padding: 16px 20px;
    }
    .nav-drawer__nav li a {
        padding: 16px 20px;
    }
    .nav-drawer__footer {
        padding: 20px 20px 40px;
    }
}



@media screen and (max-width:768px) {
 .fv__inner::before{
    display: none;
 }   
 .fv__content.w-1220 {
    margin-left: 0;
}
h3.solution__title span.deco-lr {
    font-size: 32px;
    text-align: center;
    color: #FF3D8A;
}
h3.solution__title {
    font-size: 24px;
    margin: 0 auto 22px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 40px;
}
h3.solution__title::after, 
h3.solution__title::before {
    width: 22px;
    height: 44px;
}
p.solution__lead {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .05em;
}
section.news {
    padding-bottom: 62px;
    padding-top: 80px;
}
h3.news__title.eng {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
h3.campaign__title.eng {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
a.news__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
a.campaign__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
a.campaign__more::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
a.news__more::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    margin-top: 4px;
}
.cta__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
h2.cta__copy {
    font-size: 40px;
    font-weight: 700;
    color: #FF4596;
    line-height: 1;
}
h2.cta__copy br{
   display: none;
}
.cta__apps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 16px;
}
.cta__action {
    max-width: calc(100% - 40px);
    width: 100%;
}
section.cta{
    background-color: transparent;
    margin-top: -0px;
    position: relative;
    background: url(../images/common/bg-dots.webp);
    border-radius: 0;
    overflow: hidden;
}
.cta__inner{
    position: relative;
    z-index: 3;
}
section.cta::before{
    position: absolute;
    width: 130vw;
    height: 130vw;
    max-width: 600px;
    max-height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    content: "";
        border-radius: 11000000180px;
}
section.cta {
    background-color: transparent;
    margin-top: -40px;
    position: relative;
}
section.useful {
    padding-top: 64px;
    padding-bottom: 120px;
    margin-top: 0;
}
.how-to__steps {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    flex-direction: column;
}
.how-to__item {
    width: 100%;
    background: #fff;
    border-radius: 5px;
    position: relative;
}
.how-to__item:nth-child(1)::after,
.how-to__item:nth-child(3)::after {
    right: auto;
    top: auto;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
}
.how-to__item h4.card__title{
    width: calc(100% - 60px);
    margin-left: 30px;
}
h3.how-to__title ,
h3.useful__title,
h3.features__title{
    font-size: 32px;
}
p.how-to__subtitle,
p.useful__subtitle,
p.features__subtitle {
    font-size: 14px;
}
.outline__inner.w-1000 .outline__header {
    justify-content: center;
    align-items: center;
}
dl.outline__list {
    display: flex;
    gap: 18px;
    font-weight: 500;
    flex-direction: column;
    margin-bottom: 20px;
}
h3.outline__title,
section.support h3.support__title{
    font-size: 24px;
}
p.outline__subtitle,
section.support p.support__subtitle{
    font-size: 14px;

}
.support__circle {
    max-width: 500px;
    width: 100%;
    margin: auto;
    padding: 0 72px;
}
section.outline {
    padding-bottom: 120px;
}
section.useful .btn-archive {
    display: inline-block;
    padding: 16px 20px;
    background: #7E8C9A;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    min-width: 250px;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    margin-left: auto;
    margin-right: auto;
}
section.useful .useful__footer {
    margin-top: 40px;
    text-align: center;
}
.features__item {
    width: 100%;
    position: relative;
    background-color: #fff;
    border-radius: 5px;
}
.features__grid {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 58px;
}
p.problem__lead {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 22px;
}
.problem__clouds {
    width: 100%;
    max-width: 750px;
    margin: auto;
    margin-bottom: 13px;
}
p.problem__footer-copy {
    font-size: 20px;
    text-align: center;
    line-height: 1.6;
    font-weight: 700;
    color: #444D57;
}
section.solution {
    position: relative;
    padding-top: 48px;
    margin-top: -40px;
    z-index: 2;
}
p.solution__lead {
    font-size: 24px;
    line-height: 32px;
}
.solution__visual {
    width: 100%;
    margin-top: 24px;
}
.news__header {
    margin-bottom: 16px;
}
.news__text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
    color: #333;
}
.news__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    margin-bottom: 8px;
}
.campaign__header {
    margin-bottom: 16px;
}
.campaign__text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
    color: #333;
}
section.how-to {
    padding-top: 120px;
    padding-bottom: 100px;
}
.outline__inner.w-1000 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.outline__box {
    width: 100%;
    max-width: 620px;
    padding: 32px 30px;
    background-color: #fff;
    border-radius: 8px;
}
.outline__row dt span {
    font-size: 14px;
    padding: 8px 12px;
    width: 80px;
}

p.outline__note {
    font-size: 14px;
    color: #697787;
    line-height: 1.6;
}

section.support {
    background: #7C8C9F;
    transition: .25s;
    padding-top: 40px;
    padding-bottom: 100px;
    margin-top: -20px;
    border-radius: 20px 20px 0 0;
}
nav.l-footer__nav ul {
    display: flex;
    gap: 24px;
    color: #fff;
    margin-top: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
footer.l-footer {
    padding: 60px 20px 32px;
    border-radius: 40px 40px 0 0;
    margin-top: -40px;
    position: relative;
    z-index: 3;
    background-color: #FF4596;
}
.features__badge span {
    line-height: 2.2;
    display: block;
    width: max-content;
    font-size: 12px;
}

.cta__apps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 16px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}section.useful .card__btn img,
section.useful .card__btn {
    object-fit: contain;
    width: 32px;
    height: 32px;
}

}

.btn-partner-outline{
    display: none;
}
/* ── SP：Slick用の余白調整 ── */
@media screen and (max-width: 768px) {
   body.home .useful__grid {
        margin: 0 -20px; /* 親のパディングを打ち消して端までスクロール */
        padding-left: 20px; /* 開始位置の余白 */
    }

   body.home .useful__card {
        width: 280px;      /* カード1枚の幅 */
        margin-right: 18px; /* 要素間の間隔 18px */
        outline: none;
    }

    /* Slickの構造上、最後の要素にもマージンがつくので調整 */
   body.home .useful__card:last-child {
        margin-right: 20px; 
    }
    
    /* slick-list の隙間を埋める */
   body.home .slick-list {
        overflow: visible; /* 次のカードが見えるようにする */
    }
      body.home section.useful {
    padding-top: 64px;
    padding-bottom: 120px;
    margin-top: 0;
    overflow: hidden;
}
   body.home section.useful .card__text {
    font-size: 18px;
    line-height: 1.4; /* 重複していたので1.4に統合 */
    color: #333;
    letter-spacing: .07em;
    font-weight: bold;
    transition: .25s;
    margin-bottom: 4px;

    /* ── 2行で三点リーダーを表示 ── */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* ここで行数を指定 */
    overflow: hidden;
}
.nav-ja {
    font-size: 12px;
    color: #444D57;
}
.nav-drawer__apps__wrap {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

h3.problem__title {
    display: block;
    font-size: 30px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}
span.highlight {
    /* 修正ポイント：inline-block にして横に文字が来れるようにする */
    display: inline-block;
    vertical-align: middle; /* 横の文字と高さを合わせる */
    
    /* 余白の調整（右側も padding を入れる） */
    padding: 4px 15px 6px　0; 
    background: #FF3D8A;
    line-height: 1.1;
    color: #fff;
    border-radius: 10px;
    font-size: 30px;
    margin-right: 8px; /* 「を」との間の微調整 */
}
section.problem {
    padding-top: 0px;
    padding-bottom: 120px;
    position: relative;
    margin-top: 0px;
    background-image: none;
}.problem__inner.w-1000{
    z-index: 2;
    position: relative;

}
section.problem::before{
    position: absolute;
    content: "";
    width: 100%;
    height: calc(100% - 24px);
    z-index: 0;
    top: 24px;
    background: url(../images/common/bg-dots.webp);
    clip-path: ellipse(120% 100% at 50% 100%);

}

/* スライダーコンテナ：右側だけ画面端まで突き出し */
.news__slider-container {
    margin-right: calc(50% - 50vw);
    overflow: visible;
}

.news__slider .slick-list {
    overflow: visible !important; /* これで右側の見切れを防ぐ */
    padding-right: 20vw; /* 最後のアイテムの後の余白を確保 */
}

.news__item {
    width: 394px; /* PCのカード幅 */
    padding-right: 24px;
}

/* SPでの突き出し設定 */
@media (max-width: 767px) {
    .news__slider-container {
        /* SPでも右側を突き出させる */
        margin-right: calc(50% - 50vw);
        margin-left: 0;
    }
    .news__item {
        width: 280px; /* スマホで見やすいカード幅に固定 */
        padding-right: 15px;
    }
}

.campaign__slider-container {
    margin-right: calc(50% - 50vw);
    overflow: visible;
}

.campaign__slider .slick-list {
    overflow: visible !important;
    padding-right: 20vw;
}

.campaign__item {
    width: 394px;
    padding-right: 24px;
}

@media (max-width: 767px) {
    .campaign__slider-container {
        margin-right: calc(50% - 50vw);
        margin-left: 0;
    }
    .campaign__item {
        width: 280px;
        padding-right: 15px;
    }
}

/* --- ドットの位置調整 --- */
.news__dots-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

div#news-dots-anchor {
    position: relative !important;
}
div#news-dots-anchor .slick-dots {
    position: absolute;
    bottom: 0 !important;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
div#campaign-dots-anchor {
    position: relative !important;
}
div#campaign-dots-anchor .slick-dots {
    position: absolute;
    bottom: 0 !important;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots {
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

.slick-dots li {
    width: 8px;
    height: 8px;
}

.slick-dots li button {
    font-size: 0;
    width: 8px;
    height: 8px;
    background: #EBEEF2; /* 未選択の色 */
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.slick-dots li.slick-active button {
    background: #475467; /* 選択中の色 */
    width: 8px;
}
.fv__copy01, 
.fv__copy02 {
    font-size: 42px;
    display: block;
    letter-spacing: .05em;
    color: #fff !important;
    text-align: center;
}
.fv__copy03 {
    display: block;
    letter-spacing: .05em;
    color: #fff;
    text-align: center;
    font-size: 63px;
    white-space:nowrap;
}
.fv__content.w-1220{
    position: relative;
    width: 100%;
}
.fv__visual-mask {
    border-radius: 50%;
    overflow: hidden;
    width: 170vw;
    height: 170vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.fv__visual {
    position: absolute;
    left: 50%;
    top: -48vw;
    width: 170vw;
    height: 170vw;
    transform: translateX(-50%);
    right: auto;
}

/* 内側のアニメーション：75vw → 75vw + 100px */
.fv__visual::before {
    width: 170vw;
    height: 170vw;
}
.fv__visual::after {
    width: 170vw;
    height: 170vw;
}.fv__inner {
    padding-top: 38vw;
    padding-bottom: 110px;
}
.fv__copy02 span {
    color: #fff;
}

h2.fv__copy {
    margin-bottom: 40vw;
    width: 100%;
}
.fv__btn-wrap a.btn-web {
    display: block;
    padding: 15px 20px;
    background: url(../images/common/btn-bg.webp) right top / cover no-repeat;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 69, 150, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.fv__logo-sub {
    width: 100%;
    height: auto;
}
.fv__apps a {
    display: block;
    width: auto;
    transition: .25s;
    height: auto;
}
.fv__apps {
    display: flex;
    gap: 20px;
    padding-left: 0px;
    padding-top: 24px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.fv__apps a img {
    display: block;
    width: 100%;
    height:auto;
    object-fit: contain;
}
.step-text {
    width: 100%;
    padding-left: 0;
}
.step-text h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #333;
    border-bottom: 1px dashed #BBC3CD;
    padding-bottom: 16px;
    line-height: 1.5;
    margin-top: 0;
    text-align: center;
}
.step-list {
    gap: 16px;
}
.step-body {
    flex-direction: column;
    padding: 20px 24px 0;
}
.p-howto-archive__contents {
    padding-top: 80px;
    padding-bottom: 80px;
}
.regulation-box p {
    font-size: 14px;
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.8;
}
section.cta.cta-how-to::before{
    border-radius: 11000000180px 11000000180px 0 0;
}
.p-howto-tabs {
    gap: 16px;
}
.tab-item {
    width: 45%;
    font-size: 12px;
    height: 50px;
}
.regulation-list {
    background: #fff;
    display: inline-block;
    text-align: left;
    padding: 20px 40px;
    border-radius: 10px;
    list-style: disc;
    font-size: 16px;
    line-height: 1.5;
}
.regulation-title {
    color: #FF4596;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    border-bottom: 1px dashed #BBC3CD;
    padding-bottom: 16px;
    line-height: 1.5;
    margin-top: 0;
    text-align: center;
}
}


@media (max-width: 900px) {
.p-howto-archive__contents{
padding-left: 20px;
padding-right: 20px;
}
.p-faq-contact {
    padding: 40px 20px 100px;
}
.c-tag--required {
    background-color: var(--main-pink);
    color: #fff;
    font-size: 14px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}
.c-tag--optional {
    background-color: #9e9e9e;
    color: #fff;
    font-size: 14px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}
.p-contact-archive {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFF8FA 27%, #ffffff 100%);
}
section.p-contact-archive .p-under-page__header {
    padding-top: 110px;
    padding-bottom: 43px;
}
.p-under-page__header {
   padding-top: 110px;
    padding-bottom: 43px;
    background: url(../images/common/under-page-bg-sp.webp) center bottom / cover no-repeat;
}.faq-section{
    margin-bottom: 0;
}h2.p-under-page__title small {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    width: 100%;
    text-align: center;
    margin: auto;
    margin-top: 6px;
    color: #FF4596;
}
.faq-question.eng {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 13px 14px  13px 10px;
    background-color: var(--light-pink);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    text-align: left;
}.faq-category-title {
    color: var(--main-pink);
    font-size: 24px;
    margin: 32px 0 16px;
    font-weight: 700;
    line-height: 1;
}
.answer-content {
    padding: 16px 15px;
    font-size: 14px;
}
.p-useful-archive {
    padding-bottom: 0;
}
.p-news-detail__side{
    display: none;
}
.p-news-detail__inner.w-1220 {
    display: flex;
    justify-content: center;
}
}
h2.fv__copy img{
    width: 100%;
    height: auto;
    object-fit: contain;
}
p.solution__lead span {
    position: relative;
    display: inline-block; /* 上に要素を置くために block 化 */
    line-height: 1;
}

p.solution__lead span::before {
    content: "";
    position: absolute;
    top: -8px;      /* 文字からの距離（デザインに合わせて調整） */
    left: 50%;
    transform: translateX(-50%);
    width: 4px;     /* 4px指定 */
    height: 4px;    /* 4px指定 */
    background-color: #FF3D8A; /* ピンク */
    border-radius: 50%;        /* 正円にする */
}


@media screen and (max-width:768px) {
    .p-news-detail__inner.w-1220 {
    display: flex;
    justify-content: center;
    padding: 0;
}
article.p-news-detail {
    padding-top: 0;
    padding-bottom: 160px;
}
article.p-news-detail {
    padding-top: 0;
    padding-bottom: 0;
}
.p-news-detail__content {
    max-width: 780px;
    background: #fff;
    padding: 92px 22px 120px;
}
.banner-inner {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #FF4596;
    border-radius: 30px;
    gap: 32px;
    justify-content: center;
    padding: 30px 20px;
    flex-direction: column;
}
.banner-inner h2.cta__copy br {
    display: block;
}
.banner-inner h2.cta__copy {
    font-size: 70px;
    font-weight: 700;
    color: #FF4596;
    line-height: 1;
}
.banner-inner__cta__apps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.nav-drawer__scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 0;
    padding-bottom: 60px;
    padding-right: 0;
    gap: 0;
}
.nav-drawer__content {
    background: #fff;
    padding-top: 100px;
    padding-bottom: 40px;
    padding-right: 20px;
    padding-left: 20px;
}
.nav-drawer__arch {
    display: none;
}
@media screen and (max-width: 768px) {
    .nav-drawer__arch {
        display: block;
        width: 100%;
        height: 60px;
        flex-shrink: 0;
    }
    .nav-drawer__arch img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom center;
        display: block;
    }
}
.nav-en {
    font-size: 16px;
    font-weight: 700;
    color: #BBC3CD;
    letter-spacing: 0.05em;
    transition: .25s;
}
.nav-drawer__nav li a {
    padding: 16px 0px 16px;
}
.nav-drawer__catch {
    display: none;
}

.btn-partner-outline{
    display: block;
    margin-top: 8px;
}
.nav-drawer{
    padding-bottom: 0;
    background: transparent;
    height: auto;
    max-height: 100dvh;
    overflow: visible;
}
.nav-drawer{
    transform: translateY(-100%);
}
.nav-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    transition: .7s;
}
.p-useful-archive__inner.w-1220 {
    padding-top: 56px;
    padding-bottom: 120px;
}


.lang-select {
    display: block;
}
}



@media screen and (max-width: 768px) {
    /* 外枠のサイズ調整 */
    .lang-trigger {
        padding: 6px 12px; /* 少しタイトにする */
        font-size: 14px;   /* JPの文字を少し見やすく */
        gap: 4px;          /* アイコンと文字の間隔を狭める */
        height: 36px;      /* 高さを固定すると並びが綺麗になります */
        min-width: 60px;   /* 最小幅を確保 */
        justify-content: center;
    }

    /* 地球儀アイコンのサイズ */
    .lang-trigger img {
        width: 18px;
        height: 18px;
    }

    /* もし矢印（.lang-arrow）がある場合、SPでは非表示にするか
       デザインに合わせて調整してください */
    .lang-arrow {
        display: none; 
    }

    /* ドロップダウンの位置調整（右端に寄せる） */
    .lang-dropdown {
        top: calc(100% + 8px);
        right: 0;
        min-width: 100px; /* 押しやすい幅に */
    }
    .lang-dropdown {
    top: calc(100% + 8px);
    left: 50%;
    min-width: 100px;
    transform: translateX(-50%);
}
}


/* 全体コンテナ */
.legal-container {
    max-width: 900px; /* PCでの見やすさ */
    margin: 0 auto;
    padding: 40px 20px;
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
}

/* 各セクションの区切り */
.legal-section {
    margin-bottom: 30px;
    border-bottom: 1px solid #EBEEF2; /* 下線 */
    padding-bottom: 10px;
}

/* タイトル（ピンク） */
.legal-title {
    color: #FF3399; /* 画像に合わせたピンク */
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* コンテンツ部分 */
.legal-content {
    font-size: 14px;
    margin-bottom: 15px;
    color: #57626F;
}

.legal-content p {
    margin-bottom: 1em;
}

/* リンク */
.legal-content a {
    color: #57626F;
    text-decoration: underline;
}

/* テーブル（スクロール対応） */
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* SPで横に突き抜けないようスクロール */
    margin: 20px 0;
    -webkit-overflow-scrolling: touch;
}

.price-table {
    width: 100%;
    min-width: 500px; /* 崩れないための最小幅 */
    border-collapse: collapse;
    font-size: 11px;
    border: 1px solid #ccc;
}

.price-table th, .price-table td {
    border: 1px solid #ccc;
    padding: 8px 4px;
    text-align: center;
}

.price-table th {
    background: #f9f9f9;
    font-weight: normal;
}

/* 計算式のテキスト */
.calc-box {
    margin: 20px 0;
    font-size: 13px;
}

/* 脚注 */
.legal-footer-note {
    font-size: 12px;
    color: #888;
    margin-top: 40px;
    text-align: center;
}

section.p-legal-archive {
    padding-bottom: 180px;
}
/* SP（768px以下）の調整 */
@media screen and (max-width: 768px) {
    .legal-container {
        padding: 20px 15px;
    }
    
    .legal-title {
        font-size: 15px;
    }

    .legal-content {
        font-size: 13px;
    }
    section.p-legal-archive {
    padding-bottom: 160px;
}
}


/* --- コンテナ設定 --- */
.legal-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #fff;
}

/* --- セクション・タイトル --- */
.legal-section {
    margin-bottom: 32px;
    border-bottom: 1px solid #EBEEF2;
    padding-bottom: 8px;
}

.legal-title {
    color: #FF3399; /* 特徴的なピンク */
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
}

/* --- テキストコンテンツ --- */
.legal-content {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 12px;
}

.legal-content p {
    margin-bottom: 1.2em;
}

.legal-content strong {
    display: block;
    margin-top: 10px;
}

.legal-content a {
    color: #57626F;
    text-decoration: underline;
}

/* --- テーブル（SP横スクロール） --- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}

.price-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 12px;
}

.price-table th, .price-table td {
    border: 1px solid #ddd;
    padding: 10px 5px;
    text-align: center;
}

.price-table th {
    background: #fcfcfc;
    font-weight: 500;
}

/* --- 計算式 --- */
.calc-box {
    padding: 15px 0;
    font-size: 13px;
    color: #444;
}

/* --- フッター注釈 --- */
.legal-footer-info {
    margin-top: 50px;
    padding-top: 20px;
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.6;
}

/* --- スマホ専用調整 (768px以下) --- */
@media screen and (max-width: 768px) {
    .legal-container {
        padding: 20px 16px;
    }

    .legal-title {
        font-size: 15px;
    }

    .legal-content {
        font-size: 13px;
        letter-spacing: -0.01em;
    }

    .u-sp-only {
        display: block;
    }
    .legal-section {
    margin-bottom: 20px;
    border-bottom: 1px solid #EBEEF2;
    padding-bottom: 10px;
}
.legal-container {
    padding: 40px 20px 0;
}.legal-footer-info {
    margin-top: 0;
    padding-top: 20px;
    font-size: 14px;
    color: #666;
    text-align: left;
    line-height: 1.6;
}
.legal-content{
    margin-bottom: 0;
}
}
.legal-container p{
    margin-bottom: 0;
}


/* ============================
   single-campaign: TOPの流用セクションをSPレイアウトで表示
   ※ファイル末尾に配置して詳細度の順序で確実に上書き
   ============================ */

/* --- features --- */
.single-campaign section.features {
    padding-top: 100px;
    padding-bottom: 100px;
    clip-path: ellipse(180% 50% at 50% 50%);
}
.single-campaign h3.features__title {
    font-size: 32px;
}
.single-campaign p.features__subtitle {
    font-size: 14px;
}
.single-campaign .features__grid {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 58px;
}
.single-campaign .features__item {
    width: 100%;
}
.single-campaign .features__badge span {
    line-height: 2.2;
    display: block;
    width: max-content;
    font-size: 12px;
}

/* --- how-to --- */
.single-campaign section.how-to {
    padding-top: 120px;
    padding-bottom: 100px;
}
.single-campaign h3.how-to__title {
    font-size: 32px;
}
.single-campaign p.how-to__subtitle {
    font-size: 14px;
}
.single-campaign .how-to__steps {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    flex-direction: column;
}
.single-campaign .how-to__item {
    width: 100%;
}
.single-campaign .how-to__item:nth-child(1)::after,
.single-campaign .how-to__item:nth-child(3)::after {
    right: auto;
    top: auto;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
}
.single-campaign .how-to__item h4.card__title {
    width: calc(100% - 60px);
    margin-left: 30px;
    font-size: 18px;
}
.single-campaign .how-to__item p.card__desc {
    display: none;
}

/* --- cta --- */
.single-campaign section.cta {
    background-color: transparent;
    margin-top: -40px;
    position: relative;
    background: url(../images/common/bg-dots.webp);
    border-radius: 0;
    overflow: hidden;
}
.single-campaign section.cta::before {
    position: absolute;
    width: 490px;
    height: 490px;
    max-width: 600px;
    max-height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    content: "";
    border-radius: 11000000180px;
}
.single-campaign .cta__inner {
    position: relative;
    z-index: 3;
}
.single-campaign .cta__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
.single-campaign h2.cta__copy {
    font-size: 40px;
    font-weight: 700;
    color: #FF4596;
    line-height: 1;
}
.single-campaign h2.cta__copy br {
    display: none;
}
.single-campaign .cta__action {
    max-width: calc(100% - 40px);
    width: 100%;
}
.single-campaign .cta__apps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 16px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* --- useful --- */
.single-campaign section.useful {
    padding-top: 64px;
    padding-bottom: 120px;
    margin-top: 0;
}
.single-campaign h3.useful__title {
    font-size: 32px;
}
.single-campaign p.useful__subtitle {
    font-size: 14px;
}
.single-campaign section.useful .useful__footer {
    margin-top: 40px;
    text-align: center;
}
.single-campaign section.useful .btn-archive {
    display: inline-block;
    padding: 16px 20px;
    background: #7E8C9A;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    min-width: 250px;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
}
.single-campaign section.useful .card__btn img,
.single-campaign section.useful .card__btn {
    object-fit: contain;
    width: 32px;
    height: 32px;
}

/* --- outline --- */
.single-campaign h3.outline__title {
    font-size: 24px;
    margin-left: auto;
    margin-right: auto;
}
.single-campaign p.outline__subtitle {
    font-size: 14px;
}
.single-campaign section.outline {
    padding-bottom: 120px;
}
.single-campaign .outline__inner.w-1000 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.single-campaign .outline__box {
    width: 100%;
    max-width: 620px;
    padding: 32px 30px;
    background-color: #fff;
    border-radius: 8px;
}
.single-campaign .outline__row dt span {
    font-size: 14px;
    padding: 8px 12px;
    width: 80px;
}
.single-campaign p.outline__note {
    font-size: 14px;
    color: #697787;
    line-height: 1.6;
}
.single-campaign dl.outline__list {
    display: flex;
    gap: 18px;
    font-weight: 500;
    flex-direction: column;
    margin-bottom: 20px;
}

/* --- support --- */
.single-campaign section.support {
    background: #7C8C9F;
    transition: .25s;
    padding-top: 40px;
    padding-bottom: 100px;
    margin-top: -20px;
    border-radius: 20px 20px 0 0;
}
.single-campaign section.support h3.support__title {
    font-size: 24px;
}
.single-campaign section.support p.support__subtitle {
    font-size: 14px;
}
.single-campaign .support__circle {
    max-width: 500px;
    width: 100%;
    margin: auto;
    padding: 0 72px;
}
.single-campaign .support__btn {
    width: 40px;
    height: 40px;
    right: 20px;
    bottom: 0;
}

/* --- footer in campaign --- */
.single-campaign footer.l-footer {
    padding: 60px 20px 32px;
    border-radius: 40px 40px 0 0;
    margin-top: -40px;
    position: relative;
    z-index: 3;
    background-color: #FF4596;
}
.single-campaign nav.l-footer__nav ul {
    display: flex;
    gap: 24px;
    color: #fff;
    margin-top: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ============================
   Campaign Archive Grid
   ============================ */
.p-campaign-archive__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 32px;
    padding-top: 80px;
    padding-bottom: 140px;
}
article.p-campaign-card {
    width: calc((100% - 64px) / 3);
}
.p-campaign-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 358 / 200;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.p-campaign-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p-campaign-card__img::before {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
    content: "";
    background-color: #f23d8b;
    opacity: 0;
    transition: .25s;
    z-index: 3;
}
a:hover .p-campaign-card__img::before {
    opacity: .6;
    transition: .25s;
}
.p-campaign-card__body {
    padding: 12px 0;
}
.p-campaign-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.p-campaign-card__date {
    font-size: 14px;
    color: #57626F;
    line-height: 1.6;
    font-weight: 400;
}
.p-campaign-card__label {
    font-size: 12px;
    padding: 1px 10px;
    border-radius: 100px;
    color: #fff;
    line-height: 1.8;
}
.p-campaign-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
}

/* SP: news & campaign archive 1カラム */
@media screen and (max-width: 768px) {
    .p-news-archive__inner.w-1220 {
        margin-top: 48px;
        padding-bottom: 100px;
    }
    .p-news-archive__grid {
        flex-direction: column;
        gap: 32px;
    }
    article.p-news-card {
        width: 100%;
    }
    .p-campaign-archive__grid {
        flex-direction: column;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 100px;
    }
    article.p-campaign-card {
        width: 100%;
    }
}

/* --- solution --- */
.single-campaign section.solution {
    position: relative;
    padding-top: 48px;
    margin-top: -50px;
    z-index: 2;
    overflow-x: hidden;
}
.single-campaign section.solution::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    clip-path: ellipse(120% 100% at 50% 100%);
}
.single-campaign h3.solution__title {
    font-size: 24px;
    margin: 0 auto 22px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 40px;
}
.single-campaign h3.solution__title span.deco-lr {
    font-size: 32px;
    text-align: center;
    color: #FF3D8A;
}
.single-campaign h3.solution__title::after,
.single-campaign h3.solution__title::before {
    width: 22px;
    height: 44px;
}
.single-campaign .solution__inner {
    margin-bottom: 80px;
    margin-top: 40px;
}
.single-campaign .solution__header {
    padding-left: 20px;
    padding-right: 20px;
}
.single-campaign p.solution__lead {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 32px;
}
.single-campaign .solution__visual {
    width: 100%;
    margin-top: 24px;
}

/* w-系コンテナに常時padding */
.single-campaign .w-1220,
.single-campaign .w-1000 {
    padding-left: 20px;
    padding-right: 20px;
}
/* --- topics（トピックス統合一覧） --- */
section.p-news-archive ul.filter-list {
    flex-wrap: wrap;
}
span.p-news-card__label.label--news,
span.p-news-card__label.label--campaign,
span.p-news-card__label.label--useful {
    background-color: #FF4596;
}

/* ページネーション: ピル型 */
.p-news-archive__pagination {
    gap: 8px;
    align-items: center;
}
.p-news-archive__pagination .page-numbers {
    width: auto;
    min-width: 44px;
    height: 27px;
    padding: 1px 14px;
    border: none;
    border-radius: 100px;
    background: #FF4596;
    color: #fff;
    font-size: 16px;
    letter-spacing: .07em;
}
.p-news-archive__pagination .page-numbers.prev,
.p-news-archive__pagination .page-numbers.next {
    font-size: 13px;
}
.p-news-archive__pagination .page-numbers.dots {
    min-width: auto;
    padding: 1px 2px;
    background: transparent;
    color: #323840;
}
.p-news-archive__pagination .page-numbers.current {
    background: #323840;
}
.p-news-archive__pagination a.page-numbers:hover {
    background: #FF4596;
    opacity: .7;
}

/* 利用規約ページ（複数の規約を1ページに掲載） */
.p-privacy-archive__content .wrap-privacy .p-privacy-doc-title {
    margin-top: 64px;
    margin-bottom: 24px;
    padding-top: 40px;
    border-top: 1px solid #F5D3DE;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
}
.p-privacy-archive__content .wrap-privacy .p-privacy-doc-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.p-privacy-archive__content .wrap-privacy ol,
.p-privacy-archive__content .wrap-privacy ul {
    margin: 0 0 18px;
    padding-left: 1.8em;
    line-height: 1.7;
    letter-spacing: .08em;
    font-size: 12px;
    color: #323840;
}
.p-privacy-archive__content .wrap-privacy ol {
    list-style: decimal;
}
.p-privacy-archive__content .wrap-privacy ul {
    list-style: disc;
}
.p-privacy-archive__content .wrap-privacy li {
    margin-bottom: 6px;
}
.p-privacy-archive__content .wrap-privacy li > ol,
.p-privacy-archive__content .wrap-privacy li > ul {
    margin: 6px 0 0;
}
.p-privacy-archive__content .wrap-privacy .p-privacy-pre p {
    word-break: break-word;
}

/* ------------------------------------------------------------------
   サムネイル未設定時のプレースホルダー（白背景＋縦組みロゴ）
------------------------------------------------------------------ */
.c-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url(../images/common/logo-vertical.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(80%, 270px) auto;
    overflow: hidden;
}

/* 画像側に角丸を持たせているカードは、プレースホルダーにも同じ角丸を適用する */
.news__img .c-thumb-placeholder,
.campaign__img .c-thumb-placeholder {
    border-radius: 12px;
}