@charset "UTF-8";

/* ==========================================================================
    カラー変数・共通設定
   ========================================================================== */
:root {
    /* カラー定義 */
    --white-1: #FFFFFF;
    --pink-1: #FEEDF7;
    --pink-2: #D5268B;
    --pink-3: #F399CD;
    --pink-4: #FEDBEF;
    --pink-5: #FFC7E4;
    --pink-6: #EE93C7;
}
/* ==========================================================================
    レイアウト
   ========================================================================== */
/* 背景 */
.content-wrap .lp-bg  {
    background: url(../../gamepc/img/amakipururu/bg.webp) ;
}
.p-kv {
    border-bottom: 3px solid var(--pink-1);
}
.section-wrap {
    background: var(--pink-1);
    position: relative;
    width: min(1430px, calc(100vw - (clamp(30px, 0.971vw + 26.36px, 45px) * 2)));
    max-width: 100%;
    margin-inline: auto;
}
.section-wrap::before,
.section-wrap::after {
    content: "";
    width: clamp(16px, 1.877vw + 8.96px, 45px);
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}
.section-wrap::before {
    background: url(../../gamepc/img/amakipururu/bg-wave-1.webp) repeat-y top left/contain;
    left: calc(clamp(16px, 1.812vw + 9.20px, 44px) * -1);
}

.section-wrap::after {
    background: url(../../gamepc/img/amakipururu/bg-wave-2.webp) repeat-y top right/contain;
    right: calc(clamp(16px, 1.812vw + 9.20px, 44px) * -1);
}
/* ==========================================================================
    テキスト・タイポグラフィ
   ========================================================================== */
.ttl-h2 {
    color: var(--white-1);
    font-weight: 900;
    text-shadow: 0px 0px 15px rgba(213, 38, 139, 1);
    position: relative;
}
.ttl-h2::before {
    content: "";
    background: url(../../gamepc/img/amakipururu/deco-heart-pc.webp) no-repeat center center /100%;
    width: 120px;
    height: 78px;
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
}
.ttl-h2.icon-none {
    text-shadow: none;
}
.ttl-h2.icon-none::before {
    content: none;
}
.ttl-sub {
    color: var(--pink-2);
}
.txt-main {
    color: var(--pink-2);
}
.txt-special {
    color: var(--white-1);
    font-size: clamp(24px, 1.683vw + 17.94px, 50px);
    font-weight: 900;
    line-height: 1.4;
    text-shadow: 0px 0px 15px rgba(213, 38, 139, 1);
    margin-top: clamp(40px, 2.589vw + 30.29px, 80px);
    margin-bottom: clamp(15px, 0.971vw + 11.36px, 30px);
}
.txt-note  {
    color: var(--pink-2);
}
.model-catch {
    color: var(--pink-2);
}
.model-name {
    color: var(--pink-2);
}
.model-spec {
    color: var(--pink-2);
}
.model-price {
    color: var(--pink-2);
}
.bonus-name {
    color: var(--white-1);
}
.bonus-name .number {
    color: var(--pink-2);
}
.txt-emphasis {
    color: var(--white-1);
}
.bonus-a-item .txt-note {
    color: var(--white-1);
    line-height: 1.7;
}
.txt-profile {
    color: var(--pink-2);
}
.sns-link {
    background: var(--pink-2);
}
@media screen and (max-width: 767px) {
    .ttl-h2::before {
        width: 77px;
        height: 45px;
        background: url(../../gamepc/img/amakipururu/deco-heart-sp.webp) no-repeat center center /100%;
        top: -30px;
    }
}
/* ==========================================================================
    ギャラリー
   ========================================================================== */
@media (hover: hover) {
  .gallery-item:hover {
    background-color: var(--pink-3);
  }
  .gallery-item:hover img {
    opacity: 0.85;
  }
}

/* ==========================================================================
    ラインアップ
   ========================================================================== */
.product-item {
    background: var(--white-1);
    border: 3px solid var(--pink-2);
}
/* ホバー時のアニメーション（お好みで調整してください） */
@media (hover: hover) {
    /* 1. カード全体のホバー指定 */
    .product-item:hover {
        background-color:var(--pink-4); /* ホバー時の背景色（お好みの色に調整してください） */
    }

    /* 2. カードホバー時の内部ボタン（.model-link）の変化 */
    .product-item:hover .model-link {
        background: ; /* ボタンの背景色変化 */
    }

    /* 3. カードホバー時のボタン内矢印の変化 */
    .product-item:hover .model-link::after {
        transform: rotate(45deg);
    }
}
.product-inner {
    border-color: var(--pink-2);
}
.product-inner .model-link {
    border-color: var(--pink-2);
}
.model-link::before {
    border-color: var(--pink-2);
}
.product-item:hover .model-link::after {
    background: var(--pink-6);
}
@media screen and (max-width: 767px) {
    .product-item {
        border-width: 2px;
    }
    .product-inner {
        padding-right: 0;
    }
    .product-inner .model-link {
        top: inherit;
        bottom: -20px;
    }
}
/* ==========================================================================
    ボーナス
   ========================================================================== */
.-align-right::after {
    background: var(--pink-3);
}
.-align-left::after {
    background: var(--pink-3);
}
.-align-right .deco-block {
    position: absolute;
    left: -30%;
    top: -60px;
    width: 30%;
    height: 100%;
}
.-align-right .deco-block .deco-1 {
    width: 71%;
    position: absolute;
    top: 0;
    right: 0;
}
.-align-right .deco-block .deco-2 {
    width: 89%;
    position: absolute;
    right: 30px;
    bottom: -50px;
}
.-align-left .deco-block {
    position: absolute;
    right: -30%;
    top: -60px;
    width: 30%;
    height: 100%;
}
.-align-left .deco-block .deco-1 {
    width: 78%;
    position: absolute;
    top: 19%;
    right: 18%;
}
.-align-left .deco-block .deco-2 {
    width: 67%;
    position: absolute;
    right: 0%;
    bottom: -19%;
}
/* ==========================================================================
    SPECIAL CONTENTS 
   ========================================================================== */
.special-a-container{
    background: var(--pink-5);
}
.special-a-container .txt-special-l {
    color: var(--pink-2);
}
.special-a-container .txt-special-m {
    color: var(--pink-2);
    line-height: 2;
}
.shop-block {
    border-color: var(--pink-2);
    margin-bottom: 15px;
}
.shop-block .ttl-h3 {
    color: var(--pink-2);
    font-size: clamp(15px, 0.324vw + 13.79px, 20px);
}
.shop-block .shop-list {
    color: var(--pink-2);
    font-size: clamp(10px, 0.518vw + 8.06px, 18px);
    font-weight: 900;
}
@media screen and (max-width: 767px) {
    .shop-block {
        margin-bottom: 0;
    }
}
/* ==========================================================================
    profile 
   ========================================================================== */
.logo-profile {
    width: 80%;
    max-width: 489px;
}
/* ==========================================================================
    faq
   ========================================================================== */
.accordion-item {
    color: var(--pink-2);
    border-color: var(--pink-2);
}
.accordion-item:nth-last-of-type(1), .accordion-item:nth-last-of-type(2) {
    border-bottom-color: var(--pink-2);
}
.accordion-trigger {
    color: var(--pink-2);
}
.accordion-trigger:hover {
    background: var(--pink-5);
}
.accordion-icon {
    border-color: var(--pink-2);
}
.accordion-icon::before,
.accordion-icon::after {
    background: var(--pink-2);
}
.accordion-item.is-open .accordion-content {
    border-top-color: var(--pink-2);
}